:root{--gold:#edc35b;--gold-bright:#ffe285;--gold-glow:#ffc107;--gold-deep:#b77919;--wood:#71380f;--wood-shadow:#3b1d0d;--parchment:#f4e4bc;--paper-light:#fff3cf;--ink:#2b1708;--modal-shadow:0 0 0 2px var(--wood-shadow), 0 0 0 4px var(--gold), 0 0 0 6px var(--wood-shadow), 0 20px 50px #0a0502f2}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body.is-lobby{height:100vh;overflow:hidden}.homepage-container{background-color:#120b06;background-image:url(/assets/ui/seamless_panorama.png);background-position:50%;background-size:cover;justify-content:center;align-items:center;width:100vw;height:100dvh;display:flex;position:relative;overflow:hidden}.homepage-container:before{content:"";-webkit-backdrop-filter:blur(16px);z-index:1;background:#0e0804ad;position:absolute;inset:0}.homepage-stage{z-index:2;aspect-ratio:1672/940;background-color:#38a5fe;width:min(100vw,177.872vh);max-width:100vw;height:min(100vh,56.2201vw);max-height:100dvh;position:relative;overflow:hidden;box-shadow:0 15px 50px #000000f2,0 0 0 2px #edc35b73}@media (min-aspect-ratio:1672/940){.homepage-stage{width:177.872vh;height:100dvh}}@media (max-aspect-ratio:1672/940){.homepage-stage{width:100vw;height:56.2201vw}}.endless-bg-track{pointer-events:none;z-index:1;will-change:transform;backface-visibility:hidden;filter:blur(3.5px)brightness(.92);flex-direction:row;width:auto;height:calc(100% + 24px);animation:65s linear infinite endlessPan;display:flex;position:absolute;top:-12px;left:-12px;transform:translate(0,0)}.endless-bg-img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;flex-shrink:0;width:auto;height:100%;display:block}@keyframes endlessPan{0%{transform:translate(0,0)}to{transform:translate(-50%)}}.ambient-particles{pointer-events:none;z-index:6;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.festival-petal{opacity:.65;filter:drop-shadow(0 2px 4px #0000004d);pointer-events:none;background:radial-gradient(circle at 30% 30%,#fff176,#f57f17);border-radius:50% 0 50% 50%;animation:linear infinite petalFall;position:absolute}@keyframes petalFall{0%{opacity:0;transform:translateY(-20px)translate(0)rotate(0)scale(.8)}15%{opacity:.75}85%{opacity:.75}to{opacity:0;transform:translateY(960px)translate(120px)rotate(360deg)scale(1)}}.top-controls{z-index:40;align-items:center;gap:clamp(8px,.9vw,15px);display:flex;position:absolute;top:2.45%;right:2.45%}.ctrl-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;transition:transform .25s cubic-bezier(.18,.89,.32,1.28),filter .25s;display:flex}.ctrl-btn.btn-audio,.ctrl-btn.btn-settings{width:clamp(38px,3.8vw,56px);height:clamp(38px,3.8vw,56px)}.ctrl-icon-pixel{object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 10px #000000b3);width:100%;height:100%;transition:transform .25s cubic-bezier(.2,.9,.3,1.3),filter .25s;display:block}.ctrl-btn:hover .ctrl-icon-pixel{filter:drop-shadow(0 0 14px var(--gold-bright)) drop-shadow(0 6px 12px #000c);transform:translateY(-3px)scale(1.12)}.ctrl-btn:active .ctrl-icon-pixel{transform:translateY(1px)scale(.96)}.layer-logo-wrap{z-index:20;cursor:pointer;width:47%;height:25%;transition:transform .3s cubic-bezier(.18,.89,.32,1.28),filter .3s;position:absolute;top:1.2%;left:50%;overflow:visible;transform:translate(-50%)}.logo-img{object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 14px #000000a6);width:100%;height:100%;transition:filter .3s;display:block}.layer-logo-wrap:hover{transform:translate(-50%)translateY(-4px)scale(1.02)}.layer-logo-wrap:hover .logo-img{filter:drop-shadow(0 0 22px #ffe285f2)drop-shadow(0 12px 24px #000000bf)}.layer-logo-wrap:active{transform:translate(-50%)translateY(0)scale(.99)}.carousel-arrow{aspect-ratio:490/600;z-index:32;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;width:4.4%;padding:0;transition:transform .16s cubic-bezier(.16,1,.3,1),filter .16s;position:absolute;top:48%;transform:translateY(-50%)}.btn-arrow-prev{left:13%}.btn-arrow-next{right:13%}.arrow-img{object-fit:contain;pointer-events:none;filter:drop-shadow(0 5px 12px #000000bf);width:100%;height:100%;transition:filter .25s;display:block}.btn-arrow-prev:hover,.btn-arrow-next:hover{transform:translateY(-50%)scale(1.18)}.carousel-arrow:hover .arrow-img{filter:drop-shadow(0 0 16px #ffe664f2)drop-shadow(0 8px 16px #000000d9)}.btn-arrow-prev:active{transform:translateY(-50%)scale(.95)translate(-4px)}.btn-arrow-next:active{transform:translateY(-50%)scale(.95)translate(4px)}.carousel-viewport{pointer-events:none;z-index:12;width:100%;height:100%;position:absolute;top:0;left:0}.carousel-viewport.no-transition .card-item{transition:none!important}.card-item{cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;transform-origin:50%;will-change:transform, opacity;outline:none;justify-content:center;align-items:center;width:17.2%;height:49%;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .24s ease-out;display:flex;position:absolute;top:22.8%;left:50%}.card-img{object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 18px #000000a6);width:100%;height:100%;transition:filter .2s;display:block;transform:translateZ(0)}.card-item.slot-center{z-index:25;opacity:1;transform:translate(-50%)scale(1.02)}.card-item.slot-left{z-index:18;opacity:.88;transform:translate(-172.1%)scale(.92)}.card-item.slot-right{z-index:18;opacity:.88;transform:translate(72.1%)scale(.92)}.card-item.slot-hidden-left{z-index:8;opacity:0;pointer-events:none;transform:translate(-294%)scale(.75)}.card-item.slot-hidden-right{z-index:8;opacity:0;pointer-events:none;transform:translate(194%)scale(.75)}.card-item.slot-hidden-back{z-index:2;opacity:0;pointer-events:none;transform:translate(-50%,30px)scale(.5)}.card-item.slot-center:hover{z-index:35!important;transform:translate(-50%,-15px)scale(1.05)!important}.card-item.slot-left:hover{opacity:1!important;z-index:28!important;transform:translate(-172.1%,-12px)scale(.98)!important}.card-item.slot-right:hover{opacity:1!important;z-index:28!important;transform:translate(72.1%,-12px)scale(.98)!important}.card-item:hover .card-img{filter:drop-shadow(0 0 16px #ffe678f2)drop-shadow(0 20px 28px #000000d9)}.card-item.slot-center.selected{z-index:26}.card-item.slot-center.selected .card-img{filter:drop-shadow(0 0 8px #ffe15af2)drop-shadow(0 0 24px #ffaa00d9)drop-shadow(0 14px 22px #000000bf)}.card-item.slot-center.selected:hover .card-img{filter:drop-shadow(0 0 14px #fff082)drop-shadow(0 0 32px #ffc31ef2)drop-shadow(0 18px 28px #000000d9)}.carousel-dots{z-index:28;pointer-events:none;align-items:center;gap:8px;display:flex;position:absolute;top:73.2%;left:50%;transform:translate(-50%)}.carousel-dots .dot{background:#ffeb9659;border:1px solid #71380fcc;border-radius:50%;width:8px;height:8px;transition:all .3s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 2px 4px #0009}.carousel-dots .dot.active{background:radial-gradient(circle at 35% 30%,#fff176,#f57f17);border-color:#fff;border-radius:11px;width:22px;box-shadow:0 0 10px #ffc107,0 2px 6px #000c}.action-btn{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;z-index:30;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;padding:0;text-decoration:none;transition:transform .16s cubic-bezier(.16,1,.3,1),filter .16s;display:block;position:absolute;left:50%}.btn-img{object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 12px #000000a6);width:100%;height:100%;transition:filter .25s;display:block}.btn-play{width:27.2%;height:9.8%;top:77.8%;transform:translate(-50%)}.btn-play:hover{transform:translate(-50%)translateY(-4px)scale(1.03)}.btn-play:hover .btn-img{filter:drop-shadow(0 0 18px #ffe285f2)drop-shadow(0 12px 22px #000000bf)}.btn-play:active{transform:translate(-50%)translateY(2px)scale(.98)}.btn-culture{width:21.2%;height:6.2%;top:88%;transform:translate(-50%)}.btn-culture:hover{transform:translate(-50%)translateY(-3px)scale(1.03)}.btn-culture:hover .btn-img{filter:drop-shadow(0 0 14px #ffd700d9)drop-shadow(0 8px 16px #000000b3)}.btn-culture:active{transform:translate(-50%)translateY(1px)scale(.98)}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:100;opacity:0;pointer-events:none;background:#0f0804db;justify-content:center;align-items:center;width:100vw;height:100vh;padding:16px;transition:opacity .25s;display:flex;position:fixed;top:0;left:0}.modal-overlay.open{opacity:1;pointer-events:auto}.modal-box{background:radial-gradient(ellipse at 45% 20%, var(--paper-light), var(--parchment));color:var(--ink);border:3px solid var(--gold);box-shadow:var(--modal-shadow);border-radius:8px;flex-direction:column;width:100%;max-width:680px;max-height:88vh;animation:.28s cubic-bezier(.18,.89,.32,1.28) modalEnter;display:flex;position:relative;overflow:hidden}@keyframes modalEnter{0%{opacity:0;transform:scale(.9)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-header{color:var(--gold-bright);border-bottom:2px solid var(--gold);background:linear-gradient(#5c2c0e,#3a1906);justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.modal-header h2{letter-spacing:.5px;text-shadow:0 2px 4px #000c;font-size:clamp(14px,1.3vw,18px);font-weight:800}.modal-close-btn{color:var(--gold-bright);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:28px;line-height:1;transition:transform .2s,color .2s}.modal-close-btn:hover{color:#fff;transform:scale(1.15)rotate(90deg)}.modal-body{color:#2b1708;padding:20px;font-size:clamp(13px,1vw,15px);line-height:1.6;overflow-y:auto}.culture-section{border-bottom:1px dashed #71380f59;margin-bottom:16px;padding-bottom:14px}.culture-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.culture-section h3{color:#8b3a0b;margin-bottom:6px;font-size:clamp(14px,1.1vw,16px);font-weight:700}.modal-footer{background:#71380f1a;border-top:1px solid #71380f40;justify-content:flex-end;padding:12px 20px;display:flex}.btn-modal-action{color:#fff;border:1px solid var(--gold-bright);cursor:pointer;background:linear-gradient(#d49a37,#8c5211);border-radius:4px;padding:8px 20px;font-size:13px;font-weight:700;transition:transform .2s,filter .2s;box-shadow:0 3px 6px #00000059}.btn-modal-action:hover{filter:brightness(1.15);transform:translateY(-2px)}.btn-modal-action.btn-danger{background:linear-gradient(#c0392b,#7b1f14);border-color:#e74c3c}.score-board-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0;display:grid}.score-card{background:#fff9;border:1px solid #71380f4d;border-radius:6px;flex-direction:column;gap:4px;padding:10px 14px;display:flex}.score-game-name{color:#8b3a0b;font-size:12px;font-weight:700}.score-val{color:#b77919;font-size:24px;font-weight:900}.score-unit{color:#666;font-size:11px}.reset-data-wrap{text-align:center;margin-top:14px}.page-transition-overlay{z-index:999;opacity:0;pointer-events:none;background:#0a0502f2;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .35s;display:flex;position:fixed;top:0;left:0}.page-transition-overlay.active{opacity:1;pointer-events:auto}.transition-spinner{flex-direction:column;align-items:center;gap:18px;display:flex}.spinner-ring{border:4px solid #edc35b33;border-top-color:var(--gold-bright);border-radius:50%;width:52px;height:52px;animation:.8s linear infinite spinRing}@keyframes spinRing{to{transform:rotate(360deg)}}.spinner-text{color:var(--gold-bright);letter-spacing:1px;text-shadow:0 0 10px var(--gold);font-size:16px;font-weight:800}