:root{--card-width:min(13vw, calc((100vh - 120px) / 8.5), 160px);--card-height:calc(var(--card-width) * 1.5);--card-overlap:calc(var(--card-height) * -0.42);--card-margin:calc(var(--card-width) * 0.05)}body{font-family:Arial,sans-serif;background-color:#2d1b2d;background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;color:#fff;margin:0;padding:0;display:flex;justify-content:center}#game-container{max-width:1000px;width:100%;padding:0;text-align:center;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:100vh}header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;row-gap:6px;margin-bottom:1.5vh;background:rgba(0,0,0,.5);padding:6px 12px}.header-left{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}#btn-menu,.flat-btn{background:0 0;border:none;border-radius:5px;color:#fff;font-size:1.4rem;padding:4px 6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.header-right .icon-btn{width:32px;height:32px;box-sizing:border-box}.header-right .icon-btn svg{width:1em;height:1em}#btn-menu:hover,.flat-btn:hover{background:rgba(255,255,255,.1)}#score,#timer{display:inline-flex;align-items:center;gap:4px;font-size:clamp(.9rem, 2.5vw, 1rem);font-weight:700;color:#fff;white-space:nowrap}#status{font-size:clamp(.9rem, 2.5vw, 1rem);font-weight:700;color:#ff5252;white-space:nowrap}.header-icon{display:inline-flex;align-items:center;line-height:1}.header-right{display:flex;gap:6px;align-items:center}button{padding:6px 12px;background-color:#fff;color:#2e7d32;border:none;border-radius:5px;cursor:pointer;font-weight:700;font-size:clamp(.8rem, 2.5vw, .9rem);line-height:1}button:hover{background-color:#e0e0e0}#pyramid-container{display:flex;flex-direction:column;align-items:center;margin-bottom:2vh;flex-grow:1;justify-content:center}.pyramid-row{display:flex;justify-content:center;margin-top:var(--card-overlap)}.pyramid-row:first-child{margin-top:0}.card{width:var(--card-width);height:var(--card-height);background-color:transparent;margin:0 var(--card-margin);display:flex;justify-content:center;align-items:center;cursor:pointer;user-select:none;perspective:1000px;transform-style:preserve-3d}.card-inner{width:100%;height:100%;position:relative;transition:transform .6s;transform-style:preserve-3d}.card.is-flipped .card-inner{transform:rotateY(180deg)}.card.selected .card-inner{box-shadow:0 0 12px 4px #e0c84c;transform:rotateY(180deg) translateY(-5px)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:9px;box-shadow:2px 2px 4px rgba(0,0,0,.5);overflow:hidden}.card-front-face{transform:rotateY(180deg)}.card-back-face{background-color:transparent}.card-img{width:100%;height:100%;object-fit:contain}.card-back{width:100%;height:100%;object-fit:cover}.card.empty .card-inner{display:none}.card.empty{border:none;box-shadow:none;cursor:default;background:0 0;pointer-events:none}.red{color:#d32f2f}.black{color:#212121}#bottom-area{display:flex;justify-content:center}.deck-area{display:flex;gap:20px}.card-slot{position:relative;width:var(--card-width);height:var(--card-height)}.simple-card{width:var(--card-width);height:var(--card-height);border-radius:9px;box-shadow:2px 2px 4px rgba(0,0,0,.5);overflow:hidden;cursor:pointer}.simple-card.selected{box-shadow:0 0 12px 4px #e0c84c;transform:translateY(-5px)}.simple-card.empty{box-shadow:none;border:none;cursor:default;background:0 0}#waste .simple-card.empty{border:2px solid rgba(255,255,255,.3);border-radius:9px;box-sizing:border-box}.floating-emoji{position:fixed;font-size:3rem;pointer-events:none;animation:floatRandom 3s ease-in forwards;z-index:1000}@keyframes floatRandom{0%{transform:translateY(0) scale(.5) rotate(-20deg);opacity:0}10%{opacity:1}100%{transform:translateY(-100vh) scale(1.5) rotate(20deg);opacity:0}}@keyframes slideAndTurn{0%{transform:translateX(calc(-1 * (var(--card-width) + 20px))) rotateY(-180deg) scale(1)}40%{transform:translateX(calc(-.4 * (var(--card-width) + 20px))) rotateY(-180deg) scale(1.1)}100%{transform:translateX(0) rotateY(0) scale(1)}}.slide-turn-anim{animation:slideAndTurn .4s ease-out forwards}@keyframes matchDisappear{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}100%{transform:scale(0) rotate(15deg);opacity:0}}.match-anim{animation:matchDisappear .5s forwards ease-out;pointer-events:none;box-shadow:0 0 15px 5px #e0c84c!important;border-radius:9px}@keyframes hintPulse{0%,100%{box-shadow:0 0 8px 3px rgba(76,175,80,.7)}50%{box-shadow:0 0 22px 10px #4caf50}}.card.hint-pulse .card-inner{animation:hintPulse 1s ease-in-out infinite;transform:rotateY(180deg) translateY(-5px)}.simple-card.hint-pulse{animation:hintPulse 1s ease-in-out infinite;border-radius:9px;transform:translateY(-5px)}.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:2500;opacity:0;pointer-events:none;transition:opacity .25s ease}.drawer-overlay.open{opacity:1;pointer-events:auto}.nav-drawer{position:fixed;top:0;left:0;height:100%;width:280px;max-width:85vw;background:#2d1b2d;border-right:3px solid #e0c84c;box-shadow:4px 0 15px rgba(0,0,0,.5);z-index:2600;transform:translateX(-100%);transition:transform .25s ease;display:flex;flex-direction:column;gap:16px;padding:16px;box-sizing:border-box;overflow-y:auto}.nav-drawer.open{transform:translateX(0)}.drawer-top{display:flex;align-items:center;justify-content:space-between}.drawer-top h1{margin:0;font-size:1.3rem;color:#fff}#btn-close-drawer{background:0 0;border:none;color:#e0c84c;font-size:1.3rem;cursor:pointer;padding:0 4px}.drawer-seed-row{display:flex;align-items:center}.drawer-seed-row .seed-box{width:100%}.drawer-btn{width:100%}.drawer-separator{border-top:2px dotted rgba(224,200,76,.4)}.drawer-rules{text-align:left;border-top:2px dotted rgba(224,200,76,.4);padding-top:12px;font-size:.9rem;line-height:1.4}.drawer-rules h3{margin:0 0 8px;color:#e0c84c}.drawer-rules p,.drawer-rules ul{margin:8px 0}.drawer-rules ul{padding-left:20px}#game-over-popup{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:2000}#game-over-popup.hidden{display:none}.popup-content{position:relative;background:#2d1b2d;padding:18px;border-radius:15px;border:3px solid #e0c84c;text-align:center;color:#fff;width:480px;max-width:92vw;min-height:320px;max-height:90vh;overflow-y:auto;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:14px}.popup-close{position:absolute;top:8px;right:8px;background:0 0;border:none;color:#e0c84c;font-size:1.3rem;cursor:pointer;padding:0 4px;line-height:1}.popup-top{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.popup-left{display:flex;flex-direction:column;align-items:center;gap:8px}#game-over-actions,.popup-left p{margin:0;width:100%;text-align:left}.popup-title-row{display:flex;align-items:center;gap:8px}.popup-title-row h2{margin:0}#popup-emoji{font-size:2rem}#popup-score,#popup-time{font-size:1.1rem;font-weight:700;color:#e0c84c}code.retro-inline{font-family:VT323,monospace;font-size:1.3rem;color:#e0c84c}.seed-box{display:inline-flex;align-items:center;gap:6px;background:rgba(224,200,76,.1);border:2px dotted #e0c84c;padding:2px 6px;margin:0 2px;max-width:100%;box-sizing:border-box}.seed-box code.retro-inline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.seed-box .seed-copy{display:inline-flex;flex-shrink:0;font-size:.85em}.retro-btn{font-family:VT323,monospace;font-size:1.3rem;line-height:1;color:#2d1b2d;background:#e0c84c;border:2px solid #f4e38c;border-bottom-color:#a38f28;border-right-color:#a38f28;padding:4px 8px;text-decoration:none;margin:0 2px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;border-radius:0;box-sizing:border-box}.retro-btn:active{border:2px solid #a38f28;border-bottom-color:#f4e38c;border-right-color:#f4e38c}#game-over-seed{font-size:1rem}#game-over-actions .retro-btn{font-size:.85rem;padding:2px 5px}#scoreboard{background:rgba(0,0,0,.6);padding:15px;border-radius:10px;width:100%;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column}#score-list{list-style-position:inside;padding:0;margin:0;text-align:left;display:flex;flex-direction:column;max-height:220px;overflow-y:auto}#score-list li{padding:4px 5px;border-bottom:1px solid rgba(255,255,255,.2);font-size:.9rem}#score-list li.highlight{background:rgba(224,200,76,.3);font-weight:700;color:#e0c84c}