/* 4D ME — THE MEMORY ARCADE */
:root{--arc-bg:#fffdf9;--arc-ink:#27263b;--arc-text:#707180;--arc-border:#e9dece;--arc-shadow:0 13px 36px #66523f10;--arc-gold:#f3cb76;--arc-purple:#8b77dd}
:root[data-theme=white]{--arc-bg:#fff;--arc-ink:#24293b;--arc-text:#6d7483;--arc-border:#e5e6f0;--arc-shadow:0 13px 36px #525f890e}
:root[data-theme=dark]{--arc-bg:#171b2b;--arc-ink:#f5efff;--arc-text:#b1aecb;--arc-border:#383950;--arc-shadow:0 13px 36px #0005}
.coin-pill{display:flex;align-items:center;gap:7px;border-radius:100px;background:#fff2cf;border:1px solid #e7cb8e;padding:6px 12px;color:#785318;font-size:12px;font-weight:900;white-space:nowrap;box-shadow:0 5px 14px #b9964036}
.coin-symbol{display:grid;place-items:center;border-radius:50%;height:22px;width:22px;background:linear-gradient(145deg,#ffe6a0,#dba749);border:1px solid #b98736;color:#96621c;font-size:11px;box-shadow:inset 0 1px 2px white}
:root[data-theme=dark] .coin-pill{background:#332a20;color:#ffd68c;border-color:#8a6734}
.arcade-teaser{margin:20px 0 27px;border:1px solid var(--arc-border);border-radius:22px;background:linear-gradient(112deg,#fff5dc,#f8f1fc 65%,#ecf8f3);display:flex;align-items:center;gap:24px;padding:20px 25px;min-height:150px;overflow:hidden;box-shadow:var(--arc-shadow)}
.arcade-teaser-art{position:relative;width:122px;height:105px;flex:none}
.teaser-coin{position:absolute;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,#ffe9a1,#e9b85c);border:5px solid #ffd877;box-shadow:0 8px 20px #af8b4552,inset 0 2px 4px #fff7d5;color:#9d742c;font:900 19px 'Space Grotesk',sans-serif}
.coin-one{top:15px;left:3px;transform:rotate(-18deg);animation:coinFloat 3s ease-in-out infinite}
.coin-two{top:0;left:49px;width:62px;height:62px;transform:rotate(19deg);animation:coinFloat 3.4s ease-in-out infinite reverse}
.teaser-star{position:absolute;right:-4px;bottom:8px;font-size:32px;color:#9c8bed;animation:starPulse 2s ease-in-out infinite}
@keyframes coinFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes starPulse{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.1)}}
.arcade-teaser-copy{flex:1}.arcade-teaser h2{color:#302b45;font:700 25px 'Space Grotesk',sans-serif;letter-spacing:-.8px;margin:5px 0}
.arcade-teaser p{color:#726b78;font-size:12px;margin:0}
.teaser-facts{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.teaser-facts span{font-size:10px;color:#8a6e56;font-weight:800;border-radius:100px;border:1px solid #ead8bd;padding:5px 10px;background:#fff9ebce}
.arcade-teaser>.btn{white-space:nowrap}
.arcade-video-teaser{margin:45px 0}
.arcade-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.arcade-video-card{border:1px solid var(--arc-border);background:var(--arc-bg);border-radius:18px;padding:9px;box-shadow:var(--arc-shadow);overflow:hidden}
.video-frame{position:relative;overflow:hidden;border-radius:12px;background:#f1e8fb;height:225px;display:grid;place-items:center}
.video-frame video{display:block;width:100%;height:100%;object-fit:contain;background:radial-gradient(circle,#e7dcf8,#fffbf3)}
.video-duration{position:absolute;right:10px;top:10px;border-radius:100px;background:#ffffffd9;color:#69548e;font-size:9px;font-weight:900;letter-spacing:.8px;padding:6px 10px;pointer-events:none}
.video-details{display:flex;flex-direction:column;gap:3px;padding:12px 9px 7px}.video-details b{color:var(--arc-ink);font-size:13px}.video-details span{color:var(--arc-text);font-size:11px}.video-disclaimer{color:var(--arc-text);font-size:10px;line-height:1.5}
.arcade-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}
.arcade-heading h1{font:700 clamp(33px,4vw,47px)/1.12 'Space Grotesk',sans-serif;letter-spacing:-1.8px;margin:12px 0;color:var(--arc-ink)}
.arcade-heading h1 em{font-style:normal;background:linear-gradient(110deg,#b68a31,#7f69d5,#258e8b);background-clip:text;color:transparent}
.arcade-heading p{font-size:13px;color:var(--arc-text);line-height:1.5;max-width:580px}
.arcade-balance{display:flex;align-items:center;gap:12px;background:var(--arc-bg);border:1px solid var(--arc-border);padding:14px 20px;border-radius:19px;box-shadow:var(--arc-shadow);flex:none}
.arcade-balance .coin-shine{width:53px;height:53px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#fff3c8,#f4d483 40%,#d9a14a 98%);border:3px solid #e9bd62;box-shadow:inset 0 2px 5px #fff4d7,0 7px 18px #bc913e55;color:#b07923;font-size:28px;animation:coinFloat 3.5s ease-in-out infinite}
.arcade-balance small{display:block;font-size:10px;font-weight:900;letter-spacing:1.6px;color:var(--arc-text)}.arcade-balance b{display:block;font:700 34px 'Space Grotesk',sans-serif;color:var(--arc-ink);line-height:1.15}
.arcade-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px}
.arcade-wheel-card,.arcade-memory-card,.arcade-achievements,.arcade-quest-card{background:var(--arc-bg);border:1px solid var(--arc-border);border-radius:24px;padding:22px;box-shadow:var(--arc-shadow);min-width:0}
.arcade-header{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}.reward-pill{font-size:9px;font-weight:900;letter-spacing:.7px;border:1px solid #e9d6ae;background:#fff4d6;color:#8d682e;border-radius:100px;padding:7px 11px}.reward-pill.purple{background:#f1ebff;border-color:#e5d7fa;color:#745fbc}.reward-pill.sage{background:#ecf9f1;border-color:#cae8dd;color:#2a907c}
.arcade-wheel-card h2,.arcade-memory-card h2,.arcade-achievements h2,.arcade-quest-card h2{font:700 24px 'Space Grotesk',sans-serif;letter-spacing:-.7px;color:var(--arc-ink);margin:15px 0 5px}
.arcade-wheel-card>p,.arcade-memory-card>p,.arcade-achievements>p,.arcade-quest-card>p{font-size:12px;line-height:1.65;color:var(--arc-text);margin:0}
.wheel-stage{position:relative;margin:26px auto 18px;width:min(100%,335px);aspect-ratio:1;display:grid;place-items:center}
.reward-wheel{width:100%;height:100%;border-radius:50%;background:conic-gradient(from -30deg,#fce1a3 0deg 60deg,#cfb5ff 60deg 120deg,#bbeee0 120deg 180deg,#f8cbd6 180deg 240deg,#f7cb85 240deg 300deg,#abcfed 300deg 360deg);border:10px solid #fff8e9;box-shadow:0 8px 34px #7a6a6a30,0 0 0 3px #e6c783,inset 0 0 0 2px #ffffee;position:relative;transform:rotate(0deg);transition:transform 5s cubic-bezier(.12,.7,.12,1)}
.wheel-pointer{position:absolute;top:-23px;left:50%;transform:translateX(-50%);color:#9672cc;font-size:40px;z-index:7;text-shadow:0 3px 4px #3c315b33}
.wheel-hub{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:linear-gradient(145deg,#fff5de,#eab95f);border:6px solid #fff8dd;border-radius:50%;height:78px;width:78px;color:#977337;font:900 23px 'Space Grotesk',sans-serif;box-shadow:0 7px 24px #a3814555}
.prize-label{position:absolute;inset:0;display:flex;align-items:center;flex-direction:column;justify-content:flex-start;padding-top:12%;transform:rotate(var(--prize-angle));pointer-events:none;color:#423b4e;text-shadow:0 1px 3px #fff7}.prize-label b{font-size:23px;font-weight:900}.prize-label small{font-size:19px;color:#ffffffba;line-height:1.1}
.big-spin{width:100%;max-width:335px;display:flex;margin:16px auto 12px;padding:16px;font-size:15px;border-radius:14px}.big-spin:disabled{opacity:.65;cursor:not-allowed}
.spin-feedback{min-height:32px;text-align:center;font-size:12px;font-weight:800;color:#8d65bc}
.wheel-disclaimer{margin-top:11px;font-size:10px;color:var(--arc-text);text-align:center;line-height:1.5}
.game-score{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0 15px}.game-score>div{text-align:center;border:1px solid var(--arc-border);background:var(--show-ground,#fcf6ef);border-radius:12px;padding:12px 6px}.game-score span{font-size:9px;font-weight:800;color:var(--arc-text);letter-spacing:.8px;display:block}.game-score b{font-size:19px;color:var(--arc-ink)}
.match-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-height:248px}
.match-ready{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--arc-text);border:1px dashed var(--arc-border);border-radius:16px;background:linear-gradient(135deg,#f8f2ff,#f9f3e5);text-align:center;padding:18px}
.match-ready span{font-size:48px;color:#8a77d7}.match-ready b{color:#514563;font-size:13px}.match-ready small{font-size:11px}
.match-tile{height:74px;min-width:0;position:relative;border:0;padding:0;background:transparent;perspective:480px;border-radius:13px}
.match-tile-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .4s;box-shadow:0 6px 16px #71608717;border-radius:13px}
.match-tile.revealed .match-tile-inner,.match-tile.matched .match-tile-inner{transform:rotateY(180deg)}
.match-tile .tile-back,.match-tile .tile-front{position:absolute;inset:0;display:grid;place-items:center;border-radius:13px;backface-visibility:hidden}
.tile-back{background:linear-gradient(130deg,#baadf2,#8a78df);border:2px solid #e9e3ff;color:#f7eaff;font-size:30px;font-weight:800}.tile-front{transform:rotateY(180deg);background:#fffbf2;border:1px solid #e6d8bd;color:#8873bf;font-size:31px}.match-tile.matched .tile-front{background:#d9f6e9;border-color:#a4d7c8;color:#278b78}.match-tile:disabled{cursor:default}
.arcade-memory-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.arcade-memory-actions .btn{flex:1;min-width:132px}
.game-footnote{font-size:11px;color:var(--arc-text);line-height:1.5;min-height:35px;margin-top:13px}
.arcade-second-row{display:grid;grid-template-columns:1fr 1fr;gap:19px;margin-top:19px}
.progress-meta{display:flex;justify-content:space-between;align-items:center;margin:19px 0 9px;color:var(--arc-ink);font-size:12px}.progress-meta span{font-size:10px;color:var(--arc-text);font-weight:900}
.level-track{height:10px;border-radius:20px;background:#f1eade;overflow:hidden;border:1px solid #e8dccb}.level-track>div{height:100%;background:linear-gradient(90deg,#e5b760,#8370d9);width:0;transition:width 1s}
.badge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.quest-badge{text-align:center;border:1px solid var(--arc-border);padding:13px 5px;background:var(--show-ground,#faf4ec);border-radius:15px;opacity:.5;filter:saturate(.6)}.quest-badge.unlocked{opacity:1;filter:none;background:linear-gradient(135deg,#fef2d1,#fffaf1)}
.quest-badge span{height:43px;width:43px;border-radius:50%;display:grid;place-items:center;background:#e9ddc5;border:2px solid #eed6a1;font-size:23px;color:#a17c3d;margin:0 auto 6px}.quest-badge.unlocked span{background:linear-gradient(145deg,#ffe3a2,#ebb458);box-shadow:0 4px 16px #d3a54d38}
.quest-badge b{font-size:9px;display:block;color:var(--arc-ink)}.quest-badge small{display:block;color:var(--arc-text);font-size:9px;margin-top:3px}
.quest-graphic{height:190px;position:relative;display:flex;align-items:center;justify-content:center;margin:10px 0}
.quest-bubble{height:137px;width:112px;position:absolute;border:4px solid #fffaf4;border-radius:17px;box-shadow:0 13px 33px #5a4e6e29;overflow:hidden}.quest-bubble img{width:100%;height:100%;object-fit:cover}.qb1{left:20%;transform:rotate(-11deg)}.qb2{left:43%;z-index:2;transform:rotate(4deg) translateY(-16px)}.qb3{left:65%;transform:rotate(13deg)}
.quest-star{position:absolute;font-size:36px;top:0;right:18%;color:#aa88d9}.arcade-info{margin:20px 0;padding:15px 18px;border:1px solid var(--arc-border);background:var(--arc-bg);border-radius:13px;color:var(--arc-text);font-size:11px;line-height:1.6}.arcade-info>span{font-weight:900;color:#927bd0;letter-spacing:1.5px;margin-right:7px}
:root[data-theme=dark] .arcade-teaser{background:linear-gradient(110deg,#423123,#30243f,#173638)}
:root[data-theme=dark] .arcade-teaser h2{color:#f7f0ff}:root[data-theme=dark] .arcade-teaser p{color:#c1b9d0}
:root[data-theme=dark] .teaser-facts span{background:#302a3e;color:#d6b28d;border-color:#56495d}
:root[data-theme=dark] .match-ready{background:linear-gradient(135deg,#27213e,#2a2433)}
:root[data-theme=dark] .match-ready b{color:#ebe3ff}
:root[data-theme=dark] .game-score>div{background:#1d2236}
:root[data-theme=dark] .quest-badge.unlocked{background:#3e342b}
:root[data-theme=dark] .level-track{background:#2a2a39;border-color:#524658}
:root[data-theme=dark] .tile-front{background:#262139;border-color:#544660;color:#e5cffa}
:root[data-theme=dark] .match-tile.matched .tile-front{background:#224238;color:#aeedda}
@media(max-width:980px){.arcade-feature-grid,.arcade-second-row{grid-template-columns:1fr 1fr;gap:12px}.arcade-wheel-card,.arcade-memory-card,.arcade-achievements,.arcade-quest-card{padding:16px}.wheel-stage{width:min(100%,285px)}.badge-grid{grid-template-columns:repeat(2,1fr)}.video-frame{height:180px}}
@media(max-width:780px){.coin-pill{font-size:11px;padding:5px 9px}.top-actions{gap:7px}.status-pill{display:none}.arcade-feature-grid,.arcade-second-row{grid-template-columns:1fr}.arcade-wheel-card,.arcade-memory-card,.arcade-achievements,.arcade-quest-card{padding:20px}.badge-grid{grid-template-columns:repeat(4,1fr)}.arcade-teaser{padding:16px;gap:13px}.arcade-teaser-art{width:72px;height:88px}.teaser-coin{width:54px;height:54px;border-width:3px;font-size:15px}.coin-two{width:47px;height:47px;left:30px}.teaser-star{display:none}.arcade-teaser h2{font-size:19px}.arcade-teaser>.btn{font-size:11px;padding:10px}.video-frame{height:150px}.wheel-stage{width:min(100%,330px)}}
@media(max-width:560px){.arcade-teaser{display:grid;grid-template-columns:65px 1fr}.arcade-teaser-art{grid-row:1/3}.arcade-teaser>.btn{grid-column:2;justify-self:start}.arcade-videos{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.arcade-video-card{padding:5px;border-radius:12px}.video-frame{height:128px;border-radius:9px}.video-duration{font-size:7px;top:4px;right:4px;padding:3px}.video-details{padding:7px 3px}.video-details b{font-size:9px}.video-details span{font-size:8px;line-height:1.4}.arcade-heading{align-items:start}.arcade-heading h1{font-size:29px}.arcade-balance{padding:8px;gap:5px;border-radius:12px}.arcade-balance .coin-shine{width:33px;height:33px;font-size:18px;border-width:2px}.arcade-balance b{font-size:21px}.arcade-balance small{font-size:7px;letter-spacing:.4px}.arcade-header .eyebrow{font-size:9px}.reward-pill{font-size:8px}.wheel-stage{width:min(100%,305px)}.badge-grid{gap:6px}.quest-badge span{width:37px;height:37px}.quest-badge b{font-size:8px}.quest-graphic{height:170px}.quest-bubble{height:114px;width:95px}.qb1{left:13%}.qb2{left:36%}.qb3{left:62%}}
@media(prefers-reduced-motion:reduce){.coin-one,.coin-two,.teaser-star,.arcade-balance .coin-shine{animation:none}.reward-wheel{transition-duration:.2s}}
