/* SwipeAnime games (Anime Match, Daily, Wrapped, Tier list, Play hub, Quiz extras) */
.g-main{padding:104px 0 70px;min-height:72vh}
.g-hero{text-align:center;margin:0 auto 1.6rem;max-width:720px;padding:0 1rem}
.g-hero h1{font-family:'Cinzel Decorative',serif;font-size:clamp(2rem,6vw,3.4rem);line-height:1.1;margin:.4rem 0}
.g-hero h1 em{font-style:normal;color:#e0443a}
.g-hero p{color:rgba(240,239,240,.72);font-size:1.05rem}
.g-panel{max-width:620px;margin:0 auto;padding:1.5rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.g-panel[hidden]{display:none}
.g-field{display:grid;gap:.4rem;margin:0 0 1rem;text-align:left}
.g-field label{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,239,240,.6)}
.g-input{width:100%;padding:.85rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(7,10,16,.8);color:#f0eff0;font:inherit;font-size:1rem}
.g-input:focus{outline:2px solid #d4a017;outline-offset:1px}
.g-row{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.g-center{text-align:center}
.g-note{font-size:.82rem;color:rgba(240,239,240,.55);margin-top:1rem}
.shake{animation:gShake .4s}
@keyframes gShake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ---------- Match ---------- */
.m-progress{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;max-width:340px;margin:0 auto .5rem}
.m-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff8fb8,#f5d36b);transition:width .3s}
#m-count{text-align:center;color:rgba(240,239,240,.6);font-size:.9rem;margin-bottom:.8rem}
.m-stack{position:relative;width:min(320px,86vw);aspect-ratio:300/430;margin:0 auto;touch-action:pan-y;user-select:none}
.m-card{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#111;box-shadow:0 20px 50px rgba(0,0,0,.55);transition:transform .24s ease,opacity .24s;cursor:grab;touch-action:pan-y}
.m-card:active{cursor:grabbing}
.m-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.m-card.out-r{transform:translateX(130%) rotate(18deg);opacity:0}
.m-card.out-l{transform:translateX(-130%) rotate(-18deg);opacity:0}
.m-ov{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1rem 1rem;background:linear-gradient(transparent,rgba(5,6,10,.95));pointer-events:none}
.m-ov h2{font-size:1.2rem;line-height:1.2;margin:0 0 .25rem;font-family:Cinzel,serif}
.m-ov p{margin:0;font-size:.85rem;color:rgba(240,239,240,.75)}
.m-stamp{position:absolute;top:22px;font:900 2.6rem sans-serif;padding:.1rem .6rem;border:4px solid;border-radius:12px;opacity:0;transform:rotate(-12deg);pointer-events:none}
.m-yes{left:18px;color:#7bd88f;border-color:#7bd88f}
.m-no{right:18px;color:#ff5a5a;border-color:#ff5a5a;transform:rotate(12deg)}
.m-actions{display:flex;gap:1.6rem;justify-content:center;margin-top:1.1rem}
.m-btn{width:68px;height:68px;border-radius:50%;border:2px solid;background:rgba(7,10,16,.85);font-size:1.8rem;cursor:pointer;transition:transform .15s}
.m-btn:hover{transform:scale(1.1)}
.m-btn.no{color:#ff5a5a;border-color:#ff5a5a}.m-btn.yes{color:#ff8fb8;border-color:#ff8fb8}
.m-hint{text-align:center;font-size:.8rem;color:rgba(240,239,240,.45);margin-top:.8rem}
.m-link{display:flex;gap:.5rem}.m-link .g-input{font-size:.85rem}
.m-yourlikes{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:1rem 0}
.m-yourlikes img{width:60px;height:85px;object-fit:cover;border-radius:8px}
.m-ringwrap{display:grid;place-items:center;margin:.5rem 0 1rem}
.m-ring{--p:0;width:210px;height:210px;border-radius:50%;background:conic-gradient(#ff8fb8 calc(var(--p)*1%),rgba(255,255,255,.1) 0);display:grid;place-items:center;position:relative}
.m-ring::before{content:"";position:absolute;inset:16px;border-radius:50%;background:#0b0d14}
.m-ring b{position:relative;font:900 3rem 'Cinzel Decorative',serif;color:#f0eff0}
#m-vs{font:700 1.15rem Cinzel,serif;color:#f5d36b;margin:.2rem 0}
#m-tag{font-size:1.2rem;font-weight:600;margin-bottom:.3rem}
.m-chips{display:grid;gap:.5rem;margin:.8rem 0}
.m-chip{display:flex;align-items:center;gap:.7rem;padding:.4rem .6rem;border-radius:12px;background:rgba(255,255,255,.05);text-decoration:none;color:#f0eff0}
.m-chip img{width:48px;height:68px;object-fit:cover;border-radius:6px}

/* ---------- Daily ---------- */
.d-cover{position:relative;width:min(280px,70vw);aspect-ratio:300/430;margin:0 auto 1rem;border-radius:18px;overflow:hidden;background:#111;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.d-cover img{width:100%;height:100%;object-fit:cover;transition:filter .7s ease,transform .7s ease}
.d-meta{display:flex;justify-content:space-between;max-width:420px;margin:0 auto .6rem;font-size:.85rem;color:rgba(240,239,240,.65)}
.d-clues{list-style:none;padding:0;margin:.6rem 0 1rem;display:grid;gap:.4rem}
.d-clues li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .8rem;border-radius:10px;font-size:.95rem}
.d-clues .open{background:rgba(245,211,107,.1);border:1px solid rgba(245,211,107,.3)}
.d-clues .lock{background:rgba(255,255,255,.04);color:rgba(240,239,240,.4)}
.d-clues span{color:rgba(240,239,240,.65);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;align-self:center}
.d-search{position:relative}
.d-list{position:absolute;left:0;right:0;top:100%;margin:.2rem 0 0;padding:.3rem;list-style:none;background:#10131c;border:1px solid rgba(255,255,255,.18);border-radius:12px;z-index:20;max-height:260px;overflow:auto;text-align:left}
.d-list[hidden]{display:none}
.d-list li{padding:.55rem .7rem;border-radius:8px;cursor:pointer}.d-list li:hover{background:rgba(245,211,107,.14)}
#d-guesses{list-style:none;padding:0;margin:.6rem 0;display:grid;gap:.3rem}
#d-guesses li{padding:.4rem .7rem;border-radius:8px;background:rgba(255,255,255,.05)}
#d-guesses .ok{background:rgba(123,216,143,.15)}#d-guesses .bad{opacity:.85}
.d-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:1rem 0}
.d-stats div{padding:.6rem .2rem;border-radius:12px;background:rgba(255,255,255,.05);text-align:center}
.d-stats b{display:block;font:900 1.5rem 'Cinzel Decorative',serif;color:#f5d36b}.d-stats span{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,239,240,.6)}
#d-end-name a{color:#f5d36b;font-weight:700}

/* ---------- Wrapped ---------- */
.w-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0}
.w-stats div{text-align:center;padding:.8rem .3rem;border-radius:14px;background:rgba(255,255,255,.05)}
.w-stats b{display:block;font:900 1.9rem 'Cinzel Decorative',serif;color:#f5d36b}.w-stats span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,239,240,.6)}
.w-bar{display:grid;grid-template-columns:110px 1fr 46px;gap:.6rem;align-items:center;margin:.55rem 0}
.w-bar>div{height:12px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}.w-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff8fb8,#f5d36b);border-radius:99px}
.w-bar b{text-align:right;color:#f5d36b}
#w-headline{font:900 clamp(1.5rem,5vw,2.2rem)/1.2 'Cinzel Decorative',serif;text-align:center;margin:.3rem 0 .6rem}
#w-best{display:flex;gap:1rem;align-items:center;margin-top:1rem}#w-best img{border-radius:10px;object-fit:cover}#w-best span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,239,240,.6);display:block}#w-best strong{font-size:1.1rem}
#w-source{text-align:center;font-size:.8rem;color:rgba(240,239,240,.5)}

/* ---------- Tier list ---------- */
.tl-wrap{max-width:980px;margin:0 auto;padding:0 1rem}
.tl-top{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}.tl-top .g-input{flex:1;min-width:200px}
.tl-row{display:flex;margin-bottom:6px;border-radius:10px;overflow:hidden;background:#151824;min-height:118px}
.tl-label{flex:0 0 72px;display:grid;place-items:center;font:900 2.2rem sans-serif;color:#0b0d14}
.tl-drop{flex:1;display:flex;flex-wrap:wrap;gap:6px;padding:6px;align-content:flex-start;min-height:118px}
.tl-drop.over,#tl-pool.over{outline:2px dashed #f5d36b;outline-offset:-4px;background:rgba(245,211,107,.07)}
.tl-item{width:76px;height:108px;border-radius:6px;overflow:hidden;cursor:grab;touch-action:none;flex:0 0 auto;background:#111}
.tl-item img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.tl-item.sel{outline:3px solid #f5d36b;transform:scale(1.04)}
.tl-item.dragging{opacity:.3}
.tl-ghost{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-50%) rotate(6deg) scale(1.1);box-shadow:0 12px 30px rgba(0,0,0,.6);opacity:.95}
#tl-pool{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:12px;background:rgba(255,255,255,.04);min-height:130px;max-height:430px;overflow:auto;margin-top:.6rem}
.tl-empty{color:rgba(240,239,240,.5);padding:1rem}
#tl-count{font-size:.85rem;color:rgba(240,239,240,.6);align-self:center}

/* ---------- Play hub ---------- */
.p-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;max-width:980px;margin:0 auto;padding:0 1rem}
.p-card{display:block;padding:1.4rem;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);text-decoration:none;color:#f0eff0;transition:transform .2s,border-color .2s}
.p-card:hover{transform:translateY(-4px);border-color:#d4a017}
.p-card .e{font-size:2.2rem}.p-card h2{font:700 1.3rem Cinzel,serif;margin:.4rem 0}.p-card p{margin:0;color:rgba(240,239,240,.7);font-size:.95rem}
.p-card .tag{display:inline-block;margin-top:.7rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#f5d36b}

/* ---------- Quiz extras ---------- */
#personality-canvas{width:min(340px,86vw);height:auto;aspect-ratio:1080/1920;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.qz-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.qz-perma{max-width:560px;margin:0 auto;text-align:center}
.qz-perma .emoji{font-size:5rem}.qz-perma h1{font:900 clamp(1.8rem,6vw,2.8rem)/1.15 'Cinzel Decorative',serif;margin:.3rem 0}
.qz-perma .arch{color:#f5d36b;font:italic 600 1.2rem serif}.qz-perma p.desc{color:rgba(240,239,240,.85);margin:1rem 0}

@media(max-width:560px){.w-bar{grid-template-columns:84px 1fr 40px}.tl-label{flex-basis:56px;font-size:1.7rem}.tl-item{width:62px;height:88px}.d-stats{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.m-card,.d-cover img,.shake{transition:none;animation:none}}

/* ---------- compact cookie banner on phones ---------- */
@media(max-width:640px){
  .cookie-banner{left:8px!important;right:8px!important;bottom:8px!important;padding:.55rem .7rem!important;border-radius:12px!important}
  .cookie-content{display:flex!important;flex-direction:row!important;align-items:center;gap:.6rem!important}
  .cookie-icon{display:none!important}
  .cookie-content p{font-size:.7rem!important;line-height:1.3!important;margin:0!important}
  .cookie-actions{display:flex!important;flex-direction:column;gap:.3rem!important}
  .cookie-actions button{padding:.35rem .7rem!important;font-size:.7rem!important}
}

/* quiz sections: the [hidden] attribute must win over the page layout rules */
.personality-hero[hidden],.personality-quiz-section[hidden],.personality-result-section[hidden],.g-panel[hidden],#m-deck[hidden]{display:none!important}