/* ===== Gem theme: the rounded, chunky low-poly button style used across the app (loaded last) ===== */
:root{--g-r:14px;--g-press:translateY(3px)}
/* a gem button: gradient face (--g1 to --g2), lighter rim (--g3), darker base edge (--g4) */
.go,.next,.ghost,.qk,.treelink,.examcard,.social,.hud-links button,.subj-chip,.tour-chip,.join-card .go,.len,.chip,.ans,.subj,.gp-word,.gp-area,.guest-btn,.fc-nav button{border-radius:var(--g-r);transition:transform .12s ease,box-shadow .15s ease,filter .15s}
.go,.next,.qk,.treelink,.examcard,.ghost,.hud-links button,.subj-chip,.tour-chip{background:linear-gradient(180deg,var(--g1),var(--g2));color:var(--gt,#fff);border:0;box-shadow:inset 0 0 0 2px var(--g3),inset 0 3px 0 rgba(255,255,255,.18),0 5px 0 var(--g4),0 9px 16px rgba(0,0,0,.25);text-shadow:0 2px 0 rgba(0,0,0,.22)}
.go:hover:not(:disabled),.next:hover,.qk:hover,.treelink:hover,.examcard:hover,.ghost:hover,.hud-links button:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:inset 0 0 0 2px var(--g3),inset 0 3px 0 rgba(255,255,255,.18),0 7px 0 var(--g4),0 12px 20px rgba(0,0,0,.28);background:linear-gradient(180deg,var(--g1),var(--g2))}
.go:active:not(:disabled),.next:active,.qk:active,.treelink:active,.examcard:active,.ghost:active,.hud-links button:active{transform:var(--g-press);box-shadow:inset 0 0 0 2px var(--g3),0 2px 0 var(--g4)}
/* colours */
.go,.next{--g1:#3D9BFF;--g2:#1463E0;--g3:#7CC0FF;--g4:#0A3F99}
.ghost,.hud-links button{--g1:#33405F;--g2:#1E2740;--g3:#5A6B99;--g4:#0F1526}
/* quick buttons */
.qk.qk-teach{--g1:#8B5CF6;--g2:#5B21B6;--g3:#B79CFF;--g4:#3B1480}
.qk.qk-earn{--g1:#FFD84A;--g2:#F0A000;--g3:#FFEFA0;--g4:#A86A00;--gt:#2B1D00;text-shadow:none}
.qk.qk-join{--g1:#22D3B6;--g2:#0E8F85;--g3:#7FF0DC;--g4:#075E58}
.qk.qk-lb{--g1:#3D9BFF;--g2:#1463E0;--g3:#7CC0FF;--g4:#0A3F99}
.qk.qk-cls{--g1:#FF5FA2;--g2:#C81E6A;--g3:#FFA6CC;--g4:#84103F}
.qk{--g1:#33405F;--g2:#1E2740;--g3:#5A6B99;--g4:#0F1526}
.qk small,.qk-teach small,.qk-earn small{color:inherit;opacity:.85}
.qk svg,.qk-join svg,.qk-cls svg,.qk-trade svg,.hud-links button svg{color:currentColor}
.qk{min-height:64px;padding:10px 12px}
.treelink{--g1:#33405F;--g2:#1E2740;--g3:#FFD23F;--g4:#0F1526;padding:16px}
.examcard{--g1:#6A4BFF;--g2:#3B1FC4;--g3:#A794FF;--g4:#23107A;padding:16px}
.examcard:hover{transform:translateY(-2px)}
.subj-chip{--g1:#3D9BFF;--g2:#1463E0;--g3:#7CC0FF;--g4:#0A3F99;padding:8px 14px;border-radius:10px;box-shadow:inset 0 0 0 2px var(--g3),0 3px 0 var(--g4);color:#fff}
.tour-chip{--g1:#33405F;--g2:#1E2740;--g3:#5A6B99;--g4:#0F1526;border-radius:10px;box-shadow:inset 0 0 0 2px var(--g3),0 3px 0 var(--g4)}
.hud-links button{box-shadow:inset 0 0 0 2px var(--g3),0 3px 0 var(--g4);border-radius:11px;text-shadow:none;color:#fff}
.hud-links .hl-out{--g1:#E5484D;--g2:#B4232A;--g3:#FF9A9E;--g4:#7A1217;box-shadow:inset 0 0 0 2px var(--g3),0 3px 0 var(--g4)}
.hud-links .hl-out svg{color:#fff}
.go:disabled{filter:saturate(.3);opacity:.5}
/* quieter, pick-one buttons: topics, lengths, answers, subjects, sign-in */
.len,.chip,.ans,.subj,.social{background:linear-gradient(180deg,#2A3048,#1F2437);color:#fff;border:0;box-shadow:inset 0 0 0 2px #46507A,0 4px 0 #11152300,0 4px 0 #111523}
.len:active,.chip:active,.ans:active:not(:disabled),.subj:active,.social:active{transform:var(--g-press);box-shadow:inset 0 0 0 2px #46507A,0 1px 0 #111523}
.len[aria-pressed="true"],.chip[aria-pressed="true"],.chip.on,.subj[aria-pressed="true"],.subj.sel{background:linear-gradient(180deg,#3D9BFF,#1463E0);box-shadow:inset 0 0 0 2px #9CD0FF,0 4px 0 #0A3F99;color:#fff}
.chip .n,.chip small{color:inherit;opacity:.8}
.ans{padding:11px 14px 11px 11px;min-height:64px}
.ans .k{border-radius:10px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.ans.right{background:linear-gradient(180deg,#34D17A,#17994F);box-shadow:inset 0 0 0 2px #8BF0B5,0 4px 0 #0B5A2E;color:#fff}
.ans.wrong{background:linear-gradient(180deg,#F0646A,#C22B32);box-shadow:inset 0 0 0 2px #FFB0B3,0 4px 0 #7A1217;color:#fff;opacity:1}
/* cards and inputs: rounded, soft edge, no hard offset shadows */
.card,.hud,.placecard,.join-card,.tile,.auth-card,.savebox,.bankbar,.pastrep .chip{border-radius:16px}
.hud,.placecard,.auth-card{border:0;box-shadow:inset 0 0 0 2px #46507A,0 6px 0 #111523,0 12px 22px rgba(0,0,0,.28);overflow:hidden;background:linear-gradient(180deg,#232840,#1B2033);color:#fff}
.hud-top{border-bottom:2px solid #46507A}
.card,.join-card,.tile{background:linear-gradient(180deg,#232840,#1B2033);box-shadow:inset 0 0 0 2px #3A4468;color:#fff}
.field{border-radius:12px;border:2px solid #46507A;background:#141829;color:#fff}
.field:focus{outline:0;border-color:#7CC0FF;box-shadow:0 0 0 3px rgba(61,155,255,.3)}
.pill{border-radius:8px;padding:3px 10px}
.guest-btn{border:0;background:linear-gradient(180deg,#FFD84A,#F0A000);box-shadow:inset 0 0 0 2px #FFEFA0,0 5px 0 #A86A00}
.guest-btn:active{transform:var(--g-press);box-shadow:inset 0 0 0 2px #FFEFA0,0 2px 0 #A86A00}
.gp-word,.gp-area{border:0;background:linear-gradient(180deg,#2A3048,#1F2437);color:#fff;box-shadow:inset 0 0 0 2px #46507A,0 4px 0 #111523}
.gp-area:first-child{background:linear-gradient(180deg,#34D17A,#17994F);box-shadow:inset 0 0 0 2px #8BF0B5,0 4px 0 #0B5A2E}
.gp-slot{border-radius:10px}
.rank,.hud-av,.lvl-badge{border-radius:10px}
/* light mode keeps the same gems but lighter quiet buttons and cards */
:root[data-theme="light"] .len,:root[data-theme="light"] .chip,:root[data-theme="light"] .ans,:root[data-theme="light"] .subj,:root[data-theme="light"] .social,:root[data-theme="light"] .gp-word,:root[data-theme="light"] .gp-area:not(:first-child){background:linear-gradient(180deg,#fff,#EEF2F8);color:#16161A;box-shadow:inset 0 0 0 2px #B9C4DA,0 4px 0 #8794B0}
:root[data-theme="light"] .len[aria-pressed="true"],:root[data-theme="light"] .chip[aria-pressed="true"],:root[data-theme="light"] .subj[aria-pressed="true"]{background:linear-gradient(180deg,#3D9BFF,#1463E0);color:#fff;box-shadow:inset 0 0 0 2px #9CD0FF,0 4px 0 #0A3F99}
:root[data-theme="light"] .ans.right,:root[data-theme="light"] .ans.wrong{color:#fff}
:root[data-theme="light"] .card,:root[data-theme="light"] .join-card,:root[data-theme="light"] .tile,:root[data-theme="light"] .hud,:root[data-theme="light"] .placecard,:root[data-theme="light"] .auth-card{background:linear-gradient(180deg,#fff,#F1F4FA);color:#16161A;box-shadow:inset 0 0 0 2px #B9C4DA,0 6px 0 #8794B0}
:root[data-theme="light"] .field{background:#fff;color:#16161A;border-color:#B9C4DA}
html.rm .go,html.rm .next,html.rm .ghost,html.rm .qk,html.rm .len,html.rm .chip,html.rm .ans{transition:none}

.qk.qk-earn b,.qk.qk-earn small,.qk.qk-earn svg{color:#2B1D00;text-shadow:none}
.hud-toggle{border-radius:12px;border:0;box-shadow:inset 0 0 0 2px #46507A,0 3px 0 #111523;background:linear-gradient(180deg,#2A3048,#1F2437)}
.pf-bar,.hud .pf-bar,.pbar .tr,.track{border-radius:8px;overflow:hidden}
.fbk,.feedback,#feedback,.explainbox,.why{border-radius:14px}

/* ---- character: wardrobe locks, outfits, first pick ---- */
.ch-opts.wrap{flex-wrap:wrap;overflow:visible}
.ch-opts .mp-slot{display:inline-flex;align-items:center;gap:6px}
.ch-opts .mp-slot small{font-size:11px;font-weight:800;opacity:.9}
.ch-opts .mp-slot.lock{opacity:.6;border-style:dashed}
.ch-rand{width:auto;min-height:44px;padding:8px 16px;margin:0 0 6px}
.ch-outfits{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ch-outfit{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,#313a63,#232a4a);color:#fff;box-shadow:0 4px 0 #161a30;text-align:left;min-height:0}
.ch-outfit i{width:100%;height:10px;border-radius:6px;margin-bottom:4px}
.ch-outfit b{font-family:'Barlow Condensed',sans-serif;font-size:18px;text-transform:uppercase;line-height:1}
.ch-outfit small{font-size:11px;opacity:.85}
.ch-outfit.lock{box-shadow:none;border-style:dashed}
.ch-outfit.lock b,.ch-outfit.lock i{opacity:.6}
.ch-pcs{display:flex;flex-direction:column;gap:1px;margin:3px 0;width:100%}
.ch-pcs em{font-style:normal;font-size:12px;line-height:1.25;opacity:.6}
.ch-pcs em.got{opacity:1;color:#8CF0A8;font-weight:700}
.ch-outfit.done{border-color:#8CF0A8}
.ch-tip{margin-top:14px}
.pick-ab{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(8,10,20,.82);backdrop-filter:blur(4px)}
.pick-card{width:min(440px,100%);padding:20px 16px;border-radius:22px;background:linear-gradient(180deg,#2a3156,#1a1f3a);border:1px solid rgba(255,255,255,.14);text-align:center;color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.pick-card h2{margin:0 0 4px;font-size:34px}
.pick-sub{margin:0 0 14px;opacity:.85;font-size:15px}
.pick-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pick-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 8px 14px;border-radius:18px;border:0;color:#fff;min-height:0}
.pick-a{background:linear-gradient(180deg,#3B9BFF,#1D62D8);box-shadow:0 6px 0 #123E91}
.pick-b{background:linear-gradient(180deg,#FF7FC0,#D83A8A);box-shadow:0 6px 0 #8E1F58}
.pick-opt:active{transform:translateY(4px);box-shadow:none}
.pick-fig{display:block;width:150px;max-width:100%;height:200px}
.pick-fig canvas{max-width:100%}
.pick-letter{position:absolute;top:8px;left:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#16161A;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px}
.pick-opt b{font-family:'Barlow Condensed',sans-serif;font-size:26px;text-transform:uppercase}
.pick-again{width:auto;margin:14px auto 0;min-height:44px;padding:8px 16px}

/* no Teacher button for players without teacher access; copyright line */
#home .quick.no-teach{grid-template-columns:1fr 1fr}
.foot-copy{margin:8px 0 0;text-align:center;font-size:12px;opacity:.6}

/* the bank / career button stays dark in both themes, so its text must stay light */
.hud-toggle,.hud-toggle .ht-lbl{color:#F3F6FF}
.hud-toggle .ht-sum small{color:#AEB8D6}
.hud-toggle .ht-sum b{color:#F3F6FF}
.hud-toggle .ht-sum span:first-child b{color:#34D17A}
/* Play / Revise buttons: room between them and the unit cards (the gem buttons have a raised edge underneath) */
.modebar{margin-bottom:14px}
#reviseNote{margin-top:-6px!important}

/* ---- results screen and leaderboards: cards, medals for the top three, a calmer "you" row ---- */
.rank{border-radius:12px;padding:6px 14px;background:linear-gradient(180deg,#FFC94A,#F29A1F);box-shadow:0 3px 0 #9A5A0A;color:#2A1A00}
.savebox .pts-add{font-size:44px}
.savebox .sub{margin:12px 0 0;font-size:16px;line-height:1.45}
.review{border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(10,14,30,.55);padding:12px 14px;margin-top:12px;box-shadow:none}
.review .rv-h .rt-stars{color:#FFC94A;letter-spacing:2px}
.review p{font-size:17px;margin:8px 0 6px}
.review .rv-w{display:block;margin:0 0 8px}
.review .rv-bonus{display:inline-block;margin:0;border-radius:99px;padding:4px 12px;background:linear-gradient(180deg,#34C77B,#178A4E)}
.lb{display:grid;gap:8px;margin-top:12px}
.lb li{grid-template-columns:auto 1fr auto auto;gap:12px;padding:10px 14px 10px 10px;border-top:0;border-radius:14px;background:linear-gradient(180deg,#262D4D,#1D2340);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 3px 0 #12162A;color:#F3F6FF}
.lb li .pos{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#343C63;color:#C9D3F2;font-size:20px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.lb li:nth-child(1) .pos{background:linear-gradient(180deg,#FFE27A,#F2B01F);color:#3A2600}
.lb li:nth-child(2) .pos{background:linear-gradient(180deg,#EEF2F8,#AEB8C8);color:#2A3040}
.lb li:nth-child(3) .pos{background:linear-gradient(180deg,#F0B58A,#C4763C);color:#3A1E08}
.lb li .nm>div:first-child{font-weight:700;font-size:17px;overflow:hidden;text-overflow:ellipsis}
.lb li .meta{color:#A9B4D6;font-size:13px}
.lb li .sc{color:#FFD35C;font-size:26px}
.lb li.me{background:linear-gradient(180deg,#2C3F7A,#22305F);color:#fff;box-shadow:inset 0 0 0 2px var(--accent,#4CC3E8),0 3px 0 #12162A}
.lb li.me .meta{color:#C9D6FF}
.lb li.me .pos{color:#C9D3F2}
.lb li.me:nth-child(1) .pos{color:#3A2600}.lb li.me:nth-child(2) .pos{color:#2A3040}.lb li.me:nth-child(3) .pos{color:#3A1E08}
.lb li.me .nm>div:first-child::after{content:"YOU";margin-left:8px;padding:2px 7px;border-radius:99px;background:var(--accent,#4CC3E8);color:#0B1D33;font:800 11px/1 Barlow,sans-serif;letter-spacing:.06em;vertical-align:2px}
.lb .rm{border-radius:50%}
:root[data-theme="light"] .lb li{background:#fff;color:#16161A;box-shadow:inset 0 0 0 1px #D5DCEC,0 3px 0 #C7D0E4}
:root[data-theme="light"] .lb li .meta{color:#5A6480}
:root[data-theme="light"] .lb li .sc{color:#B26A00}
:root[data-theme="light"] .lb li.me{background:#EAF3FF;color:#16161A;box-shadow:inset 0 0 0 2px var(--accent,#2F8BFF),0 3px 0 #C7D0E4}
:root[data-theme="light"] .lb li.me .meta{color:#3C4A6E}
:root[data-theme="light"] .review{background:#F4F7FD;border-color:#D5DCEC}
/* an advert that Google leaves empty shouldn't leave a hole */
.adspot:has(ins[data-ad-status="unfilled"]){display:none}
.adspot:has(ins) .adbox2{min-height:0}
.done-art{border:0;border-radius:18px;box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.18);overflow:hidden}
.done-art.pic{width:110px;height:88px}