/* =========================================
   ROOMI 2.0
   Pixel Game + Cute Japanese Web Style
========================================= */
/* =================================================

ROOMI 2.0
全站色彩主調

================================================= */
:root{

/* =========================
        ROOMI 主色
========================= */
/* 主天空藍 */

--roomi-purple:

#8FC6FF;
/* 深紫文字 */

--roomi-dark-purple:

#593878;
/* 標題紫 */

--roomi-title-purple:

#934dcc;
/* 陰影紫 */

--roomi-shadow-purple:

#a978d6;

/* =========================
        粉色系
========================= */


--roomi-pink:

#ffb6d9;



--roomi-light-pink:

#fff0ff;



--roomi-soft-pink:

#ffe8f5;







/* =========================
        金幣 / Reward
========================= */
--roomi-gold:

#ffe79a;

--roomi-gold-dark:

#d0a447;

/* =========================
        系統狀態
========================= */

/* 成功 */

--roomi-success:

#d7f5df;

--roomi-success-text:

#4d9b63;


/* 警告 */

--roomi-warning:

#ffb5c5;



--roomi-warning-text:

#d65c7a;

/* =========================
        特效
========================= */


--roomi-glow:

rgba(210,150,255,.5);



--roomi-border:

#dfb5ff;

}

/* =========================================
   基本設定
========================================= */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;
    padding: 0;

}


body {

    background-image:
        url(../images/1680.jpg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;


    color: #555;


    /* 中文主要字體 */

    font-family:
        "Zen Maru Gothic",
        "Microsoft JhengHei",
        sans-serif;


    font-size: 14px;

}


/* =========================================
   英文像素字體
========================================= */

.pixel,
.logo,
.join,
.more,
.new {

    font-family:
        "Pixelify Sans",
        monospace;

}


/* =========================================
   整個網站
========================================= */

.site {

    width: 100%;

    min-height: 100vh;

}


/* =========================================
   TOP
========================================= */

.header {

    width: 100%;

    height: 62px;


    padding:
        5px
        max(20px, calc((100% - 1100px) / 2));


    display: flex;

    align-items: center;

    gap: 30px;


    background:
        linear-gradient(
            #34b9e8,
            #21a9d8
        );


    border-bottom:
        5px solid white;


    box-shadow:
        0 2px 5px
        rgba(0,0,0,.15);


    color: white;

}


/* =========================================
   LOGO
========================================= */

.logo {

    min-width: 165px;

    font-size: 31px;

    font-weight: 700;

    letter-spacing: 1px;

    color: white;

    text-shadow:
        2px 2px 0 #168bb6;

}


.logo span {

    font-size: 14px;

    padding:
        3px 6px;


    background: white;

    color: #20a5d5;


    border-radius: 10px;

}


/* =========================================
   導覽
========================================= */

nav {

    flex: 1;

    display: flex;

    gap: 3px;

}


nav a {

    padding:
        8px 14px;


    color: white;

    text-decoration: none;


    font-family:
        "Zen Maru Gothic",
        sans-serif;


    font-weight: 700;

    border-radius: 15px;


    transition:
        .15s;

}


nav a:hover {

    background:
        rgba(255,255,255,.25);

}


/* =========================================
   登入
========================================= */

.login {

    width: 190px;

    padding:
        5px 8px;


    background:
        rgba(255,255,255,.88);


    color: #666;

    border-radius:
        0 0 7px 7px;


    font-size: 10px;

}


.login-row {

    display: flex;

    gap: 3px;

    margin-top: 2px;

}


.login input {

    width: 62px;

    height: 19px;

    padding: 2px;

    border:
        1px solid #ccc;

}


.login button {

    height: 19px;

    border: 0;

    background: #789eaa;

    color: white;

    cursor: pointer;

}


/* =========================================
   HERO
========================================= */

.hero {

    position: relative;


    width: 100%;

    max-width: 1100px;

    height: 470px;


    margin: 0 auto;


    overflow: hidden;


    background:
        linear-gradient(
            #61d4f2,
            #dff9f7
        );


    border-bottom:
        8px solid white;

}


/* =========================================
   城市主視覺
========================================= */

.city-image {

    position: absolute;


    left: 5%;

    bottom: 0;


    width: 62%;

    max-width: 700px;


    height: auto;


    z-index: 1;

}


/* =========================================
   右側宣傳文字
========================================= */

.hero-text {

    position: absolute;


    right: 7%;

    top: 105px;


    width: 330px;


    text-align: center;


    z-index: 3;


    color: white;


    text-shadow:
        1px 2px 2px
        rgba(0,0,0,.15);

}


.small-title {

    font-size: 19px;

    font-weight: 700;

}


.hero h1 {

    margin:
        8px 0;


    font-family:
        "Zen Maru Gothic",
        sans-serif;


    font-size: 40px;

    line-height: 1.2;

    font-weight: 900;

    color: white;

}


.hero p {

    font-size: 16px;

    font-weight: 700;

}


/* =========================================
   開始遊戲
========================================= */

.join {

    display: inline-block;


    margin-top: 12px;


    padding:
        10px 28px;


    background:
        linear-gradient(
            #ffd83d,
            #ffb900
        );


    border:
        4px solid white;


    border-radius: 12px;


    color: white;


    text-decoration: none;


    font-size: 18px;

    font-weight: 700;


    text-shadow:
        1px 2px 0 #c88a00;


    box-shadow:
        0 3px 5px
        rgba(0,0,0,.2);


    transition:
        .15s;

}


.join:hover {

    transform:
        translateY(-2px);


    filter:
        brightness(1.08);

}


/* =========================================
   三欄
========================================= */

.columns {

    width: 92%;

    max-width: 1100px;


    margin:
        0 auto;


    display: grid;


    grid-template-columns:
        repeat(3, 1fr);


    gap: 6px;

}


/* =========================================
   BOX
========================================= */

.box {

    min-height: 210px;


    background:
        rgba(255,250,242,.96);


    border-radius:
        0 0 7px 7px;


    overflow: hidden;


    box-shadow:
        0 1px 3px
        rgba(0,0,0,.12);

}


/* =========================================
   BOX TITLE
========================================= */

.box-title {

    height: 35px;


    padding:
        5px 12px;


    display: flex;

    align-items: center;

    justify-content: center;


    gap: 7px;


    background:
        linear-gradient(
            #a9d83b,
            #83bd22
        );


    border-bottom:
        2px solid #70a919;


    color: white;


    text-shadow:
        1px 1px 0 #6b991a;

}


/* 英文 */

.box-title .pixel {

    font-size: 17px;

    font-weight: 700;

}


/* 中文 */

.box-title .chinese {

    font-family:
        "Zen Maru Gothic",
        sans-serif;


    font-size: 12px;

    font-weight: 700;

}


/* =========================================
   BOX 內容
========================================= */

.box > p,
.box > h3,
.box > label,
.box > ul {

    margin-left: 15px;

    margin-right: 15px;

}


.box h3 {

    color: #e99026;


    font-size: 14px;

    font-weight: 700;


    border-bottom:
        2px dotted #a5c64c;


    padding-bottom: 5px;

}


.box p {

    line-height: 1.7;

}


/* =========================================
   ITEMS 主題精品
========================================= */

.item-image {
    height: 105px;
    margin: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #d6c0ff,
        #f7e8ff
    );

    overflow: hidden;
}

.item-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 35%;

    image-rendering: pixelated;
}


.more {

    color: #72a622;

    text-decoration: underline;

    font-size: 15px;

}


/* =========================================
   EVENTS
========================================= */

.event {

    position: relative;


    margin: 10px;

    padding: 10px;


    background:
        #fff1ce;


    border-radius: 7px;

}


.event b {

    color: #e99026;

    font-size: 14px;

}


.event p {

    margin: 5px 0;

    font-size: 12px;

}


.new {

    position: absolute;

    right: 8px;

    top: 8px;


    color: #f0a900;

    font-size: 12px;

}


/* =========================================
   GAMES
========================================= */

.game-list {

    padding: 5px 10px;

}


.game-list a {

    display: block;


    padding: 9px;


    margin-bottom: 2px;


    background:
        rgba(255,255,255,.8);


    border-bottom:
        1px dotted #bbb;


    color: #666;


    text-decoration: none;


    font-family:
        "Zen Maru Gothic",
        sans-serif;


    font-weight: 500;

}


.game-list a:hover {

    background:
        #f2f9dd;


    color: #79a920;

}


/* =========================================
   第二排
========================================= */

.lower {

    margin-top: 7px;

    margin-bottom: 35px;

}


/* =========================================
   投票
========================================= */

.box label {

    display: block;

    margin-top: 8px;

    font-family:
        "Zen Maru Gothic",
        sans-serif;

}


.vote {

    margin: 15px;


    padding:
        6px 25px;


    border: 0;


    border-radius: 12px;


    background:
        #8ec52b;


    color: white;


    font-family:
        "Zen Maru Gothic",
        sans-serif;


    font-weight: 700;


    cursor: pointer;

}


/* =========================================
   NEWS
========================================= */

.news {

    list-style: none;


    padding:
        8px 15px;

}


.news li {

    padding:
        7px 0;


    border-bottom:
        1px dotted #bbb;

}


.news a {

    color: #777;

    text-decoration: none;


    font-family:
        "Zen Maru Gothic",
        sans-serif;

}


.news a:hover {

    color: #e99026;

    text-decoration: underline;

}


/* =========================================
   FOOTER
========================================= */

footer {

    padding:
        25px 5%;


    background:
        rgba(243,243,243,.96);


    border-top:
        5px solid #ddd;


    text-align: center;


    color: #888;

}


.footer-links {

    display: flex;


    justify-content: center;


    flex-wrap: wrap;


    gap: 25px;

}


.footer-links a {

    color: #777;

    text-decoration: none;


    font-family:
        "Zen Maru Gothic",
        sans-serif;


    font-weight: 500;

}


.footer-links a:hover {

    color: #7faf26;

}


footer p {

    margin-top: 20px;


    font-family:
        "Pixelify Sans",
        monospace;


    font-size: 11px;

}


/* =========================================
   手機版
========================================= */

@media (max-width: 800px) {


    .header {

        height: auto;


        flex-wrap: wrap;


        padding: 10px 15px;

    }


    nav {

        order: 3;


        width: 100%;


        justify-content: center;

    }


    .login {

        display: none;

    }


    .hero {

        height: 550px;

    }


    .city-image {

        left: 2%;

        width: 90%;

        max-width: none;

    }


    .hero-text {

        right: 5%;

        top: 330px;


        width: 90%;

    }


    .hero h1 {

        font-size: 30px;

    }


    .columns {

        grid-template-columns:
            1fr;

    }

}