:root{--bg:#08111f;--text:#f5f7fb;--muted:#9fb0c7;--accent:#f6b73c;--accent2:#2aa8ff;--good:#5fe39a;--bad:#ff6b6b}
    *{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}body{touch-action:none}
    .app{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;background:linear-gradient(rgba(8,17,31,.80),rgba(7,16,28,.90)),url("../assets/background.png") center top/cover no-repeat}
    header{position:relative;display:flex;justify-content:flex-end;align-items:flex-start;min-height:clamp(118px,17vh,170px);padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(8,17,31,.84);backdrop-filter:blur(10px)}
    .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:12;pointer-events:none}.brand img{display:block;width:clamp(169px,18.9vw,297px);height:auto;max-height:113px;object-fit:contain;object-position:center}.hud{position:relative;z-index:20;display:flex;gap:8px}.pill{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:14px;color:var(--muted)}
    #arena{position:relative;overflow:hidden;min-height:0}#wordWrap{position:absolute;left:50%;top:25%;transform:translate(-50%,-50%);width:min(96vw,900px);text-align:center}
    #prompt{font-size:14px;color:var(--muted);margin-bottom:16px}#word{display:inline-flex;align-items:flex-end;justify-content:center;flex-wrap:nowrap;font-weight:900;letter-spacing:.025em;font-size:clamp(29px,7.2vw,70px);user-select:none;text-shadow:0 0 18px rgba(42,168,255,.18)}
    .segment{display:inline-flex;align-items:flex-end;position:relative;transition:transform .42s ease,filter .25s ease}.ghost-letter{display:inline-block;opacity:.60;font-size:1em;font-weight:inherit;margin:0;transform:none}.segment.known{color:var(--good);text-shadow:0 0 16px rgba(95,227,154,.5)}.letter{display:inline-block}
    .gap{width:0;height:1.05em;align-self:center;opacity:0;border-left:2px solid var(--accent2);box-shadow:0 0 14px var(--accent2);transform:scaleY(.2);transition:.12s;pointer-events:none}.gap.active{opacity:.95;transform:scaleY(1);width:8px}.gap.cut{opacity:.55;transform:scaleY(.75);width:18px;border-color:rgba(255,255,255,.35);box-shadow:none}.gap.just-cut{animation:flashCut .55s ease}@keyframes flashCut{0%{opacity:1;transform:scaleY(1.5);box-shadow:0 0 28px var(--good)}100%{opacity:.55;transform:scaleY(.75);box-shadow:none}}
    #meanings{margin-top:24px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;min-height:74px}.meaning{padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(10px);animation:rise .4s forwards}.meaning b{color:var(--accent)}@keyframes rise{to{opacity:1;transform:none}}
    #guide{position:absolute;left:50%;bottom:165px;transform:translateX(-50%);width:min(88vw,560px);height:2px;background:linear-gradient(90deg,transparent,rgba(42,168,255,.2),transparent)}
    #card.launched{opacity:0;visibility:hidden}
    #cardHolder{position:absolute;left:50%;bottom:clamp(36px,6vh,68px);transform:translateX(-50%);width:clamp(138px,13.5vw,225px);height:clamp(162px,21vh,263px);display:flex;justify-content:center;align-items:center;transition:transform .08s linear;filter:drop-shadow(0 16px 20px rgba(0,0,0,.35))}
    .card-face{width:clamp(54px,4.8vw,84px);height:clamp(79px,7vw,122px);border-radius:10px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.13),transparent 25%),repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 6px,transparent 6px 12px),linear-gradient(145deg,#1768aa,#0a2f57);border:3px solid #fff;box-shadow:0 0 0 4px #1768aa,0 0 28px rgba(42,168,255,.28);display:grid;place-items:center;transform-style:preserve-3d;overflow:hidden}.card-face::after{content:"";width:82%;height:78%;background:url("../assets/s-icon.png") center/contain no-repeat;display:block}
    #card{position:absolute;z-index:5;transform:rotate(-8deg);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#card .card-face{width:clamp(81px,7.2vw,126px);height:clamp(119px,10.5vw,183px);border-radius:15px}#card:active{cursor:grabbing}.flying-card{position:absolute;z-index:50;pointer-events:none;will-change:transform,left,top;perspective:900px}.flying-card .card-face{animation:cardSpin .16s linear infinite;box-shadow:0 0 0 4px #1768aa,0 0 34px rgba(42,168,255,.75)}@keyframes cardSpin{from{transform:rotateY(0deg) rotateZ(0deg)}to{transform:rotateY(360deg) rotateZ(105deg)}}
    .trail{position:absolute;height:5px;transform-origin:left center;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(42,168,255,.96));box-shadow:0 0 18px rgba(42,168,255,.9);z-index:40;pointer-events:none}

    #throwDeck{position:absolute;left:clamp(14px,2vw,30px);bottom:clamp(18px,3vh,34px);width:clamp(150px,14vw,220px);height:clamp(120px,17vh,190px);z-index:8}#throwDeckLabel{position:absolute;left:0;bottom:calc(clamp(79px,7vw,122px) + 30px);width:max-content;display:block;text-align:center;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;line-height:1.2}.deckStat{min-width:74px}.deckStat span{display:block;margin-top:5px;color:var(--text);font-size:19px;letter-spacing:0;white-space:nowrap}#cardsCount{display:block}.deckCard{position:absolute;left:0;bottom:0;width:clamp(54px,4.8vw,84px);height:clamp(79px,7vw,122px);border-radius:10px;background:linear-gradient(145deg,#1768aa,#0a2f57);border:3px solid #fff;box-shadow:0 0 0 3px #1768aa,0 8px 16px rgba(0,0,0,.34);display:grid;place-items:center;transition:.25s ease}.deckCard::after{content:"";width:82%;height:78%;background:url("../assets/s-icon.png") center/contain no-repeat}.deckCard.used{opacity:0;transform:translate(-22px,-36px) rotate(-28deg) scale(.8)}
    #powerWrap{position:absolute;right:18px;bottom:34px;width:18px;height:150px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);overflow:hidden}
    #power{position:absolute;left:0;bottom:0;width:100%;height:0;background:linear-gradient(180deg,var(--accent2),#5dc8ff,#bdeaff);box-shadow:0 0 16px rgba(42,168,255,.72);transition:height .09s linear}
    #confidenceLabels{position:absolute;right:46px;bottom:32px;height:154px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;pointer-events:none}
    .confidenceLabel{color:rgba(159,176,199,.38);font-size:11px;font-weight:900;letter-spacing:.08em;transition:color .18s ease,text-shadow .18s ease,transform .18s ease}
    .confidenceLabel.active{color:var(--text);text-shadow:0 0 12px rgba(42,168,255,.95);transform:translateX(-2px)}
    .confidenceLabel.reached{color:rgba(189,234,255,.72)}
    #cardHolder.idle #card{animation:cardIdle 2.6s ease-in-out infinite}
    #cardHolder.dragging #card{animation:none}
    #cardHolder.conf-maybe .card-face{box-shadow:0 0 0 4px #1768aa,0 0 22px rgba(42,168,255,.38)}
    #cardHolder.conf-yes .card-face{box-shadow:0 0 0 4px #1768aa,0 0 34px rgba(42,168,255,.62)}
    #cardHolder.conf-definitely .card-face{box-shadow:0 0 0 4px #1768aa,0 0 48px rgba(42,168,255,.92),0 0 72px rgba(42,168,255,.34)}
    @keyframes cardIdle{0%,100%{transform:rotate(-8deg) translateY(0) scale(1)}50%{transform:rotate(-8deg) translateY(-3px) scale(1.025)}}

    #aimCursor{position:absolute;width:3px;height:58px;border-radius:999px;pointer-events:none;z-index:65;opacity:0;transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 12px rgba(42,168,255,.95);transition:left .06s linear,top .06s linear,opacity .08s ease}#aimCursor.show{opacity:1}

    #completionPanel{z-index:140;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);width:min(90vw,680px);max-height:calc(100% - 20px);padding:16px 18px;border-radius:22px;background:#08111f;border:1px solid rgba(95,227,154,.5);box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 38px rgba(95,227,154,.12);text-align:center;z-index:75;opacity:0;pointer-events:none;transition:.35s ease}
    #completionPanel.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
    #completionPanel h2{margin:0 0 2px;color:var(--good);font-size:clamp(24px,4.4vw,44px)}
    #completionPanel .wholeDefinition{margin:5px auto 10px;max-width:600px;color:var(--text);font-size:clamp(14px,2vw,18px);line-height:1.3}
    #completionPanel .bonusTitle{margin:0 0 4px;color:var(--accent);font-size:clamp(18px,2.8vw,25px)}
    #completionPanel .bonusGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}
    #completionPanel .bonusBox{padding:8px 6px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
    #completionPanel .bonusBox span{font-size:12px}#completionPanel .bonusBox strong{display:block;color:var(--good);font-size:18px}
    #completionPanel .totalLine{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.12);font-weight:900;font-size:17px}
    #completionPanel .dismissHint{margin-top:6px;color:var(--muted);font-size:11px;letter-spacing:.03em}
    @media(max-width:620px){#completionPanel{z-index:140;top:49%;padding:13px 12px}.bonusGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}


    #lossPanel{z-index:140;position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) scale(.94);width:min(86vw,620px);padding:28px;border-radius:22px;background:#08111f;border:1px solid rgba(255,107,107,.55);box-shadow:0 24px 70px rgba(0,0,0,.52),0 0 36px rgba(255,107,107,.12);text-align:center;z-index:76;opacity:0;pointer-events:none;transition:.35s ease}
    #lossPanel.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
    #lossPanel .lossTitle{margin:0 0 6px;color:var(--bad);font-size:clamp(24px,4vw,38px)}
    #lossPanel h2{margin:0;color:var(--text);font-size:clamp(30px,5vw,54px)}
    #lossPanel p{max-width:500px;margin:12px auto 20px;color:var(--muted);font-size:17px;line-height:1.45}
    #retryBtn{font-size:16px;padding:12px 22px}

    #message{display:none!important;position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);font-weight:900;font-size:clamp(24px,7vw,54px);letter-spacing:.03em;opacity:0;pointer-events:none;text-align:center;z-index:70;text-shadow:0 8px 22px rgba(0,0,0,.55)}#message.show{animation:pop 1.05s ease forwards}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.65)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.96)}}
    .shake{animation:shake .35s}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}50%{transform:translateX(10px)}75%{transform:translateX(-6px)}}.shard{position:absolute;width:14px;height:20px;border-radius:3px;background:#b9dcff;border:1px solid #fff;z-index:60;pointer-events:none}
    footer{padding:12px 16px 18px;text-align:center;color:var(--muted);font-size:13px;border-top:1px solid rgba(255,255,255,.06)}button{border:0;border-radius:999px;background:var(--accent);color:#121212;font-weight:900;padding:10px 16px;cursor:pointer}#nextBtn{display:none;margin-left:8px}
    @media (max-height:690px){#wordWrap{top:21%}#guide{bottom:135px}#cardHolder{bottom:34px}#powerWrap{height:120px}}
  
    /* v0.8.0: simplified aiming and first-visit tutorial */
    #powerWrap,#confidenceLabels{display:none!important}
    #menuBtn{position:absolute;left:16px;top:12px;z-index:120;width:42px;height:38px;padding:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16);font-size:22px;line-height:1;box-shadow:none}
    #menuBackdrop{position:fixed;inset:0;z-index:109;background:rgba(2,7,14,.48);opacity:0;pointer-events:none;transition:opacity .2s ease}
    #menuBackdrop.show{opacity:1;pointer-events:auto}
    #gameMenu{position:fixed;left:12px;top:58px;z-index:110;width:min(88vw,330px);padding:18px;border-radius:18px;background:rgba(8,17,31,.98);border:1px solid rgba(255,255,255,.15);box-shadow:0 22px 60px rgba(0,0,0,.48);transform:translateY(-10px) scale(.98);opacity:0;pointer-events:none;transition:.2s ease}
    #gameMenu.show{transform:none;opacity:1;pointer-events:auto}
    #gameMenu h2{margin:0 0 14px;font-size:19px}.menuSection{padding:13px 0;border-top:1px solid rgba(255,255,255,.09)}.menuSection:first-of-type{border-top:0;padding-top:0}.menuLabel{margin-bottom:8px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.1em}.modeButtons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.modeBtn{padding:10px 8px;border-radius:12px;background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(255,255,255,.12);font-size:13px}.modeBtn.active{background:var(--accent);color:#101010;border-color:var(--accent)}.menuHelp{margin:0;color:#d7e1ef;font-size:14px;line-height:1.45}.menuAction{width:100%;margin-top:10px;border-radius:12px}.modeHint{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.35}
    #tutorialOverlay{position:absolute;inset:0;z-index:85;pointer-events:none;background:rgba(4,10,20,.18);opacity:0;transition:opacity .22s ease}
    #tutorialOverlay.show{opacity:1}
    #tutorialBubble{position:absolute;left:50%;bottom:clamp(190px,27vh,275px);transform:translateX(-50%);min-width:min(78vw,330px);max-width:min(88vw,470px);padding:14px 18px;border-radius:16px;background:#08111f;border:1px solid rgba(42,168,255,.55);box-shadow:0 16px 42px rgba(0,0,0,.4),0 0 24px rgba(42,168,255,.14);text-align:center;font-size:clamp(16px,2.2vw,21px);font-weight:850;letter-spacing:.01em}
    #tutorialBubble::after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%) rotate(45deg);width:18px;height:18px;background:#08111f;border-right:1px solid rgba(42,168,255,.55);border-bottom:1px solid rgba(42,168,255,.55)}
    #tutorialOverlay.step-hold #card{animation:tutorialNudge 1.05s ease-in-out infinite}
    @keyframes tutorialNudge{0%,100%{transform:rotate(-8deg) translateY(0)}45%{transform:rotate(-5deg) translateY(-9px) scale(1.05)}70%{transform:rotate(-10deg) translateY(-2px)}}
    @media(max-width:620px){header{min-height:176px;padding:12px 14px}.brand{top:50%}.brand img{width:min(40.5vw,176px);max-height:119px}.hud{position:absolute;right:14px;top:14px}.pill{font-size:13px;padding:6px 10px}#wordWrap{top:27%;width:96vw}#prompt{font-size:11px;line-height:1.35;margin:0 auto 12px;width:92vw}#word{font-size:44px;max-width:96vw}#meanings{margin-top:18px;gap:8px}.meaning{padding:8px 10px;font-size:14px}#throwDeck{width:180px;left:12px}#throwDeckLabel{gap:12px;bottom:calc(clamp(79px,7vw,122px) + 28px)}#tutorialBubble{bottom:clamp(185px,29vh,250px)}}

    /* v0.9 reward feedback and simplified progression */
    #wordWrap{top:20%;}
    .scorePill{padding:8px 14px;background:rgba(13,27,48,.9);border-color:rgba(255,255,255,.2);box-shadow:0 0 20px rgba(42,168,255,.12);font-size:15px;color:#dce8f8;letter-spacing:.03em}
    .scorePill span{font-size:12px;color:#b9c9dc;font-weight:800;letter-spacing:.1em;margin-right:6px}.scorePill b{font-size:23px;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.28)}
    .scorePill.score-pulse{animation:scorePulse .52s ease}
    @keyframes scorePulse{0%,100%{transform:scale(1)}45%{transform:scale(1.12);box-shadow:0 0 28px rgba(95,227,154,.42)}}
    #pointsLayer{position:fixed;inset:0;z-index:250;pointer-events:none;overflow:visible}
    .floatingPoints{position:absolute;color:var(--accent);font-size:clamp(22px,3.2vw,34px);font-weight:950;text-shadow:0 3px 16px rgba(0,0,0,.72),0 0 18px rgba(246,183,60,.42);transform:translate(-50%,-50%);will-change:left,top,transform,opacity}
    #rankPanel{position:absolute;right:clamp(16px,2.5vw,34px);bottom:clamp(18px,3vh,36px);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:132px;padding:8px 10px;border-radius:16px;background:rgba(9,21,38,.78);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 32px rgba(0,0,0,.28);z-index:8;text-align:center}
    #rankBadge{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#17365d,#0b1f38);border:2px solid rgba(255,255,255,.32);color:var(--accent);font-size:23px;font-weight:950}
    #rankName{font-size:12px;font-weight:950;letter-spacing:.1em;color:#fff}#rankProgress{margin-top:1px;font-size:9px;color:var(--muted)}
    #rankPanel .scorePill{margin-top:3px;padding:5px 9px;font-size:11px}#rankPanel .scorePill span{font-size:9px}#rankPanel .scorePill b{font-size:17px}
    #rankPanel.rank-up{animation:rankUp .8s ease}
    @keyframes rankUp{0%,100%{transform:scale(1)}40%{transform:scale(1.08);box-shadow:0 0 34px rgba(246,183,60,.35)}}
    @media(max-width:620px){#wordWrap{top:22%;}#rankPanel{right:10px;bottom:14px;min-width:116px;padding:7px 8px}#rankBadge{width:46px;height:46px;font-size:20px}#rankName{font-size:10px}#rankProgress{font-size:8px}#rankPanel .scorePill{padding:4px 7px}#rankPanel .scorePill span{display:none}#rankPanel .scorePill b{font-size:15px}}

    #exitBtn{position:absolute;right:16px;top:14px;z-index:24;border:0;border-radius:999px;background:#fff;color:#1768aa;font-weight:900;letter-spacing:.05em;padding:10px 15px;box-shadow:0 6px 18px rgba(0,0,0,.24);cursor:pointer}
    @media(max-width:620px){#exitBtn{right:12px;top:12px;padding:8px 12px;font-size:12px}}

    /* v0.9.13: faster review toggle, branded guide, mobile interaction lock */
    footer{position:relative;min-height:62px;display:flex;align-items:center;justify-content:center;padding:10px 16px 14px}
    #gameTimer{display:inline-flex;align-items:center;justify-content:center;min-width:104px;padding:8px 16px;border-radius:999px;background:rgba(13,27,48,.88);border:1px solid rgba(255,255,255,.15);font-size:20px;font-weight:950;letter-spacing:.08em;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.25)}
    #gameTimer.hidden{opacity:0;visibility:hidden}
    #nextBtn{display:none!important;position:absolute;left:50%;top:58%;z-index:70;display:block;margin:0;padding:14px 28px;transform:translate(-50%,-50%);opacity:0;visibility:hidden;pointer-events:none;background:#fff;color:#1768aa;border:1px solid rgba(42,168,255,.3);box-shadow:0 12px 34px rgba(0,0,0,.36),0 0 24px rgba(42,168,255,.18);font-size:clamp(20px,4vw,32px);letter-spacing:.08em;transition:opacity .16s ease}
    #nextBtn.show{opacity:1;visibility:visible;pointer-events:auto}
    #nextBtn.overlay-open{opacity:1}
    #completionPanel .bonusGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
    @media(max-width:620px){#completionPanel .bonusGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#nextBtn{top:56%}}
    #guideOverlay{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:30px;background:#06101e}
    #guideOverlay.hidden{display:none}
    #guideCard{width:min(86vw,590px);max-height:86vh;overflow:auto;padding:42px 28px 48px;border-radius:24px;background:linear-gradient(180deg,#0a1b33 0%,#0d2443 100%);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 38px rgba(42,168,255,.12)}
    #guideLogo{display:block;width:min(62%,315px);height:auto;margin:0 auto 6px}
    #guideCard h2{margin:0 0 18px;text-align:center;color:var(--accent);font-size:clamp(16px,2.7vw,22px);letter-spacing:.14em}
    #guideCard .guideIntro{margin:0 0 18px;color:#e7eef8;font-size:14px;line-height:1.45}
    #guideCard ol{margin:0;padding-left:25px;font-size:16px;line-height:1.55;color:#fff}
    #guideCard li{padding-left:6px;margin-bottom:6px}
    #guideCard li::marker{color:var(--accent);font-weight:900}
    #guideCard .guideScoring{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#dce8f8;font-size:14px;line-height:1.45}
    #guideStartBtn{display:block;margin:22px auto 0;padding:13px 24px;border-radius:12px;background:var(--accent);color:#111;font-size:15px}


    @media(max-width:620px){
      #guideOverlay{padding:30px 24px 34px}
      #guideCard{width:min(84vw,520px);max-height:84vh;padding:32px 20px 40px}
      #guideLogo{width:min(62%,260px)}
    }


    .resultActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
    .resultActions button{min-width:132px;padding:11px 17px}
    #seeTilesBtn,#lossSeeTilesBtn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.36)}
    #resultNextBtn,#lossNextBtn{background:var(--accent);color:#111}
    #backToResultsBtn{position:absolute;left:50%;top:58%;z-index:82;display:none;transform:translate(-50%,-50%);padding:13px 22px;background:#fff;color:#1768aa;border:1px solid rgba(42,168,255,.3);box-shadow:0 12px 34px rgba(0,0,0,.36),0 0 24px rgba(42,168,255,.18);font-size:clamp(17px,3.5vw,25px);letter-spacing:.05em}
    #backToResultsBtn.show{display:block}
    @media(max-width:620px){
      .resultActions{flex-direction:column;align-items:stretch}
      .resultActions button{width:100%}
      #backToResultsBtn{top:56%}
    }

    /* v0.9.21 — clean completion flow */
    #completionPanel{
      position:absolute;
      left:50%;
      top:2.5%;
      transform:translateX(-50%) translateY(-10px);
      width:min(92vw,720px);
      max-height:none;
      padding:10px 16px 12px;
      border-radius:18px;
      background:#08111f;
      border:1px solid rgba(95,227,154,.5);
      box-shadow:0 16px 42px rgba(0,0,0,.42),0 0 28px rgba(95,227,154,.10);
      text-align:center;
      z-index:140;
      opacity:0;
      pointer-events:none;
      transition:opacity .22s ease,transform .22s ease;
    }
    #completionPanel.show{
      opacity:1;
      pointer-events:auto;
      transform:translateX(-50%) translateY(0);
    }
    #completionPanel h2{
      margin:0 0 2px;
      color:var(--good);
      font-size:clamp(21px,3.6vw,34px);
    }
    #completionPanel .wholeDefinition{
      margin:3px auto 0;
      max-width:650px;
      color:var(--text);
      font-size:clamp(13px,1.8vw,17px);
      line-height:1.25;
    }
    #completionPanel .bonusTitle{
      margin:0 0 2px;
      color:var(--accent);
      font-size:clamp(15px,2.2vw,20px);
    }
    #completionPanel .bonusGrid,
    #completionPanel .totalLine,
    #completionPanel .resultActions,
    #backToResultsBtn{
      display:none!important;
    }
    #nextBtn{
      display:block!important;
      position:absolute;
      left:50%;
      bottom:clamp(22px,4vh,46px);
      top:auto;
      z-index:145;
      margin:0;
      padding:13px 24px;
      transform:translateX(-50%) scale(.96);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      background:#fff;
      color:#1768aa;
      border:1px solid rgba(42,168,255,.3);
      box-shadow:0 12px 34px rgba(0,0,0,.36),0 0 24px rgba(42,168,255,.18);
      font-size:clamp(19px,3.8vw,29px);
      letter-spacing:.07em;
      transition:opacity .30s ease-out,transform .30s ease-out;
    }
    #nextBtn.show{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translateX(-50%) scale(1);
    }
    .scoreBonusNotice{
      position:fixed;
      z-index:1000;
      transform:translate(-50%,-50%);
      color:#5fe39a;
      font-weight:950;
      font-size:clamp(15px,2.8vw,22px);
      letter-spacing:.02em;
      white-space:nowrap;
      pointer-events:none;
      text-shadow:0 3px 14px rgba(0,0,0,.7);
    }
    @media(max-width:620px){
      #completionPanel{
        top:2%;
        width:min(92vw,620px);
        padding:9px 12px 10px;
      }
      .scoreBonusNotice{
        font-size:15px;
      }
    }


    /* v0.9.23 — long-definition fit */
    #completionPanel{
      top:1.5%;
      padding:8px 14px 9px;
    }
    #completionPanel .wholeDefinition{
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
      overflow:hidden;
      max-width:680px;
      margin:2px auto 0;
      font-size:clamp(12px,1.65vw,16px);
      line-height:1.18;
    }
    #completionPanel.show ~ #meanings,
    .arena:has(#completionPanel.show) #meanings,
    .arena.results-visible #meanings{
      transform:translateY(clamp(34px,5.5vh,58px));
    }
    #meanings{
      transition:transform .22s ease;
    }
    @media(max-width:620px){
      #completionPanel{
        top:1%;
        padding:7px 10px 8px;
      }
      #completionPanel h2{
        font-size:clamp(19px,5vw,28px);
      }
      #completionPanel .wholeDefinition{
        -webkit-line-clamp:3;
        font-size:12px;
        line-height:1.15;
      }
      .arena:has(#completionPanel.show) #meanings,
      .arena.results-visible #meanings{
        transform:translateY(clamp(46px,7vh,72px));
      }
    }


    /* v0.9.24 accessibility theme */
    #completionPanel{padding-bottom:14px}
    #completionPanel .wholeDefinition{display:block;-webkit-line-clamp:unset;overflow:visible;max-width:680px;margin:3px auto 0;font-size:calc(clamp(12px,1.65vw,16px) + .5pt);line-height:1.22}
    body.tile-light .meaning{background:#f8f7f2;color:#10243a;border-color:rgba(23,104,170,.35);box-shadow:0 8px 22px rgba(0,0,0,.18)}
    body.tile-light .meaning b{color:#0e4f84}
    body.tile-light .meaning span{color:#1d2732}
    body.tile-light #completionPanel{background:#f8f7f2;color:#10243a;border-color:rgba(23,104,170,.38);box-shadow:0 16px 42px rgba(0,0,0,.30)}
    body.tile-light #completionPanel h2{color:#0e6a43}
    body.tile-light #completionPanel .bonusTitle{color:#1768aa}
    body.tile-light #completionPanel .wholeDefinition{color:#1d2732}
    @media(max-width:620px){#completionPanel .wholeDefinition{font-size:calc(12px + .5pt);line-height:1.19}}


    /* v0.9.25 menu stacking */
    #menuBackdrop{z-index:390!important}
    #gameMenu{z-index:400!important}
    #menuBtn{z-index:410!important}

    /* v0.9.27 — Safari viewport-aware definition spacing */
    #arena{min-height:0}
    #completionPanel{contain:layout style}

    /* v0.9.26 — dynamic definition spacing */
    #completionPanel{max-height:none;overflow:visible}
    #meanings{
      transform:translateY(var(--results-tile-offset,0px))!important;
      transition:transform .22s ease;
    }

    /* v0.9.28 — browser-safe solved layout */
    #arena.results-visible #wordWrap{
      top:var(--results-content-top,25%);
      transform:translateX(-50%);
      transition:top .22s ease;
    }
    #arena.results-visible #meanings{
      transform:none!important;
    }


    /* v0.9.38 — intro remains responsive even if puzzle data fails */
    #guideError{
      display:none;
      margin:14px 0 0;
      padding:11px 13px;
      border-radius:12px;
      background:rgba(255,107,107,.12);
      border:1px solid rgba(255,107,107,.45);
      color:#ffd7d7;
      font-size:13px;
      line-height:1.4;
      text-align:center;
    }
    #guideError.show{display:block}

    /* v0.9.41 — clean code intro + about */
    .aboutBlock{
      margin-top:8px;
      padding:12px;
      border-radius:12px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.1);
      color:#dbe6f5;
      font-size:12px;
      line-height:1.5;
    }
    .aboutBlock strong{
      display:block;
      color:#fff;
      font-size:13px;
      margin-bottom:2px;
    }
    .reportIssueBtn{
      display:block;
      width:100%;
      margin-top:10px;
      text-align:center;
      text-decoration:none;
      padding:10px 12px;
      border-radius:12px;
      background:var(--accent);
      color:#111;
      font-weight:900;
    }


#sliceSplash{
position:fixed;inset:0;background:#000;display:flex;flex-direction:column;
justify-content:center;align-items:center;z-index:99999;
transition:opacity .65s ease;
}
#sliceSplash.fade{opacity:0;pointer-events:none;}
#sliceSplash img{max-width:280px;opacity:0;transform:scale(.98);
animation:splashLogo .9s .25s forwards;}
#sliceSplash .meta{margin-top:18px;color:#bfc7d6;font-size:12px;
text-align:center;opacity:0;animation:splashMeta .7s 1.05s forwards;}
@keyframes splashLogo{to{opacity:1;transform:scale(1);}}
@keyframes splashMeta{to{opacity:1;}}
#guideOverlay{opacity:0;transition:opacity .65s ease;}
#guideOverlay.showAfterSplash{opacity:1;}


/* Sprint 1 — portrait-only gameplay guard */
#orientationGuard{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:28px;background:#06101e;color:#fff;text-align:center}
#orientationGuard.show{display:flex}
#orientationGuard .orientationCard{width:min(88vw,460px);padding:28px 22px;border-radius:22px;background:#0a1b33;border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 70px rgba(0,0,0,.55)}
#orientationGuard h2{margin:0 0 10px;color:var(--accent);font-size:clamp(24px,5vw,38px)}
#orientationGuard p{margin:0;color:#dce8f8;font-size:16px;line-height:1.45}
/* Orientation guard visibility is controlled by orientation-manager.js. */

/* v1.0 Sprint 1.2 — self-contained end-of-puzzle overlays */
body.result-open{overflow:hidden}
.resultOverlay{
  position:fixed!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  padding:max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto!important;
  background:rgba(3,8,16,.92)!important;
  backdrop-filter:blur(10px);
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:none!important;
  z-index:900!important;
  transition:opacity .22s ease,visibility .22s ease!important;
}
.resultOverlay.show{
  opacity:1!important;
  visibility:visible;
  pointer-events:auto!important;
  transform:none!important;
}
.resultCard{
  width:min(92vw,760px);
  max-height:min(88dvh,820px);
  overflow:auto;
  padding:clamp(20px,4vw,34px);
  border-radius:24px;
  background:#08111f;
  text-align:center;
  box-shadow:0 26px 80px rgba(0,0,0,.58);
  -webkit-overflow-scrolling:touch;
}
.resultCardSuccess{border:1px solid rgba(95,227,154,.52)}
.resultCardLoss{border:1px solid rgba(255,107,107,.56)}
#completionPanel h2,#lossPanel h2{
  margin:3px 0 8px;
  overflow-wrap:anywhere;
  font-size:clamp(25px,6vw,48px);
  line-height:1.05;
}
#completionPanel .wholeDefinition,#lossPanel .wholeDefinition{
  max-width:650px;
  margin:0 auto 18px;
  color:var(--text);
  font-size:clamp(14px,2.6vw,18px);
  line-height:1.4;
}
#completionPanel .bonusTitle,#lossPanel .lossTitle{
  margin:0 0 4px;
  font-size:clamp(19px,4vw,30px);
  font-weight:950;
  letter-spacing:.06em;
}
.resultMorphemes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  gap:12px;
  margin:18px 0 22px;
}
.resultMorpheme{
  min-width:0;
  padding:13px 12px;
  border-radius:15px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.12);
  text-align:center;
}
.resultMorpheme strong{
  display:block;
  margin-bottom:6px;
  color:var(--accent);
  font-size:clamp(17px,3.2vw,24px);
  overflow-wrap:anywhere;
}
.resultMorpheme span{
  display:block;
  color:#dce8f8;
  font-size:13px;
  line-height:1.35;
}
#completionPanel #nextBtn{
  position:static!important;
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:none!important;
  margin:0 auto!important;
  padding:13px 26px!important;
  background:#fff!important;
  color:#1768aa!important;
  font-size:clamp(17px,3vw,22px)!important;
}
#completionPanel #nextBtn:not(.show){visibility:hidden!important;opacity:0!important;pointer-events:none!important}
#lossPanel p#lossSummary{margin:8px auto 14px;color:var(--muted);font-size:15px;line-height:1.4}
#lossPanel .resultActions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin:0}
#lossPanel .resultActions button{width:100%;min-width:0}
body.tile-light .resultCard{background:#f8f7f2;color:#10243a}
body.tile-light .resultMorpheme{background:#fff;border-color:rgba(23,104,170,.28)}
body.tile-light .resultMorpheme strong{color:#0e4f84}
body.tile-light .resultMorpheme span,
body.tile-light #completionPanel .wholeDefinition,
body.tile-light #lossPanel .wholeDefinition{color:#1d2732}
@media(max-width:620px){
  .resultOverlay{align-items:flex-start!important;padding-top:max(14px,env(safe-area-inset-top))!important}
  .resultCard{width:94vw;max-height:calc(100dvh - 28px);padding:20px 14px 22px;border-radius:20px}
  .resultMorphemes{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0 18px}
  .resultMorpheme{padding:10px 8px}
  .resultMorpheme span{font-size:12px}
  #lossPanel .resultActions{grid-template-columns:1fr}
}
@media(max-width:380px){
  .resultMorphemes{grid-template-columns:1fr}
}

/* v1.0 Sprint 1.3 — keep result morphemes horizontal */
.resultMorphemes{
  display:flex!important;
  flex-flow:row wrap;
  align-items:stretch;
  justify-content:center;
  gap:10px;
}
.resultMorpheme{
  flex:0 1 auto;
  width:auto;
  min-width:112px;
  max-width:220px;
}
.resultMorpheme strong{
  white-space:nowrap;
  overflow-wrap:normal!important;
  word-break:keep-all;
}
.resultMorpheme span{
  overflow-wrap:normal;
  word-break:normal;
}
@media(max-width:620px){
  .resultMorphemes{
    display:flex!important;
    flex-flow:row wrap;
    justify-content:center;
    gap:8px;
  }
  .resultMorpheme{
    flex:0 1 auto;
    min-width:96px;
    max-width:calc(50% - 4px);
    padding:10px 9px;
  }
  .resultMorpheme strong{
    font-size:clamp(15px,4.5vw,20px);
  }
}
@media(max-width:380px){
  .resultMorphemes{
    display:flex!important;
    flex-flow:row wrap;
  }
  .resultMorpheme{
    min-width:92px;
    max-width:100%;
  }
}

/* v1.0 Sprint 1.4 — true self-contained result windows */
#completionPanel.resultOverlay,
#lossPanel.resultOverlay{
  position:fixed!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;
  background:rgba(3,8,16,.94)!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:0!important;
  border-radius:0!important;
  overflow:auto!important;
  z-index:5000!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#completionPanel.resultOverlay.show,
#lossPanel.resultOverlay.show{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
#completionPanel .resultCard,
#lossPanel .resultCard{
  position:relative;
  width:min(92vw,760px);
  max-height:calc(100dvh - 36px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:clamp(20px,4vw,34px);
  border-radius:24px;
  background:#08111f;
  box-shadow:0 26px 80px rgba(0,0,0,.62);
  text-align:center;
  -webkit-overflow-scrolling:touch;
}
#completionPanel .resultCard{border:1px solid rgba(95,227,154,.55)}
#lossPanel .resultCard{border:1px solid rgba(255,107,107,.58)}
#completionPanel #nextBtn{
  position:static!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  margin:2px auto 0!important;
  transform:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
#completionPanel #nextBtn.show{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
#completionPanel .resultMorphemes,
#lossPanel .resultMorphemes{
  display:flex!important;
  flex-flow:row wrap!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:10px!important;
  margin:18px 0 22px!important;
}
#completionPanel .resultMorpheme,
#lossPanel .resultMorpheme{
  flex:0 1 auto!important;
  width:auto!important;
  min-width:112px!important;
  max-width:240px!important;
}
#completionPanel .resultMorpheme strong,
#lossPanel .resultMorpheme strong{white-space:nowrap!important}
#arena.results-visible #wordWrap{top:20%!important;transform:translate(-50%,-50%)!important}
@media(max-width:620px){
  #completionPanel.resultOverlay,
  #lossPanel.resultOverlay{align-items:flex-start!important;padding-top:max(12px,env(safe-area-inset-top))!important}
  #completionPanel .resultCard,
  #lossPanel .resultCard{width:94vw;max-height:calc(100dvh - 24px);padding:20px 14px 22px;border-radius:20px}
  #completionPanel .resultMorpheme,
  #lossPanel .resultMorpheme{min-width:96px!important;max-width:calc(50% - 5px)!important}
}

/* v1.0 Sprint 1.5 — result morphemes remain one horizontal row */
#completionPanel .resultMorphemes,
#lossPanel .resultMorphemes{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  gap:10px!important;
  padding:2px 2px 10px!important;
  margin:18px 0 16px!important;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
#completionPanel .resultMorpheme,
#lossPanel .resultMorpheme{
  flex:0 0 auto!important;
  width:max-content!important;
  min-width:118px!important;
  max-width:260px!important;
  scroll-snap-align:center;
}
#completionPanel .resultMorpheme strong,
#lossPanel .resultMorpheme strong{
  display:inline-flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:baseline!important;
  justify-content:center!important;
  white-space:nowrap!important;
  writing-mode:horizontal-tb!important;
}
#completionPanel .resultMorpheme strong > span,
#lossPanel .resultMorpheme strong > span{
  display:inline-block!important;
  width:auto!important;
}
@media(max-width:620px){
  #completionPanel .resultMorphemes,
  #lossPanel .resultMorphemes{
    justify-content:flex-start!important;
  }
  #completionPanel .resultMorpheme,
  #lossPanel .resultMorpheme{
    min-width:108px!important;
    max-width:230px!important;
  }
}


/* v1.0 Sprint 1.5.1 — keep each morpheme title on one horizontal line */
#completionPanel .resultMorphemeTitle,
#lossPanel .resultMorphemeTitle{
  display:block!important;
  width:max-content!important;
  max-width:none!important;
  margin:0 auto 6px!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  line-height:1.1!important;
}
#completionPanel .resultMorphemeTitle .letter,
#completionPanel .resultMorphemeTitle .ghost-letter,
#lossPanel .resultMorphemeTitle .letter,
#lossPanel .resultMorphemeTitle .ghost-letter{
  display:inline!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  writing-mode:horizontal-tb!important;
}
#completionPanel .resultMorphemeDefinition,
#lossPanel .resultMorphemeDefinition{
  display:block!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}

/* v1.0 Sprint 1.6 — polished centered result modal */
#completionPanel.resultOverlay,
#lossPanel.resultOverlay{
  background:rgba(2,7,14,.96)!important;
}

#completionPanel .resultCard,
#lossPanel .resultCard{
  width:min(92vw,1040px)!important;
  max-height:calc(100dvh - 48px)!important;
  padding:clamp(32px,5vw,64px) clamp(24px,5vw,64px)!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 50% 15%,rgba(25,61,102,.16),transparent 42%),
    linear-gradient(180deg,#091526 0%,#07111f 100%)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.66),0 0 48px rgba(95,227,154,.08)!important;
}

#completionPanel .resultCard{
  border:1.5px solid rgba(95,227,154,.72)!important;
}

#lossPanel .resultCard{
  border:1.5px solid rgba(255,107,107,.66)!important;
}

#completionPanel .bonusTitle,
#lossPanel .lossTitle{
  margin:0 0 10px!important;
  font-size:clamp(26px,4.2vw,48px)!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.045em!important;
}

#completionPanel .bonusTitle{
  color:var(--accent)!important;
  text-shadow:0 4px 18px rgba(246,183,60,.18)!important;
}

#completionPanel h2,
#lossPanel h2{
  margin:0 0 14px!important;
  font-size:clamp(42px,7vw,78px)!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
}

#completionPanel h2{
  color:var(--good)!important;
  text-shadow:0 4px 20px rgba(95,227,154,.12)!important;
}

#completionPanel .wholeDefinition,
#lossPanel .wholeDefinition{
  max-width:760px!important;
  margin:0 auto!important;
  font-size:clamp(19px,2.5vw,29px)!important;
  line-height:1.35!important;
  color:#f5f7fb!important;
}

#completionPanel .resultMorphemes,
#lossPanel .resultMorphemes{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  justify-content:center!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:100%!important;
  gap:14px!important;
  margin:34px auto 30px!important;
  padding:2px 4px 10px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin;
}

#completionPanel .resultMorpheme,
#lossPanel .resultMorpheme{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:150px!important;
  max-width:440px!important;
  min-height:126px!important;
  padding:22px 24px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045))!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.18)!important;
  text-align:center!important;
}

#completionPanel .resultMorphemeTitle,
#lossPanel .resultMorphemeTitle{
  display:block!important;
  width:max-content!important;
  margin:0 auto 10px!important;
  color:var(--accent)!important;
  font-size:clamp(21px,2.8vw,32px)!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:.015em!important;
  white-space:nowrap!important;
  text-shadow:0 3px 14px rgba(246,183,60,.14)!important;
}

#completionPanel .resultMorphemeTitle .letter,
#completionPanel .resultMorphemeTitle .ghost-letter,
#lossPanel .resultMorphemeTitle .letter,
#lossPanel .resultMorphemeTitle .ghost-letter{
  color:inherit!important;
}

#completionPanel .resultMorphemeDefinition,
#lossPanel .resultMorphemeDefinition{
  display:block!important;
  color:#f4f6fa!important;
  font-size:clamp(17px,2.1vw,25px)!important;
  line-height:1.25!important;
  white-space:normal!important;
  text-align:center!important;
}

#completionPanel #nextBtn,
#lossPanel .resultActions button{
  min-height:64px!important;
  padding:16px 34px!important;
  border-radius:999px!important;
  font-size:clamp(21px,3vw,32px)!important;
  font-weight:950!important;
  letter-spacing:.055em!important;
}

#completionPanel #nextBtn{
  min-width:min(82vw,330px)!important;
  background:#fff!important;
  color:#1768aa!important;
  border:1px solid rgba(42,168,255,.48)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.34),0 0 28px rgba(42,168,255,.16)!important;
}

#lossPanel #lossSummary{
  margin:6px auto 20px!important;
}

body.tile-light #completionPanel .resultCard,
body.tile-light #lossPanel .resultCard{
  background:linear-gradient(180deg,#f8f7f2,#eef3f8)!important;
}
body.tile-light #completionPanel .resultMorpheme,
body.tile-light #lossPanel .resultMorpheme{
  background:#fff!important;
  border-color:rgba(23,104,170,.24)!important;
}
body.tile-light #completionPanel .resultMorphemeTitle,
body.tile-light #lossPanel .resultMorphemeTitle{
  color:#b87800!important;
}
body.tile-light #completionPanel .resultMorphemeDefinition,
body.tile-light #lossPanel .resultMorphemeDefinition,
body.tile-light #completionPanel .wholeDefinition,
body.tile-light #lossPanel .wholeDefinition{
  color:#172536!important;
}

@media(max-width:620px){
  #completionPanel.resultOverlay,
  #lossPanel.resultOverlay{
    align-items:center!important;
    padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  }
  #completionPanel .resultCard,
  #lossPanel .resultCard{
    width:96vw!important;
    max-height:calc(100dvh - 20px)!important;
    padding:26px 14px 28px!important;
    border-radius:22px!important;
  }
  #completionPanel .bonusTitle,
  #lossPanel .lossTitle{
    font-size:clamp(23px,7vw,32px)!important;
  }
  #completionPanel h2,
  #lossPanel h2{
    font-size:clamp(34px,11vw,52px)!important;
  }
  #completionPanel .wholeDefinition,
  #lossPanel .wholeDefinition{
    font-size:clamp(16px,4.7vw,21px)!important;
  }
  #completionPanel .resultMorphemes,
  #lossPanel .resultMorphemes{
    justify-content:flex-start!important;
    gap:10px!important;
    margin:24px auto 22px!important;
    padding-inline:6px!important;
  }
  #completionPanel .resultMorpheme,
  #lossPanel .resultMorpheme{
    min-width:132px!important;
    max-width:280px!important;
    min-height:108px!important;
    padding:17px 16px!important;
    border-radius:17px!important;
  }
  #completionPanel .resultMorphemeTitle,
  #lossPanel .resultMorphemeTitle{
    font-size:clamp(19px,5.5vw,25px)!important;
  }
  #completionPanel .resultMorphemeDefinition,
  #lossPanel .resultMorphemeDefinition{
    font-size:clamp(15px,4.4vw,19px)!important;
  }
  #completionPanel #nextBtn,
  #lossPanel .resultActions button{
    min-height:56px!important;
    padding:13px 24px!important;
    font-size:clamp(18px,5.8vw,24px)!important;
  }
}

/* v1.0 Sprint 1.6.1 — restore readable morpheme typography only */
#completionPanel .resultMorphemes,
#lossPanel .resultMorphemes{
  justify-content:center!important;
}

#completionPanel .resultMorphemeTitle,
#completionPanel .resultMorphemeTitle *,
#lossPanel .resultMorphemeTitle,
#lossPanel .resultMorphemeTitle *{
  color:var(--accent)!important;
  font-size:clamp(18px,1.8vw,24px)!important;
  font-weight:900!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  text-shadow:0 2px 10px rgba(246,183,60,.12)!important;
}

#completionPanel .resultMorphemeDefinition,
#lossPanel .resultMorphemeDefinition{
  font-size:clamp(16px,1.55vw,21px)!important;
  line-height:1.28!important;
}

@media(max-width:620px){
  #completionPanel .resultMorphemes,
  #lossPanel .resultMorphemes{
    justify-content:flex-start!important;
  }
  #completionPanel .resultMorphemeTitle,
  #completionPanel .resultMorphemeTitle *,
  #lossPanel .resultMorphemeTitle,
  #lossPanel .resultMorphemeTitle *{
    font-size:clamp(18px,5vw,22px)!important;
  }
  #completionPanel .resultMorphemeDefinition,
  #lossPanel .resultMorphemeDefinition{
    font-size:clamp(15px,4.2vw,18px)!important;
  }
}

/* v1.0 Sprint 1.6.2 — wrap result tiles inside the modal width */
#completionPanel .resultMorphemes,
#lossPanel .resultMorphemes{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
  gap:14px!important;
  padding-inline:0!important;
  margin-inline:auto!important;
}

#completionPanel .resultMorpheme,
#lossPanel .resultMorpheme{
  flex:1 1 190px!important;
  width:auto!important;
  min-width:0!important;
  max-width:280px!important;
  box-sizing:border-box!important;
}

#completionPanel .resultMorphemeDefinition,
#lossPanel .resultMorphemeDefinition{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  max-width:100%!important;
}

@media(max-width:760px){
  #completionPanel .resultMorphemes,
  #lossPanel .resultMorphemes{
    gap:12px!important;
    padding-inline:0!important;
  }

  #completionPanel .resultMorpheme,
  #lossPanel .resultMorpheme{
    flex:0 1 calc(50% - 6px)!important;
    width:calc(50% - 6px)!important;
    max-width:calc(50% - 6px)!important;
    min-width:0!important;
  }
}

@media(max-width:430px){
  #completionPanel .resultMorpheme,
  #lossPanel .resultMorpheme{
    flex-basis:100%!important;
    width:100%!important;
    max-width:100%!important;
  }
}


/* v1.0 Sprint 1.6.3 — keep result words on one line */
#completionPanel .result-word,
#lossPanel .result-word{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-overflow:clip!important;
  box-sizing:border-box!important;
}


/* v1.0 Sprint 1.6.5 — smaller consistent result-word scale with safety fitting */
#completionPanel .result-word,
#lossPanel .result-word{
  font-size:46px;
  line-height:1;
  letter-spacing:-.02em;
  margin:.15rem 0 .75rem;
}
@media (min-width:600px) and (max-width:899px){
  #completionPanel .result-word,
  #lossPanel .result-word{font-size:36px;}
}
@media (max-width:599px){
  #completionPanel .result-word,
  #lossPanel .result-word{font-size:28px;}
}


/* v1.0 Sprint 1.6.6 — mobile-first 25% result-content reduction
   Whole-word definitions intentionally retain their previous size. */
#completionPanel .bonusTitle,
#lossPanel .lossTitle{
  font-size:clamp(20px,3.15vw,36px)!important;
  margin-bottom:8px!important;
}

#completionPanel .result-word,
#lossPanel .result-word{
  font-size:35px;
  margin:.1rem 0 .55rem!important;
}

#completionPanel .resultMorphemes,
#lossPanel .resultMorphemes{
  gap:10px!important;
  margin:25px auto 23px!important;
}

#completionPanel .resultMorpheme,
#lossPanel .resultMorpheme{
  flex-basis:143px!important;
  max-width:210px!important;
  min-height:95px!important;
  padding:16px 18px!important;
  border-radius:15px!important;
}

#completionPanel .resultMorphemeTitle,
#completionPanel .resultMorphemeTitle *,
#lossPanel .resultMorphemeTitle,
#lossPanel .resultMorphemeTitle *{
  font-size:clamp(14px,1.35vw,18px)!important;
  margin-bottom:7px!important;
}

#completionPanel .resultMorphemeDefinition,
#lossPanel .resultMorphemeDefinition{
  font-size:clamp(12px,1.16vw,16px)!important;
  line-height:1.25!important;
}

#completionPanel #nextBtn,
#lossPanel .resultActions button{
  min-height:48px!important;
  padding:12px 26px!important;
  font-size:clamp(16px,2.25vw,24px)!important;
}

@media (min-width:600px) and (max-width:899px){
  #completionPanel .result-word,
  #lossPanel .result-word{font-size:27px;}
}

@media(max-width:599px){
  #completionPanel .resultCard,
  #lossPanel .resultCard{
    padding:20px 11px 21px!important;
  }

  #completionPanel .bonusTitle,
  #lossPanel .lossTitle{
    font-size:clamp(17px,5.25vw,24px)!important;
  }

  #completionPanel .result-word,
  #lossPanel .result-word{
    font-size:21px;
  }

  /* Definition remains at the established mobile size. */
  #completionPanel .wholeDefinition,
  #lossPanel .wholeDefinition{
    font-size:clamp(16px,4.7vw,21px)!important;
  }

  #completionPanel .resultMorphemes,
  #lossPanel .resultMorphemes{
    gap:8px!important;
    margin:18px auto 17px!important;
  }

  #completionPanel .resultMorpheme,
  #lossPanel .resultMorpheme{
    flex:0 1 calc(50% - 4px)!important;
    width:calc(50% - 4px)!important;
    max-width:calc(50% - 4px)!important;
    min-height:81px!important;
    padding:13px 12px!important;
    border-radius:13px!important;
  }

  #completionPanel .resultMorphemeTitle,
  #completionPanel .resultMorphemeTitle *,
  #lossPanel .resultMorphemeTitle,
  #lossPanel .resultMorphemeTitle *{
    font-size:clamp(14px,3.75vw,17px)!important;
  }

  #completionPanel .resultMorphemeDefinition,
  #lossPanel .resultMorphemeDefinition{
    font-size:clamp(12px,3.15vw,14px)!important;
  }

  #completionPanel #nextBtn,
  #lossPanel .resultActions button{
    min-height:44px!important;
    padding:10px 18px!important;
    font-size:clamp(15px,4.35vw,18px)!important;
  }
}

@media(max-width:430px){
  #completionPanel .resultMorpheme,
  #lossPanel .resultMorpheme{
    flex-basis:calc(50% - 4px)!important;
    width:calc(50% - 4px)!important;
    max-width:calc(50% - 4px)!important;
  }
}


/* v1.0 Sprint 1.6.7 — authoritative fixed result sizing
   This final block intentionally overrides legacy result-screen patches. */
#completionPanel .resultCard #completedWord.result-word,
#lossPanel .resultCard #missedWord.result-word{
  font-size:28px!important;
  line-height:1!important;
  letter-spacing:-.015em!important;
  white-space:nowrap!important;
  overflow:visible!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  margin:4px 0 12px!important;
}

#completionPanel .resultCard .bonusTitle,
#lossPanel .resultCard .lossTitle{
  font-size:20px!important;
  line-height:1.1!important;
  margin:0 0 8px!important;
}

#completionPanel .resultCard .wholeDefinition,
#lossPanel .resultCard .wholeDefinition{
  /* Whole-word definition intentionally remains unchanged. */
}

#completionPanel .resultCard .resultMorphemes,
#lossPanel .resultCard .resultMorphemes{
  gap:8px!important;
  margin:16px auto!important;
}

#completionPanel .resultCard .resultMorpheme,
#lossPanel .resultCard .resultMorpheme{
  min-height:78px!important;
  padding:11px 10px!important;
  border-radius:12px!important;
}

#completionPanel .resultCard .resultMorphemeTitle,
#completionPanel .resultCard .resultMorphemeTitle *,
#lossPanel .resultCard .resultMorphemeTitle,
#lossPanel .resultCard .resultMorphemeTitle *{
  font-size:16px!important;
  line-height:1.05!important;
  margin-bottom:6px!important;
}

#completionPanel .resultCard .resultMorphemeDefinition,
#lossPanel .resultCard .resultMorphemeDefinition{
  font-size:13px!important;
  line-height:1.2!important;
}

#completionPanel .resultCard #nextBtn,
#lossPanel .resultCard .resultActions button{
  min-height:42px!important;
  padding:9px 18px!important;
  font-size:17px!important;
}

@media (min-width:700px){
  #completionPanel .resultCard #completedWord.result-word,
  #lossPanel .resultCard #missedWord.result-word{
    font-size:32px!important;
  }
}


/* v0.9.1 — entry flow */
body.entry-active .app{visibility:hidden;pointer-events:none}
#entryFlow{position:fixed;inset:0;z-index:470;display:none;align-items:center;justify-content:center;padding:24px;background:linear-gradient(rgba(5,14,27,.93),rgba(5,14,27,.97)),url("../assets/background.png") center/cover no-repeat}
#entryFlow.show{display:flex}
.entryScreen{width:100%;display:flex;align-items:center;justify-content:center}
.entryCard{width:min(90vw,460px);padding:30px 26px 28px;border-radius:24px;background:rgba(8,22,41,.94);border:1px solid rgba(255,255,255,.16);box-shadow:0 28px 80px rgba(0,0,0,.56);text-align:center}
.entryLogo{display:block;width:min(78%,330px);height:auto;margin:0 auto 8px}
.entryLogoSmall{width:min(64%,270px);margin-bottom:8px}
.entryCard h1{margin:2px 0 8px;font-size:clamp(18px,4vw,25px);letter-spacing:.13em;color:var(--accent)}
.entryLead{margin:0 0 22px;color:#d6e0ed;font-size:15px}
.entryCard button{display:block;width:100%;margin:11px 0 0;padding:14px 17px;border-radius:13px;font:inherit;font-weight:900;letter-spacing:.045em;cursor:pointer}
.entryPrimary{border:1px solid rgba(255,255,255,.1);background:var(--accent);color:#101010;box-shadow:0 10px 25px rgba(0,0,0,.24)}
.entrySecondary{border:1px solid rgba(255,255,255,.28);background:#fff;color:#1768aa}
.entryTextButton{border:0!important;background:transparent!important;color:#b9c9dc!important;box-shadow:none!important;font-size:13px}
.entryChoice{text-align:left}
.entryChoice strong,.entryChoice span{display:block}
.entryChoice span{margin-top:4px;font-size:12px;font-weight:650;letter-spacing:0;color:inherit;opacity:.76}
.entryNotice,.betaModeNote{margin:14px 0 0;color:#b9c9dc;font-size:12px;line-height:1.4}
.dailyRules{margin:18px 0 20px;padding:15px 17px;border-radius:15px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);text-align:left;color:#edf3fa}
.dailyRules p{margin:7px 0;line-height:1.35}
.dailyRules p:first-child{color:var(--accent)}
@media(max-width:620px){
  #entryFlow{padding:18px}
  .entryCard{width:min(92vw,430px);padding:23px 19px 22px}
  .entryCard button{padding:13px 14px}
}


/* v0.9.3 — authoritative destination flow */
[hidden]{display:none!important}
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

#entryFlow{
  display:none;
  position:fixed;
  inset:0;
  z-index:470;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow:auto;
  background:
    linear-gradient(rgba(5,14,27,.94),rgba(5,14,27,.98)),
    url("../assets/background.png") center/cover no-repeat;
}
#entryFlow.show{display:flex}
.entryScreen{width:100%;min-height:100%;align-items:center;justify-content:center}
.entryScreen:not([hidden]){display:flex!important}

.identityCard{
  width:min(88vw,430px);
  padding:26px 25px 24px;
}
.identityCard .entryLogo{
  width:min(74%,310px);
  margin-bottom:4px;
}
.entryVersion{
  margin:2px 0 20px;
  color:#9fb0c6;
  font-size:11px;
  font-weight:750;
  letter-spacing:.13em;
}
.guestButton{
  margin-top:14px!important;
  font-size:14px!important;
}

.destinationShell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(180px,1.16fr);
  align-items:center;
  gap:clamp(22px,5vw,72px);
  width:min(92vw,850px);
  min-height:min(72vh,620px);
  padding:38px 24px 64px;
}
.destinationTile{
  border:0;
  background:transparent;
  color:#fff;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.destinationTile strong{
  display:block;
  margin-top:18px;
  color:#fff;
  font-size:clamp(17px,2.3vw,23px);
  letter-spacing:.07em;
}
.tileSubtitle{
  display:block;
  margin-top:5px;
  color:#9fb0c6;
  font-size:12px;
  font-weight:650;
}
.workshopTile{
  justify-self:end;
  width:min(100%,300px);
  opacity:.92;
}
.dailyTile{
  justify-self:start;
  width:min(100%,360px);
  transform:translateX(clamp(-18px,-2vw,-6px));
}
.fanCards{
  position:relative;
  display:block;
  width:190px;
  height:190px;
  margin:0 auto;
}
.navCard{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:116px;
  height:164px;
  border-radius:18px;
  border:4px solid rgba(255,255,255,.92);
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(0,0,0,.12)),
    repeating-linear-gradient(135deg,#176db2 0 10px,#12609e 10px 20px);
  box-shadow:0 16px 32px rgba(0,0,0,.34);
}
.navCard img{
  width:48%;
  height:auto;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.25));
}
.fanOne{left:18px;top:13px;transform:rotate(-18deg)}
.fanTwo{left:37px;top:7px;transform:rotate(-8deg)}
.fanThree{left:55px;top:7px;transform:rotate(7deg)}
.fanFour{left:72px;top:14px;transform:rotate(18deg)}
.dailyNavCard{
  position:relative;
  width:164px;
  height:230px;
  margin:0 auto;
  border-radius:23px;
  transform:rotate(2deg);
  box-shadow:0 24px 55px rgba(0,0,0,.43);
  animation:dailyBreathe 3.2s ease-in-out infinite;
}
.dailyNavCard img{width:52%}
@keyframes dailyBreathe{
  0%,100%{transform:rotate(2deg) translateY(0) scale(1)}
  50%{transform:rotate(2deg) translateY(-5px) scale(1.025)}
}
.destinationBack{
  position:absolute;
  left:50%;
  bottom:4px;
  width:auto!important;
  transform:translateX(-50%);
  padding:10px 22px!important;
}

.workshopPreviewCard{
  width:min(92vw,500px);
  padding:25px 22px 24px;
  text-align:left;
}
.workshopPreviewCard h1{
  margin:0;
  text-align:center;
}
.workshopGuestLabel{
  margin:4px 0 16px;
  text-align:center;
  color:#9fb0c6;
  font-size:12px;
  font-weight:750;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.workshopFeature{
  position:relative;
  margin:8px 0;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
}
.workshopFeature strong,
.workshopFeature span{display:block}
.workshopFeature strong{
  color:#fff;
  font-size:14px;
  letter-spacing:.04em;
}
.workshopFeature span{
  margin-top:3px;
  color:#aebed0;
  font-size:12px;
}
.availableFeature{
  background:rgba(244,174,38,.11);
  border-color:rgba(244,174,38,.48);
}
.availableFeature strong{color:var(--accent)}
.lockedFeature{
  opacity:.38;
  background:rgba(255,255,255,.025);
}
.lockedFeature::after{
  content:"FULL ACCOUNT";
  position:absolute;
  right:12px;
  top:11px;
  color:#b9c5d5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
.workshopPreviewCard .entryPrimary,
.workshopPreviewCard .entrySecondary{
  text-align:center;
}

@media(max-width:680px){
  #entryFlow{padding:12px}
  .destinationShell{
    grid-template-columns:1fr 1.08fr;
    gap:9px;
    width:100%;
    min-height:82vh;
    padding:26px 6px 58px;
  }
  .fanCards{width:144px;height:155px}
  .navCard{width:88px;height:126px;border-radius:14px;border-width:3px}
  .fanOne{left:8px;top:15px}
  .fanTwo{left:23px;top:7px}
  .fanThree{left:38px;top:7px}
  .fanFour{left:52px;top:15px}
  .dailyNavCard{width:126px;height:180px}
  .dailyTile{transform:translateX(-5px)}
  .destinationTile strong{margin-top:12px;font-size:15px}
  .tileSubtitle{font-size:10px}
  .workshopPreviewCard{padding:20px 16px}
  .workshopFeature{padding:11px 12px}
  .lockedFeature::after{font-size:8px}
}


/* v0.9.4 — single-screen home and member Workshop routing */
[hidden]{display:none!important}
#entryFlow{
  display:none;
  position:fixed;
  inset:0;
  z-index:470;
  align-items:center;
  justify-content:center;
  padding:16px;
  overflow:auto;
  background:
    linear-gradient(rgba(5,14,27,.94),rgba(5,14,27,.98)),
    url("../assets/background.png") center/cover no-repeat;
}
#entryFlow.show{display:flex}
.entryScreen{width:100%;min-height:100%;align-items:center;justify-content:center}
.entryScreen:not([hidden]){display:flex!important}

.homeShell{
  width:min(94vw,820px);
  min-height:min(90vh,760px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px 18px;
}
.homeHeroLogo{
  display:block;
  width:min(55vw,390px);
  max-height:190px;
  object-fit:contain;
  margin:0 auto 22px;
}
.homeDestinations{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:clamp(24px,6vw,88px);
  width:min(100%,650px);
}
.homeDestination{
  border:0;
  background:transparent;
  color:#fff;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease;
}
.homeDestination:active{transform:scale(.98)}
.homeDestination strong{
  display:block;
  margin-top:17px;
  color:#fff;
  font-size:clamp(17px,2.4vw,23px);
  letter-spacing:.07em;
}
.workshopDestination{justify-self:end;width:min(100%,280px)}
.dailyDestination{
  justify-self:start;
  width:min(100%,300px);
  transform:translateX(clamp(-12px,-1.5vw,-4px));
}
.dailyDestination:active{transform:translateX(clamp(-12px,-1.5vw,-4px)) scale(.98)}

.fanCards{
  position:relative;
  display:block;
  width:190px;
  height:190px;
  margin:0 auto;
}
.navCard{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:116px;
  height:164px;
  border-radius:18px;
  border:4px solid rgba(255,255,255,.92);
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(0,0,0,.12)),
    repeating-linear-gradient(135deg,#176db2 0 10px,#12609e 10px 20px);
  box-shadow:0 16px 32px rgba(0,0,0,.34);
}
.navCard img{width:48%;height:auto;filter:drop-shadow(0 5px 4px rgba(0,0,0,.25))}
.fanOne{left:18px;top:13px;transform:rotate(-18deg)}
.fanTwo{left:37px;top:7px;transform:rotate(-8deg)}
.fanThree{left:55px;top:7px;transform:rotate(7deg)}
.fanFour{left:72px;top:14px;transform:rotate(18deg)}
.dailyNavCard{
  position:relative;
  width:126px;
  height:178px;
  margin:0 auto;
  border-radius:19px;
  transform:none;
  animation:none!important;
  box-shadow:0 18px 38px rgba(0,0,0,.38);
}
.dailyNavCard img{width:50%}

.outlinedSignIn{
  display:block;
  width:min(220px,58vw);
  margin:35px auto 0;
  padding:11px 18px;
  border:1.5px solid rgba(255,255,255,.7);
  border-radius:12px;
  background:transparent;
  color:#fff;
  font:inherit;
  font-weight:850;
  letter-spacing:.07em;
  cursor:pointer;
}
.outlinedSignIn:hover,
.outlinedSignIn:focus-visible{background:rgba(255,255,255,.1)}
.homeShell .entryVersion{margin:15px 0 0}
.homeShell .entryNotice{text-align:center}

.memberWorkshop{
  width:min(94vw,720px);
  min-height:min(90vh,760px);
  padding:28px 25px 24px;
  border-radius:24px;
  background:rgba(8,22,41,.95);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 28px 80px rgba(0,0,0,.5);
}
.memberHeader{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}
.memberBadge{
  width:92px;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.memberBadge img{max-width:100%;max-height:100%;object-fit:contain}
.memberWelcome{
  margin:0 0 3px;
  color:#9fb0c6;
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
}
.memberHeader h1{margin:0;color:#fff;font-size:clamp(24px,4vw,34px);letter-spacing:.06em}
.memberDailyBanner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:18px 20px;
  border:0;
  border-radius:15px;
  background:var(--accent);
  color:#101010;
  cursor:pointer;
  text-align:left;
}
.memberDailyBanner small,
.memberDailyBanner strong{display:block}
.memberDailyBanner small{font-size:10px;letter-spacing:.1em}
.memberDailyBanner strong{margin-top:2px;font-size:20px;letter-spacing:.05em}
.memberDailyBanner b{font-size:15px}
.quickStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:15px 0;
}
.quickStats div{
  padding:13px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  text-align:center;
}
.quickStats strong,.quickStats span{display:block}
.quickStats strong{color:#fff;font-size:15px}
.quickStats span{margin-top:4px;color:#9fb0c6;font-size:10px}
.memberTools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.memberTools button{
  min-height:82px;
  padding:14px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:#fff;
  text-align:left;
  cursor:pointer;
}
.memberTools button:disabled{opacity:.35;cursor:default}
.memberTools strong,.memberTools span{display:block}
.memberTools strong{font-size:14px;letter-spacing:.04em}
.memberTools span{margin-top:4px;color:#aebed0;font-size:11px}
.memberSignOut{margin:16px auto 0!important;width:auto!important}

@media(max-width:680px){
  .homeShell{min-height:94vh;padding:12px 4px}
  .homeHeroLogo{width:min(70vw,320px);margin-bottom:18px}
  .homeDestinations{gap:8px;width:100%}
  .fanCards{width:145px;height:152px}
  .navCard{width:88px;height:126px;border-radius:14px;border-width:3px}
  .fanOne{left:7px;top:14px}
  .fanTwo{left:22px;top:7px}
  .fanThree{left:37px;top:7px}
  .fanFour{left:52px;top:14px}
  .dailyNavCard{width:98px;height:140px;border-radius:15px}
  .homeDestination strong{margin-top:11px;font-size:15px}
  .outlinedSignIn{margin-top:29px}
  .memberWorkshop{padding:21px 16px}
  .memberBadge{width:72px;height:72px}
  .memberTools{grid-template-columns:1fr}
  .quickStats{gap:6px}
  .quickStats div{padding:11px 6px}
}


/* v0.9.5 — timer and pointer stability */
#gameTimer{
  width:7ch!important;
  min-width:7ch!important;
  box-sizing:content-box!important;
  justify-content:flex-start!important;
  text-align:left!important;
  white-space:nowrap!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  font-feature-settings:"tnum" 1,"lnum" 1!important;
  letter-spacing:0!important;
}
#card,
#cardHolder{
  touch-action:none!important;
  -webkit-user-drag:none;
}
#cardHolder.dragging{
  cursor:grabbing;
}


/* v0.9.5a master repair */
#card{
  pointer-events:auto!important;
  touch-action:none!important;
  cursor:grab;
}
#card:active,
#cardHolder.dragging #card{cursor:grabbing}
#gameTimer{
  direction:ltr!important;
  unicode-bidi:isolate!important;
}


/* v0.9.5b — click repair
   Prevent the quick-guide overlay from invisibly blocking the game. */
#guideOverlay{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
#guideOverlay.hidden{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#entryFlow:not(.show){
  display:none!important;
  pointer-events:none!important;
}
.app[aria-hidden="false"]{
  visibility:visible!important;
  pointer-events:auto!important;
}


/* v0.9.6 — Daily Slice engine */
#dailyProgress{
  position:absolute;
  z-index:52;
  top:13px;
  left:50%;
  display:flex;
  gap:8px;
  transform:translateX(-50%);
  pointer-events:none;
}
.dailyDot{
  display:inline-block;
  width:12px;
  height:12px;
  box-sizing:border-box;
  border:2px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:transparent;
  box-shadow:0 2px 5px rgba(0,0,0,.24);
}
.dailyDot.current{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(244,174,38,.18);
}
.dailyDot.perfect{
  border-color:#40d879;
  background:#40d879;
}
.dailyDot.complete{
  border-color:#f4ae26;
  background:#f4ae26;
}
.dailyDot.failed{
  border-color:#ef5b5b;
  background:#ef5b5b;
}
.dailyEndCard{
  text-align:center;
}
.dailyEndCard h2{
  margin:8px 0 12px;
  color:#fff;
  font-size:clamp(22px,5vw,34px);
}
#dailyEndSummary{
  color:#d6e0ed;
  line-height:1.45;
}
.dailyEndDots{
  display:flex;
  justify-content:center;
  gap:9px;
  margin:22px auto 24px;
}
#guideOverlay.dailyGuide.dailyGuideEnter{
  animation:dailyGuideSlideIn .28s cubic-bezier(.2,.84,.32,1) both;
}
@keyframes dailyGuideSlideIn{
  from{transform:translateX(105vw)}
  to{transform:translateX(0)}
}
@media(max-width:680px){
  #dailyProgress{top:10px;gap:6px}
  .dailyDot{width:10px;height:10px;border-width:1.5px}
  .dailyEndDots{gap:7px}
}


/* v0.9.7 — slower portrait intro, centered result card, logo and share */
#guideOverlay.dailyGuide.dailyGuideEnter{
  animation:dailyGuideSlideInLandscape .42s cubic-bezier(.2,.82,.3,1) both;
}
#guideOverlay.dailyGuide.dailyGuideEnter.portraitEntry{
  animation:dailyGuideSlideInPortrait .66s cubic-bezier(.18,.78,.28,1) both;
}
@keyframes dailyGuideSlideInLandscape{
  from{transform:translateX(100vw)}
  to{transform:translateX(0)}
}
@keyframes dailyGuideSlideInPortrait{
  0%{transform:translateX(115vw)}
  72%{transform:translateX(-2.5vw)}
  100%{transform:translateX(0)}
}

#dailyEndPanel{
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
}
#dailyEndPanel .resultCard{
  margin:auto!important;
}
.dailyEndCard{
  width:min(92vw,520px);
  max-height:min(88vh,760px);
  overflow:auto;
  text-align:center;
}
.dailyEndLogo{
  display:block;
  width:min(72%,320px);
  height:auto;
  margin:0 auto 8px;
}
.dailyEndCard .resultActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
#dailyShareBtn{
  grid-column:1/-1;
  background:var(--accent);
  color:#101010;
  border-color:transparent;
}
@media(max-width:680px){
  #dailyEndPanel{
    min-height:100dvh!important;
    padding:16px!important;
  }
  .dailyEndCard{
    width:min(94vw,500px);
    max-height:90dvh;
    padding:22px 18px;
  }
  .dailyEndLogo{width:min(76%,290px)}
}


/* v0.9.8 — Workshop and review flow */
.modeLabel{
  position:absolute;
  top:118px;
  left:50%;
  z-index:31;
  transform:translateX(-50%);
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  white-space:nowrap;
}
.modeLabel.practiceModeLabel{color:#65aee8}

.cardsCountChip{
  width:42px!important;height:42px!important;min-width:42px!important;
  display:flex!important;align-items:center;justify-content:center;
  margin:5px auto 0!important;border-radius:50%!important;
  border:2px solid rgba(255,255,255,.72)!important;
  background:rgba(7,22,41,.92)!important;color:#fff!important;
  font-size:18px!important;font-weight:900!important;line-height:1!important;
}

.workshopPreviewCard{position:relative;margin-top:58px;overflow:visible!important}
.workshopTopDecor{position:absolute;left:18px;right:18px;top:-66px;height:100px;pointer-events:none}
.workshopDecorCard{
  position:absolute;left:4px;top:8px;width:72px;height:100px;border-radius:13px;
  border:3px solid #fff;background:repeating-linear-gradient(135deg,#176db2 0 9px,#12609e 9px 18px);
  box-shadow:0 13px 27px rgba(0,0,0,.35);transform:rotate(-11deg);
  display:flex;align-items:center;justify-content:center
}
.workshopDecorCard img{width:46%}
.workshopDecorBadge{
  position:absolute;right:0;top:0;width:98px;height:98px;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 13px 18px rgba(0,0,0,.35))
}
.workshopDecorBadge img{max-width:100%;max-height:100%;object-fit:contain}

.dailyReviewCard{width:min(92vw,610px);max-height:88vh;overflow:auto;text-align:center}
.dailyReviewLogo{width:min(70%,300px);height:auto;display:block;margin:0 auto 4px}
.dailyReviewList{display:flex;flex-direction:column;gap:10px;margin:18px 0 22px}
.sliceReviewRow{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;
  padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.055);
  opacity:0;animation:dealSliceRow .28s ease forwards
}
@keyframes dealSliceRow{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.sliceChunkButton{
  border:0!important;background:transparent!important;color:#fff!important;
  padding:3px 2px!important;font-size:clamp(17px,4vw,23px)!important;
  font-weight:900!important;letter-spacing:.025em!important;cursor:pointer
}
.sliceDivider{color:var(--accent);font-size:clamp(18px,4vw,24px);font-weight:900}
.morphemeDetailCard{width:min(86vw,380px);text-align:center}
.morphemeDetailCard h2{margin:0 0 10px;color:var(--accent);font-size:30px}
.morphemeDetailCard p{margin:0 0 20px;color:#fff;font-size:18px}

@media(max-width:680px){
  .modeLabel{top:102px;font-size:10px}
  .cardsCountChip{width:36px!important;height:36px!important;min-width:36px!important;font-size:16px!important}
  .workshopDecorCard{width:62px;height:88px}
  .workshopDecorBadge{width:84px;height:84px}
}


/* v0.9.9 — Workshop identity and review polish */

/* Workshop entrance */
#dailyEndPanel.leavingForWorkshop .dailyEndCard{
  animation:resultsExitLeft .28s ease-in forwards;
}
@keyframes resultsExitLeft{
  from{transform:translateX(0);opacity:1}
  to{transform:translateX(-105vw);opacity:.18}
}
#entryFlow.workshopTransition #workshopPreviewScreen .workshopPreviewCard{
  animation:workshopEnterRight .32s cubic-bezier(.2,.84,.28,1) both;
}
@keyframes workshopEnterRight{
  from{transform:translateX(105vw);opacity:.2}
  to{transform:translateX(0);opacity:1}
}

/* Workshop header depth */
.workshopPreviewCard{
  margin-top:84px!important;
}
.workshopTopDecor{
  top:-58px!important;
  height:138px!important;
}
.workshopDecorCard{
  left:-2px!important;
  top:20px!important;
  width:108px!important;
  height:150px!important;
  border-radius:17px!important;
  transform:rotate(-11deg);
  animation:apprenticeCardIdle 6.4s ease-in-out infinite;
  transform-origin:52% 84%;
}
@keyframes apprenticeCardIdle{
  0%,78%,100%{transform:rotate(-11deg) translateY(0)}
  84%{transform:rotate(-9.6deg) translateY(-1px)}
  90%{transform:rotate(-12.1deg) translateY(0)}
  96%{transform:rotate(-11deg) translateY(0)}
}
.workshopDecorBadge{
  right:-2px!important;
  top:10px!important;
  width:92px!important;
  height:92px!important;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.92);
  background:linear-gradient(145deg,#122a49,#081729);
  box-shadow:0 14px 28px rgba(0,0,0,.38), inset 0 0 0 3px rgba(244,174,38,.13);
}
.badgeLetter{
  color:var(--accent);
  font-size:42px;
  font-weight:950;
  line-height:1;
  text-shadow:0 2px 4px rgba(0,0,0,.35);
}

/* Review page */
.dailyReviewInstruction{
  margin:10px 0 16px;
  color:#d6e0ed;
  font-size:14px;
  font-weight:750;
  letter-spacing:.02em;
}
.sliceChunkButton{
  font-size:clamp(15px,3.5vw,20px)!important;
}
.sliceDivider{
  display:inline-block;
  width:2px;
  height:1.18em;
  margin:0 .22em;
  border-radius:2px;
  background:var(--accent);
  transform:translateY(-.11em);
  align-self:center;
}

/* Morpheme detail tile */
#morphemeDetailPanel{
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
}
#morphemeDetailPanel .morphemeDetailCard{
  margin:auto!important;
  width:min(84vw,360px);
  min-height:160px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  cursor:pointer;
}
#morphemeDetailPanel.show{
  display:flex!important;
}
.morphemeDetailCard h2{
  margin:0 0 10px!important;
}
.morphemeDetailCard p{
  margin:0!important;
}
.morphemeDetailCard::after{
  content:"Tap anywhere to close";
  margin-top:18px;
  color:#92a5bb;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media(max-width:680px){
  .workshopPreviewCard{margin-top:76px!important}
  .workshopTopDecor{top:-52px!important}
  .workshopDecorCard{
    width:94px!important;
    height:132px!important;
    top:18px!important;
  }
  .workshopDecorBadge{
    width:80px!important;
    height:80px!important;
  }
  .badgeLetter{font-size:36px}
  .dailyReviewInstruction{font-size:13px}
}


/* v0.9.10 — actual deck chip, Workshop spacing, timeout polish */

/* Remove the legacy deck label completely. */
#throwDeckLabel,
.deckStat{
  display:none!important;
}

/* Reserve cards stay in their established stack; the count chip sits beneath. */
#throwDeck{
  bottom:clamp(44px,5.5vh,72px)!important;
}
#throwDeck .cardsCountChip{
  position:absolute!important;
  left:clamp(14px,2.4vw,28px)!important;
  bottom:-46px!important;
  z-index:20!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:2px solid rgba(255,255,255,.82)!important;
  border-radius:50%!important;
  background:#0b1b31!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(0,0,0,.34)!important;
  font-size:17px!important;
  font-weight:950!important;
  line-height:1!important;
}

/* Workshop card: 25% smaller than v0.9.9, higher, and inset from left edge. */
.workshopTopDecor{
  top:-66px!important;
}
.workshopDecorCard{
  left:18px!important;
  top:4px!important;
  width:81px!important;
  height:113px!important;
  border-radius:14px!important;
}
.workshopDecorCard img{
  width:44%!important;
}

/* Review meaning tile gets the same gold visual language as sliced chunks. */
#morphemeDetailPanel .morphemeDetailCard{
  border:2px solid var(--accent)!important;
  box-shadow:
    0 22px 55px rgba(0,0,0,.54),
    0 0 0 1px rgba(244,174,38,.15) inset!important;
}

/* The 20-second timeout is functional in Daily Slice only. */
#gameTimer{
  transition:border-color .15s ease,box-shadow .15s ease;
}

@media(max-width:680px){
  #throwDeck{
    bottom:58px!important;
  }
  #throwDeck .cardsCountChip{
    left:12px!important;
    bottom:-42px!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    font-size:15px!important;
  }
  .workshopTopDecor{
    top:-58px!important;
  }
  .workshopDecorCard{
    left:15px!important;
    top:2px!important;
    width:72px!important;
    height:101px!important;
  }
}


/* v0.9.11 — time reporting */
.dailyTimeReport{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:14px auto 4px;
  padding:10px 14px;
  width:max-content;
  max-width:100%;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.dailyTimeReport span{
  color:#9fb0c6;
  font-size:10px;
  font-weight:850;
  letter-spacing:.11em;
}
.dailyTimeReport strong{
  color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-variant-numeric:tabular-nums lining-nums;
  font-size:20px;
}


/* v0.9.12 — hidden Daily time, Home navigation, cohesive reserve deck */

/* Daily Slice still records time, but does not display it. */
#gameTimer.dailyHiddenTimer{
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Home button on Daily results spans full width and stays secondary. */
#dailyHomeBtn{
  grid-column:1/-1;
  background:transparent!important;
  color:#d6e0ed!important;
  border:1px solid rgba(255,255,255,.34)!important;
}

/* Reserve-card fan becomes slightly larger and visually connected to count chip. */
#throwDeck{
  transform:scale(1.08);
  transform-origin:left bottom;
}
#throwDeck .cardsCountChip{
  left:38px!important;
  bottom:-28px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  border:0!important;
  background:var(--accent)!important;
  color:#101010!important;
  box-shadow:0 8px 20px rgba(0,0,0,.38)!important;
  z-index:35!important;
}

/* Keep Workshop Home link easy to find. */
#backHomeBtn{
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:10px!important;
  padding:10px 18px!important;
  color:#fff!important;
  width:auto!important;
  margin:14px auto 0!important;
}

@media(max-width:680px){
  #throwDeck{
    transform:scale(1.06);
  }
  #throwDeck .cardsCountChip{
    left:31px!important;
    bottom:-24px!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
}


/* v0.9.13 — unified reserve deck and strict mode separation */

/* One reserve-deck layout in every mode. */
#throwDeck{
  transform:scale(1.12)!important;
  transform-origin:left bottom!important;
}
#throwDeck .cardsCountChip{
  left:45px!important;
  bottom:-10px!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border:0!important;
  background:var(--accent)!important;
  color:#101010!important;
  box-shadow:0 8px 18px rgba(0,0,0,.4)!important;
  z-index:40!important;
}

/* Daily progress must never appear in Workshop Practice. */
#dailyProgress.hidden,
#dailyProgress[aria-hidden="true"]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media(max-width:680px){
  #throwDeck{
    transform:scale(1.1)!important;
  }
  #throwDeck .cardsCountChip{
    left:38px!important;
    bottom:-8px!important;
    width:31px!important;
    height:31px!important;
    min-width:31px!important;
    font-size:14px!important;
  }
}


/* v0.9.14 — additional-card count, reserve placeholder, mode banner */

/* Count chip reports additional cards only and overlaps the reserve fan. */
#throwDeck .cardsCountChip{
  left:43px!important;
  bottom:-7px!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  font-size:14px!important;
  z-index:45!important;
}

/* When no reserve cards remain, keep visual balance with an outlined card. */
.reserveCardPlaceholder{
  display:none;
  position:absolute;
  left:8px;
  bottom:0;
  width:54px;
  height:76px;
  border:2px solid rgba(255,255,255,.65);
  border-radius:9px;
  background:transparent;
  box-sizing:border-box;
  transform:rotate(-7deg);
  z-index:8;
  opacity:.8;
}
.reserveCardPlaceholder.show{
  display:block;
}

/* Bottom banner replaces Daily timer UX with mode/status information. */
.modeStatusBanner{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:28;
  transform:translateX(-50%);
  min-width:190px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(7,22,41,.9);
  border:1px solid rgba(255,255,255,.18);
  color:#dbe7f4;
  text-align:center;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}

@media(max-width:680px){
  #throwDeck .cardsCountChip{
    left:37px!important;
    bottom:-6px!important;
    width:29px!important;
    height:29px!important;
    min-width:29px!important;
    font-size:13px!important;
  }
  .reserveCardPlaceholder{
    left:7px;
    width:48px;
    height:68px;
  }
  .modeStatusBanner{
    bottom:14px;
    min-width:170px;
    font-size:9px;
    padding:7px 12px;
  }
}


/* v0.9.15 — Practice timer position, stronger mode label, inverse bottom banner */

/* Practice timer occupies the same measurement zone used by Daily progress dots. */
#gameTimer.practiceTopTimer{
  position:absolute!important;
  top:12px!important;
  left:50%!important;
  bottom:auto!important;
  z-index:52!important;
  transform:translateX(-50%)!important;
  visibility:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:7ch!important;
  min-width:7ch!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  background:rgba(7,22,41,.9)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(0,0,0,.3)!important;
}

/* Daily progress stays in the same top measuring zone. */
#dailyProgress{
  top:15px!important;
}

/* Mode label becomes an unmistakable screen title beneath the logo. */
.modeLabel{
  top:114px!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:950!important;
  letter-spacing:.13em!important;
  text-shadow:0 3px 8px rgba(0,0,0,.48)!important;
}
.modeLabel.practiceModeLabel{
  color:#fff!important;
}

/* Inverse bottom banner adds visual balance to the dark interface. */
.modeStatusBanner{
  background:#fff!important;
  color:#0b2d52!important;
  border:1px solid rgba(255,255,255,.96)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.34)!important;
  font-weight:950!important;
}

@media(max-width:680px){
  #gameTimer.practiceTopTimer{
    top:9px!important;
    padding:6px 9px!important;
    font-size:12px!important;
  }
  #dailyProgress{
    top:11px!important;
  }
  .modeLabel{
    top:99px!important;
    font-size:12px!important;
  }
}


/* v0.9.15b — correctly positioned Training timer and full-width mode banner */

/* Footer itself is the banner: no floating pill. */
.app > footer{
  position:relative!important;
  min-height:68px!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#fff!important;
  border-top:1px solid rgba(9,35,65,.12)!important;
  color:#0b2d52!important;
  overflow:visible!important;
}

.modeStatusBanner{
  position:static!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:100%!important;
  min-width:0!important;
  min-height:68px!important;
  box-sizing:border-box!important;
  padding:0 24px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0b2d52!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:22px!important;
  font-size:15px!important;
  font-weight:650!important;
  letter-spacing:.075em!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}

.modeStatusBanner .bannerDivider{
  display:inline-block;
  width:1px;
  height:30px;
  background:rgba(11,45,82,.3);
  flex:0 0 auto;
}

/* Training timer moves into the arena, directly below the logo/header.
   It is intentionally present but low in the visual hierarchy. */
#arena > #gameTimer.practiceTopTimer{
  position:absolute!important;
  top:13px!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  z-index:54!important;
  transform:translateX(-50%)!important;
  width:auto!important;
  min-width:0!important;
  padding:2px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  visibility:visible!important;
  opacity:1!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
  line-height:1!important;
}

#arena > #gameTimer.practiceTopTimer::before{
  content:"⏱";
  display:inline-block;
  color:var(--accent);
  font-size:15px;
  line-height:1;
  filter:saturate(1.15);
}

/* Daily still uses dots in the same measurement position. */
#dailyProgress{
  top:14px!important;
}

@media(max-width:680px){
  .app > footer{
    min-height:62px!important;
  }
  .modeStatusBanner{
    min-height:62px!important;
    padding:0 12px!important;
    gap:12px!important;
    font-size:12px!important;
    font-weight:650!important;
    letter-spacing:.055em!important;
  }
  .modeStatusBanner .bannerDivider{
    height:25px;
  }
  #arena > #gameTimer.practiceTopTimer{
    top:10px!important;
    font-size:10px!important;
    gap:5px!important;
  }
  #arena > #gameTimer.practiceTopTimer::before{
    font-size:13px;
  }
  #dailyProgress{
    top:11px!important;
  }
}


/* v0.9.15d — larger centered footer content and stronger Training timer */

/* Full-width footer remains white; all mode content is centered as one unit. */
.app > footer{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

.modeStatusBanner{
  width:100%!important;
  max-width:none!important;
  min-height:72px!important;
  margin:0!important;
  padding:0 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:24px!important;
  font-size:18px!important;
  font-weight:650!important;
  letter-spacing:.055em!important;
  line-height:1.1!important;
}

.modeStatusBanner > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.modeStatusBanner .bannerDivider{
  width:1px!important;
  height:34px!important;
  margin:0 2px!important;
  background:rgba(11,45,82,.28)!important;
}

/* Training timer: yellow custom stopwatch + larger white tabular time.
   It stays just below the top header and remains secondary to the word. */
#arena > #gameTimer.practiceTopTimer{
  top:15px!important;
  gap:10px!important;
  padding:3px 0!important;
  font-size:20px!important;
  font-weight:800!important;
  letter-spacing:.025em!important;
  color:#fff!important;
  text-shadow:0 3px 9px rgba(0,0,0,.42)!important;
}

#arena > #gameTimer.practiceTopTimer::before{
  content:""!important;
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.32));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23F4AE26' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='36' r='20'/%3E%3Cpath d='M32 16V8M24 8h16M47 20l5-5M32 36V24'/%3E%3C/g%3E%3C/svg%3E")!important;
}

@media(max-width:680px){
  .app > footer{
    min-height:68px!important;
  }

  .modeStatusBanner{
    min-height:68px!important;
    padding:0 12px!important;
    gap:12px!important;
    font-size:15px!important;
    font-weight:650!important;
    letter-spacing:.04em!important;
  }

  .modeStatusBanner .bannerDivider{
    height:30px!important;
  }

  #arena > #gameTimer.practiceTopTimer{
    top:11px!important;
    gap:8px!important;
    font-size:17px!important;
  }

  #arena > #gameTimer.practiceTopTimer::before{
    width:21px!important;
    height:21px!important;
    flex-basis:21px!important;
  }
}

@media(max-width:420px){
  .modeStatusBanner{
    gap:9px!important;
    font-size:13px!important;
    letter-spacing:.025em!important;
  }

  .modeStatusBanner .bannerDivider{
    height:27px!important;
  }
}


/* v0.9.15f — Training session summary and strict session separation */
#trainingEndPanel{
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
}
.trainingEndCard{
  width:min(92vw,520px);
  text-align:center;
}
.trainingEndLogo{
  display:block;
  width:min(70%,300px);
  height:auto;
  margin:0 auto 8px;
}
.trainingEndCard h2{
  margin:7px 0 20px;
  color:#fff;
}
.trainingSummaryGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:18px 0 24px;
}
.trainingSummaryGrid > div{
  min-width:0;
  padding:15px 8px;
  border-radius:13px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.trainingSummaryGrid strong{
  display:block;
  color:var(--accent);
  font-size:clamp(20px,5vw,30px);
  font-variant-numeric:tabular-nums lining-nums;
}
.trainingSummaryGrid span{
  display:block;
  margin-top:6px;
  color:#b8c6d7;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}
.trainingEndActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
#trainingHomeBtn,
#trainingContinueBtn{
  width:100%;
  min-width:0;
}
#trainingHomeBtn{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.34);
}
#trainingContinueBtn{
  background:var(--accent);
  color:#08111f;
}
@media (max-width:480px){
  .trainingEndActions button{font-size:11px;padding-left:8px;padding-right:8px;}
}

@media(max-width:520px){
  .trainingSummaryGrid{
    gap:7px;
  }
  .trainingSummaryGrid > div{
    padding:12px 5px;
  }
  .trainingSummaryGrid span{
    font-size:8px;
  }
}


/* v0.9.15g — Training tile is the primary action */
#workshopTrainingBtn{
  width:100%;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
#workshopTrainingBtn:hover,
#workshopTrainingBtn:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
#workshopTrainingBtn:active{
  transform:translateY(0);
}
#workshopTrainingBtn h2,
#workshopTrainingBtn p{
  pointer-events:none;
}

/* Remove empty duplicate Practice prompt space. */
#lossPracticePrompt:empty{
  display:none!important;
}


/* v0.9.15h — Practice and Training are distinct Workshop paths */
.workshopAction{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  text-align:left;
  cursor:pointer;
  font:inherit;
}
.workshopAction:hover,
.workshopAction:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.workshopAction:active{
  transform:translateY(0);
}
.workshopAction strong,
.workshopAction span{
  pointer-events:none;
}

.workshopFeature{
  position:relative;
}
.workshopFeature em{
  position:absolute;
  right:18px;
  top:17px;
  color:#728197;
  font-size:9px;
  font-style:normal;
  font-weight:850;
  letter-spacing:.1em;
}

@media(max-width:520px){
  .workshopFeature em{
    right:14px;
    top:14px;
    font-size:8px;
  }
}


/* v0.10.0 — identity Workshop and badge progression prototype */
.identityWorkshopCard{
  padding-top:52px!important;
}
.workshopAccountLevel{
  margin:2px 0 20px;
  color:#c8d5e5;
  font-size:13px;
  font-weight:750;
  letter-spacing:.13em;
}
.identityBadgeButton{
  position:relative;
  width:92px;
  height:92px;
  padding:0;
  border:3px solid rgba(255,255,255,.9);
  border-radius:50%;
  background:linear-gradient(145deg,#122a49,#071526);
  box-shadow:0 14px 30px rgba(0,0,0,.38),inset 0 0 0 3px rgba(244,174,38,.12);
  color:var(--accent);
  cursor:pointer;
}
.identityWorkshopCard > .identityBadgeButton{
  position:absolute;
  right:20px;
  top:-48px;
}
.identityBadgeCore{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  color:var(--accent);
  font-size:42px;
  font-weight:900;
  line-height:1;
}
.identityBadgeStars{
  position:absolute;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  display:flex;
  gap:1px;
  padding:2px 5px;
  border-radius:999px;
  background:#0a1b30;
  white-space:nowrap;
}
.identityBadgeStars i{
  color:#536276;
  font-size:12px;
  font-style:normal;
  line-height:1;
  text-shadow:none;
}
.identityBadgeStars i.earned{
  color:var(--accent);
  text-shadow:0 0 7px rgba(244,174,38,.5);
}

.workshopTierList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.workshopTier{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:13px;
  background:rgba(255,255,255,.045);
}
.tierHeader{
  width:100%;
  min-height:66px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  text-align:left;
}
.tierHeader span,
.tierHeader strong,
.tierHeader small{
  display:block;
}
.tierHeader strong{
  font-size:16px;
  letter-spacing:.05em;
}
.tierHeader small{
  margin-top:4px;
  color:#aebed1;
  font-size:11px;
  font-weight:600;
}
.tierHeader b{
  color:var(--accent);
  font-size:17px;
}
.tierPrimaryAction{
  cursor:pointer;
  background:linear-gradient(135deg,rgba(244,174,38,.17),rgba(255,255,255,.035));
}
.tierToggle{
  cursor:pointer;
}
.tierDetails{
  padding:0 15px 15px;
  border-top:1px solid rgba(255,255,255,.09);
}
.tierDetails p{
  margin:12px 0;
  color:#c4d0df;
  font-size:12px;
  line-height:1.55;
}
.tierAction{
  width:100%;
  background:var(--accent);
  color:#101010;
}

.identityMemberHeader{
  align-items:flex-start!important;
}
.identityMemberHeader .identityBadgeButton{
  margin-left:auto;
  flex:0 0 auto;
}
.identityMemberWorkshop .memberTools{
  margin-top:18px;
}

/* Badge details */
.identityModal[hidden]{
  display:none!important;
}
.identityModal{
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,10,20,.82);
  backdrop-filter:blur(8px);
}
.identityModalCard{
  position:relative;
  width:min(90vw,430px);
  padding:28px 24px 24px;
  border:1px solid rgba(244,174,38,.58);
  border-radius:20px;
  background:linear-gradient(180deg,#102742,#071526);
  box-shadow:0 30px 80px rgba(0,0,0,.58);
  text-align:center;
}
.identityModalClose{
  position:absolute;
  right:11px;
  top:8px;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  background:transparent;
  color:#d7e2ef;
  font-size:28px;
}
.largeIdentityBadge{
  position:relative;
  width:132px;
  height:132px;
  margin:0 auto 18px;
  border:4px solid #fff;
  border-radius:50%;
  background:linear-gradient(145deg,#17375e,#071526);
  box-shadow:0 18px 38px rgba(0,0,0,.4),inset 0 0 0 4px rgba(244,174,38,.16);
}
.largeIdentityBadge .identityBadgeCore{
  font-size:58px;
}
.largeIdentityBadge .identityBadgeStars{
  bottom:8px;
  padding:3px 8px;
}
.largeIdentityBadge .identityBadgeStars i{
  font-size:16px;
}
.badgePopupCard h2,
.masterCelebrationCard h2{
  margin:0 0 14px;
  color:#fff;
  letter-spacing:.04em;
}
.badgePopupDetails{
  color:#c5d2e1;
  line-height:1.5;
}
.badgePopupDetails p{
  margin:8px 0;
}

/* Master celebration framework */
.masterCelebrationCard{
  overflow:hidden;
}
.masterGlow{
  position:absolute;
  left:50%;
  top:18px;
  width:230px;
  height:230px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(244,174,38,.28),transparent 67%);
  animation:masterGlow 1.8s ease-in-out infinite;
}
.masterBadge{
  animation:masterBadgeArrival .58s cubic-bezier(.2,.86,.3,1) both;
}
.masterCelebrationCard p{
  color:#c5d2e1;
}
.masterActions{
  display:grid;
  gap:10px;
  margin-top:22px;
}
#continueAsMasterBtn{
  background:#fff;
  color:#0b2d52;
}
#masterWordsmithBtn{
  background:var(--accent);
  color:#101010;
}
@keyframes masterGlow{
  0%,100%{opacity:.55;transform:translateX(-50%) scale(.92)}
  50%{opacity:1;transform:translateX(-50%) scale(1.05)}
}
@keyframes masterBadgeArrival{
  from{opacity:0;transform:scale(.55) rotate(-9deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}

/* Game badge shows membership and star progress. */
#rankBadge{
  position:relative;
}
#rankProgress{
  color:var(--accent)!important;
  letter-spacing:.08em;
}

body.identity-modal-open{
  overflow:hidden;
}

@media(max-width:680px){
  .identityWorkshopCard{
    padding-top:48px!important;
  }
  .identityWorkshopCard > .identityBadgeButton{
    right:15px;
    top:-42px;
  }
  .identityBadgeButton{
    width:80px;
    height:80px;
  }
  .identityBadgeCore{
    font-size:36px;
  }
  .identityBadgeStars{
    bottom:4px;
  }
}


/* v0.10.1 — Workshop identity header and icon-first Guest tools */
.workshopIdentityCard{
  position:relative;
  padding-top:54px!important;
  overflow:visible!important;
}

.workshopIdentityCard > h1{
  margin:0!important;
  text-align:center!important;
}

.workshopIdentityCard .workshopAccountLevel{
  margin:5px 0 26px!important;
  text-align:center!important;
}

/* Restore the compact circular badge treatment from the earlier Workshop. */
.workshopBadgeButton{
  position:absolute;
  right:22px;
  top:-43px;
  width:88px;
  height:88px;
  padding:0;
  border:4px solid rgba(255,255,255,.92);
  border-radius:50%;
  background:linear-gradient(145deg,#17375e,#071526);
  box-shadow:0 14px 30px rgba(0,0,0,.4),inset 0 0 0 3px rgba(244,174,38,.13);
  color:var(--accent);
  cursor:pointer;
  z-index:5;
}
.workshopBadgeCore{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:42px;
  font-weight:900;
  color:var(--accent);
}

/* Keep the upper-left branded card, but remove decorative floating. */
.workshopCornerCard{
  position:absolute;
  left:24px;
  top:-47px;
  width:88px;
  height:auto;
  border-radius:9px;
  transform:rotate(-7deg);
  filter:drop-shadow(0 13px 20px rgba(0,0,0,.42));
  z-index:4;
  animation:none!important;
}

/* Guest tools are features, not membership levels. */
.guestToolRow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0 0 22px;
  padding:0 4px 20px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.guestTool{
  min-width:0;
  padding:6px 3px;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  cursor:pointer;
}
.guestTool:hover,
.guestTool:focus-visible{
  transform:translateY(-2px);
}
.guestTool:active{
  transform:translateY(0);
}
.guestTool img{
  display:block;
  width:72px;
  height:88px;
  object-fit:contain;
  filter:drop-shadow(0 9px 13px rgba(0,0,0,.34));
}
.guestPracticeTool img{
  width:82px;
  height:88px;
  border-radius:50%;
}
.guestTool > span:last-child{
  color:#fff;
  font-size:12px;
  font-weight:850;
  letter-spacing:.075em;
  text-align:center;
}

/* Daily Slice remains first and gets the purposeful card motion. */
#guestDailySliceBtn img{
  animation:dailyCardSnap 10s ease-in-out infinite;
  transform-origin:center 72%;
}
@keyframes dailyCardSnap{
  0%,94%,100%{transform:rotate(0deg) translateY(0)}
  96%{transform:rotate(9deg) translateY(-2px)}
  98%{transform:rotate(-3deg) translateY(0)}
}

/* Stats is a neutral placeholder until final artwork is selected. */
.statsGlyph{
  width:72px;
  height:88px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:7px;
  padding:15px 13px;
  box-sizing:border-box;
  border:2px solid rgba(255,255,255,.72);
  border-radius:15px;
  background:linear-gradient(180deg,#17375e,#09182a);
  box-shadow:0 9px 13px rgba(0,0,0,.34);
}
.statsGlyph i{
  display:block;
  width:10px;
  border-radius:5px 5px 2px 2px;
  background:var(--accent);
}
.statsGlyph i:nth-child(1){height:24px}
.statsGlyph i:nth-child(2){height:43px}
.statsGlyph i:nth-child(3){height:61px}

/* Apprentice and Wordsmith are the only membership levels. */
.membershipLevels{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.membershipLevel{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.membershipHeader{
  width:100%;
  min-height:74px;
  padding:15px 18px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  text-align:left;
  cursor:pointer;
}

.membershipHeader span,
.membershipHeader strong,
.membershipHeader small{
  display:block;
}

.membershipHeader strong{
  font-size:17px;
  letter-spacing:.045em;
}

.membershipHeader small{
  margin-top:4px;
  color:#aebed1;
  font-size:11px;
  font-weight:650;
  letter-spacing:.045em;
}

.membershipHeader b{
  color:var(--accent);
  font-size:20px;
  font-weight:700;
}

.membershipDetails{
  padding:0 18px 18px;
  border-top:1px solid rgba(255,255,255,.1);
}

.membershipDetails p{
  margin:14px 0;
  color:#c5d1df;
  font-size:12px;
  line-height:1.55;
}

.membershipAction{
  width:100%;
  background:var(--accent);
  color:#101010;
}

@media(max-width:680px){
  .workshopIdentityCard{
    padding-top:48px!important;
  }
  .workshopBadgeButton{
    right:14px;
    top:-38px;
    width:78px;
    height:78px;
  }
  .workshopBadgeCore{
    font-size:36px;
  }
  .workshopCornerCard{
    left:18px;
    top:-39px;
    width:76px;
  }
  .guestToolRow{
    gap:5px;
    padding-left:0;
    padding-right:0;
  }
  .guestTool img,
  .statsGlyph{
    width:62px;
    height:76px;
  }
  .guestPracticeTool img{
    width:70px;
    height:76px;
  }
  .guestTool > span:last-child{
    font-size:10px;
    letter-spacing:.045em;
  }
  .statsGlyph{
    gap:5px;
    padding:13px 10px;
  }
  .statsGlyph i{
    width:8px;
  }
}


/* v0.10.2 — centered labels, transparent Stats icon, branded cards throughout */

/* Center every Guest tool label directly beneath its icon. */
.guestTool{
  text-align:center!important;
}
.guestTool > span:last-child{
  display:block!important;
  width:100%!important;
  margin:0 auto!important;
  text-align:center!important;
  align-self:center!important;
}

/* Give the branded Daily Slice card a thin white edge so it remains visible
   against the dark Workshop background. */
#guestDailySliceBtn img,
.workshopCornerCard{
  border:2px solid rgba(255,255,255,.9)!important;
  border-radius:10px!important;
  box-sizing:border-box!important;
}

/* Stats: three rectangular bars only, with no tile, outline, or background. */
.statsGlyph{
  width:72px!important;
  height:88px!important;
  padding:12px 9px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:8px!important;
}
.statsGlyph i{
  width:12px!important;
  border-radius:2px!important;
  background:var(--accent)!important;
  box-shadow:0 3px 8px rgba(0,0,0,.3)!important;
}
.statsGlyph i:nth-child(1){height:29px!important}
.statsGlyph i:nth-child(2){height:49px!important}
.statsGlyph i:nth-child(3){height:70px!important}

/* Home navigation cards now use the full SAYWORD! branded card artwork. */
.navCard{
  overflow:hidden!important;
  background:none!important;
}
.navCard img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:inherit!important;
}

/* Replace the generic striped gameplay card face with branded card artwork. */
.card-face{
  background:
    url("../assets/sayword-card-back.png") center/cover no-repeat!important;
  border:2px solid rgba(255,255,255,.95)!important;
  box-shadow:
    0 0 0 2px rgba(23,104,170,.75),
    0 10px 24px rgba(0,0,0,.38)!important;
}
.card-face::after{
  display:none!important;
}

/* Reserve deck uses the same branded artwork in every mode. */
.deckCard{
  background:
    url("../assets/sayword-card-back.png") center/cover no-repeat!important;
  border:2px solid rgba(255,255,255,.95)!important;
  box-shadow:
    0 0 0 2px rgba(23,104,170,.72),
    0 8px 16px rgba(0,0,0,.36)!important;
}
.deckCard::after{
  display:none!important;
}

/* The zero-reserve placeholder keeps the branded card proportions. */
.reserveCardPlaceholder{
  border:2px solid rgba(255,255,255,.68)!important;
  background:
    linear-gradient(rgba(7,21,38,.56),rgba(7,21,38,.56)),
    url("../assets/sayword-card-back.png") center/cover no-repeat!important;
  opacity:.72!important;
}

/* The active center throwing card inherits the branded face and white edge. */
#card .card-face,
.flying-card .card-face{
  background:
    url("../assets/sayword-card-back.png") center/cover no-repeat!important;
}

/* Card artwork inside home fan remains readable at small sizes. */
.navCard img,
#guestDailySliceBtn img,
.workshopCornerCard,
.card-face,
.deckCard{
  image-rendering:auto;
}

@media(max-width:680px){
  .statsGlyph{
    width:62px!important;
    height:76px!important;
    padding:10px 7px!important;
    gap:6px!important;
  }
  .statsGlyph i{
    width:10px!important;
  }
  .statsGlyph i:nth-child(1){height:25px!important}
  .statsGlyph i:nth-child(2){height:42px!important}
  .statsGlyph i:nth-child(3){height:60px!important}
}


/* v0.10.3 — precise Guest tool alignment and borderless Home */

/* Give each tool the same fixed visual column so icon and title share
   the exact same horizontal center. */
.guestToolRow{
  grid-template-columns:repeat(3,112px)!important;
  justify-content:space-evenly!important;
  align-items:start!important;
  column-gap:10px!important;
}

.guestTool{
  width:112px!important;
  min-width:112px!important;
  max-width:112px!important;
  margin:0!important;
  padding:6px 0!important;
  display:grid!important;
  grid-template-rows:92px auto!important;
  justify-items:center!important;
  align-items:center!important;
  justify-self:center!important;
}

.guestTool img,
.guestTool .statsGlyph{
  grid-row:1!important;
  justify-self:center!important;
  align-self:center!important;
  margin:0 auto!important;
}

.guestTool > span:last-child{
  grid-row:2!important;
  width:112px!important;
  min-width:112px!important;
  max-width:112px!important;
  justify-self:center!important;
  align-self:start!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1.15!important;
}

/* Home is navigation text, not a bordered action chip. */
#backHomeBtn{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:11px 18px!important;
  color:#fff!important;
}
#backHomeBtn:hover,
#backHomeBtn:focus-visible{
  background:transparent!important;
  text-decoration:underline;
  text-underline-offset:5px;
}

@media(max-width:680px){
  .guestToolRow{
    grid-template-columns:repeat(3,86px)!important;
    justify-content:space-between!important;
    column-gap:2px!important;
  }
  .guestTool{
    width:86px!important;
    min-width:86px!important;
    max-width:86px!important;
    grid-template-rows:80px auto!important;
  }
  .guestTool > span:last-child{
    width:86px!important;
    min-width:86px!important;
    max-width:86px!important;
  }
}

@media(max-width:390px){
  .guestToolRow{
    grid-template-columns:repeat(3,78px)!important;
  }
  .guestTool,
  .guestTool > span:last-child{
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
  }
}


/* v0.10.4 — empty Daily review, borderless result Home, Workshop badge only */

.dailyReviewEmpty{
  margin:34px auto 30px!important;
  padding:0 20px!important;
  color:#c8d4e2!important;
  font-size:16px!important;
  font-weight:750!important;
  letter-spacing:.055em!important;
  line-height:1.45!important;
  text-align:center!important;
}
.dailyReviewEmpty[hidden]{
  display:none!important;
}

/* Result-screen Home links are plain navigation, not outlined chips. */
#dailyHomeBtn,
#trainingHomeBtn{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  padding:11px 18px!important;
}
#dailyHomeBtn:hover,
#dailyHomeBtn:focus-visible,
#trainingHomeBtn:hover,
#trainingHomeBtn:focus-visible{
  background:transparent!important;
  text-decoration:underline!important;
  text-underline-offset:5px!important;
}

/* Workshop badge on the upper right only.
   Match the earlier reference: compact, circular, and overlapping the panel edge. */
.workshopIdentityCard > .workshopBadgeButton{
  position:absolute!important;
  top:-44px!important;
  right:22px!important;
  left:auto!important;
  bottom:auto!important;
  width:92px!important;
  height:92px!important;
  min-width:92px!important;
  min-height:92px!important;
  max-width:92px!important;
  max-height:92px!important;
  margin:0!important;
  padding:0!important;
  border:4px solid rgba(255,255,255,.94)!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#17375e 0%,#071526 100%)!important;
  box-shadow:
    0 15px 30px rgba(0,0,0,.42),
    inset 0 0 0 3px rgba(244,174,38,.14)!important;
  transform:none!important;
  overflow:hidden!important;
  z-index:30!important;
}

.workshopIdentityCard > .workshopBadgeButton .workshopBadgeCore{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  color:var(--accent)!important;
  font-size:43px!important;
  font-weight:900!important;
  line-height:1!important;
}

@media(max-width:680px){
  .workshopIdentityCard > .workshopBadgeButton{
    top:-39px!important;
    right:14px!important;
    width:80px!important;
    height:80px!important;
    min-width:80px!important;
    min-height:80px!important;
    max-width:80px!important;
    max-height:80px!important;
  }

  .workshopIdentityCard > .workshopBadgeButton .workshopBadgeCore{
    font-size:37px!important;
  }
}


/* v0.10.5 — centered Workshop badge and centered tool group */

/* Remove the now-unused upper-left decorative card completely. */
.workshopCornerCard{
  display:none!important;
}

/* Center the Guest badge above the Workshop header. */
.workshopIdentityCard > .workshopBadgeButton{
  left:50%!important;
  right:auto!important;
  top:-46px!important;
  transform:translateX(-50%)!important;
}

/* Give the header enough room for the centered badge. */
.workshopIdentityCard{
  padding-top:58px!important;
}

/* Keep the three Guest tools as one compact centered group. */
.guestToolRow{
  width:min(100%,440px)!important;
  max-width:440px!important;
  margin:0 auto 24px!important;
  padding:0 0 22px!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  justify-content:center!important;
  align-items:start!important;
  column-gap:24px!important;
}

/* Equal-width centered cells prevent the outer icons from pulling outward. */
.guestTool{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:4px 0!important;
  display:grid!important;
  grid-template-rows:88px auto!important;
  justify-items:center!important;
  align-items:center!important;
}

/* Normalize visual size so the three shortcuts read as a set. */
#guestDailySliceBtn img{
  width:64px!important;
  height:78px!important;
}
#workshopPracticeBtn img{
  width:70px!important;
  height:78px!important;
}
#guestStatsBtn .statsGlyph{
  width:62px!important;
  height:78px!important;
}

/* Ensure titles are truly centered beneath their own icons. */
.guestTool > span:last-child{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  text-align:center!important;
  justify-self:stretch!important;
  align-self:start!important;
  margin:0!important;
}

/* Slightly more breathing room before the membership sections. */
.membershipLevels{
  margin-top:2px!important;
}

@media(max-width:680px){
  .workshopIdentityCard{
    padding-top:52px!important;
  }

  .workshopIdentityCard > .workshopBadgeButton{
    top:-41px!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
  }

  .guestToolRow{
    width:min(100%,330px)!important;
    max-width:330px!important;
    column-gap:14px!important;
    padding-bottom:20px!important;
  }

  .guestTool{
    grid-template-rows:78px auto!important;
  }

  #guestDailySliceBtn img{
    width:56px!important;
    height:70px!important;
  }

  #workshopPracticeBtn img{
    width:64px!important;
    height:70px!important;
  }

  #guestStatsBtn .statsGlyph{
    width:56px!important;
    height:70px!important;
  }
}

@media(max-width:390px){
  .guestToolRow{
    width:min(100%,300px)!important;
    max-width:300px!important;
    column-gap:8px!important;
  }
}


/* v0.10.6 — true geometric centering of the complete Guest tool row */

/* The previous layout centered the grid within an inherited content track that
   sat left of the Workshop's actual midpoint. Anchor the entire group directly
   to the panel's 50% centerline instead. */
.guestToolRow{
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:440px!important;
  max-width:calc(100% - 34px)!important;
  margin-left:0!important;
  margin-right:0!important;
  justify-content:center!important;
}

/* Keep Practice—the center column—on the exact same vertical centerline as
   the Workshop badge, title, and Guest label. */
#workshopPracticeBtn{
  justify-self:center!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none!important;
}

@media(max-width:680px){
  .guestToolRow{
    width:330px!important;
    max-width:calc(100% - 20px)!important;
  }
}

@media(max-width:390px){
  .guestToolRow{
    width:300px!important;
    max-width:calc(100% - 14px)!important;
  }
}


/* v0.10.7 — exact Workshop centerline repair
   The former `left:50%` rule moved the row from its existing flow position,
   which preserved an unwanted left offset. This anchors the row's own left
   edge at the parent midpoint, then translates it back by half of its width. */
.guestToolRow{
  position:relative!important;
  left:auto!important;
  right:auto!important;

  width:min(440px, calc(100% - 34px))!important;
  max-width:none!important;

  margin-left:50%!important;
  margin-right:0!important;
  transform:translateX(-50%)!important;

  grid-template-columns:repeat(3,1fr)!important;
  justify-content:stretch!important;
}

/* The center shortcut must sit exactly on the badge/title centerline. */
#workshopPracticeBtn{
  grid-column:2!important;
  justify-self:stretch!important;
  width:100%!important;
  margin:0!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
}

/* Keep the outside shortcuts symmetrically distributed around Practice. */
#guestDailySliceBtn{
  grid-column:1!important;
}
#guestStatsBtn{
  grid-column:3!important;
}

@media(max-width:680px){
  .guestToolRow{
    width:min(330px, calc(100% - 20px))!important;
    margin-left:50%!important;
    transform:translateX(-50%)!important;
  }
}

@media(max-width:390px){
  .guestToolRow{
    width:min(300px, calc(100% - 14px))!important;
    margin-left:50%!important;
    transform:translateX(-50%)!important;
  }
}


/* v0.10.8 — absolute centerline layout
   The center shortcut is now positioned directly at 50% of the Workshop panel.
   This avoids all inherited grid/margin behavior from earlier builds. */

.guestToolRow{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  max-width:none!important;
  height:126px!important;
  margin:0 0 24px!important;
  padding:0 0 22px!important;
  transform:none!important;
  display:block!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}

.guestTool{
  position:absolute!important;
  top:0!important;
  width:112px!important;
  min-width:112px!important;
  max-width:112px!important;
  height:104px!important;
  margin:0!important;
  padding:4px 0!important;
  display:grid!important;
  grid-template-rows:82px auto!important;
  justify-items:center!important;
  align-items:center!important;
}

/* Practice is locked to the exact centerline established by badge/title. */
#workshopPracticeBtn{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}

/* Outer tools are placed symmetrically around the same centerline. */
#guestDailySliceBtn{
  left:18%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}

#guestStatsBtn{
  left:82%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}

/* Preserve centered labels under each icon. */
.guestTool > span:last-child{
  width:100%!important;
  text-align:center!important;
  justify-self:stretch!important;
  margin:0!important;
}

@media(max-width:680px){
  .guestToolRow{
    height:116px!important;
  }

  .guestTool{
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
    height:98px!important;
    grid-template-rows:76px auto!important;
  }

  #guestDailySliceBtn{left:17%!important}
  #guestStatsBtn{left:83%!important}
}

@media(max-width:390px){
  .guestTool{
    width:80px!important;
    min-width:80px!important;
    max-width:80px!important;
  }

  #guestDailySliceBtn{left:16%!important}
  #guestStatsBtn{left:84%!important}
}


/* v0.10.9 — center against the full Workshop panel, not its padded content box
   The persistent offset matched the card's horizontal padding. The badge is
   centered against the full panel, while the shortcut row was centered inside
   the narrower content area. Expand the row through both padding gutters. */

.guestToolRow{
  position:relative!important;
  left:auto!important;
  right:auto!important;

  width:calc(100% + 52px)!important;
  max-width:none!important;
  height:126px!important;

  margin-left:-26px!important;
  margin-right:-26px!important;
  margin-bottom:24px!important;

  padding:0 26px 22px!important;
  box-sizing:border-box!important;
  transform:none!important;
  display:grid!important;
  grid-template-columns:repeat(3,112px)!important;
  justify-content:space-evenly!important;
  align-items:start!important;
  column-gap:0!important;
}

/* Return tools to normal grid flow; remove all previous absolute offsets. */
.guestTool{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;

  width:112px!important;
  min-width:112px!important;
  max-width:112px!important;
  height:104px!important;

  margin:0!important;
  padding:4px 0!important;
  display:grid!important;
  grid-template-rows:82px auto!important;
  justify-items:center!important;
  align-items:center!important;
  justify-self:center!important;
}

#guestDailySliceBtn,
#workshopPracticeBtn,
#guestStatsBtn{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  grid-column:auto!important;
  justify-self:center!important;
}

/* Practice is the literal middle column of a row spanning the full panel. */
#workshopPracticeBtn{
  grid-column:2!important;
}

@media(max-width:680px){
  .guestToolRow{
    width:calc(100% + 38px)!important;
    margin-left:-19px!important;
    margin-right:-19px!important;
    padding-left:19px!important;
    padding-right:19px!important;
    grid-template-columns:repeat(3,88px)!important;
    height:116px!important;
  }

  .guestTool{
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
    height:98px!important;
    grid-template-rows:76px auto!important;
  }
}

@media(max-width:390px){
  .guestToolRow{
    grid-template-columns:repeat(3,80px)!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .guestTool{
    width:80px!important;
    min-width:80px!important;
    max-width:80px!important;
  }
}


/* v0.11.0 — clean Workshop rebuild
   This component intentionally ignores all previous Guest tool positioning rules. */

.workshopClean{
  position:relative!important;
  overflow:visible!important;
  padding:58px 28px 28px!important;
}

.workshopClean .workshopBadgeButton{
  position:absolute!important;
  top:-46px!important;
  left:50%!important;
  right:auto!important;
  width:92px!important;
  height:92px!important;
  min-width:92px!important;
  min-height:92px!important;
  max-width:92px!important;
  max-height:92px!important;
  margin:0!important;
  padding:0!important;
  transform:translateX(-50%)!important;
  border:4px solid rgba(255,255,255,.94)!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#17375e 0%,#071526 100%)!important;
  box-shadow:
    0 15px 30px rgba(0,0,0,.42),
    inset 0 0 0 3px rgba(244,174,38,.14)!important;
  z-index:10!important;
}

.workshopClean .workshopBadgeCore{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  color:var(--accent)!important;
  font-size:43px!important;
  font-weight:900!important;
  line-height:1!important;
}

.workshopHeaderBlock{
  width:100%!important;
  margin:0 0 28px!important;
  text-align:center!important;
}

.workshopHeaderBlock h1{
  margin:0!important;
  text-align:center!important;
}

.workshopHeaderBlock .workshopAccountLevel{
  margin:5px 0 0!important;
  text-align:center!important;
}

.workshopShortcutGrid{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  align-items:start!important;
  justify-items:stretch!important;
  position:static!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  height:auto!important;
  max-width:none!important;
  border:0!important;
}

.workshopShortcut{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  display:grid!important;
  grid-template-rows:112px auto!important;
  place-items:center!important;
  text-align:center!important;
  cursor:pointer!important;
}

.workshopShortcut img{
  display:block!important;
  width:104px!important;
  height:104px!important;
  margin:0 auto!important;
  object-fit:contain!important;
  justify-self:center!important;
  align-self:center!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  animation:none!important;
}

.workshopShortcut span{
  width:100%!important;
  margin:6px 0 0!important;
  padding:0!important;
  text-align:center!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:.065em!important;
  line-height:1.15!important;
}

.workshopShortcut:hover,
.workshopShortcut:focus-visible{
  transform:translateY(-2px)!important;
}

.workshopShortcut:active{
  transform:none!important;
}

.workshopDivider{
  width:100%!important;
  height:1px!important;
  margin:26px 0 20px!important;
  background:rgba(255,255,255,.14)!important;
}

.workshopClean .membershipLevels{
  margin:0!important;
}

.workshopHomeLink{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

@media(max-width:680px){
  .workshopClean{
    padding:52px 20px 24px!important;
  }

  .workshopClean .workshopBadgeButton{
    top:-41px!important;
    width:80px!important;
    height:80px!important;
    min-width:80px!important;
    min-height:80px!important;
    max-width:80px!important;
    max-height:80px!important;
  }

  .workshopClean .workshopBadgeCore{
    font-size:37px!important;
  }

  .workshopShortcutGrid{
    gap:12px!important;
  }

  .workshopShortcut{
    grid-template-rows:92px auto!important;
  }

  .workshopShortcut img{
    width:88px!important;
    height:88px!important;
  }

  .workshopShortcut span{
    font-size:10px!important;
    letter-spacing:.045em!important;
  }
}

@media(max-width:390px){
  .workshopClean{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .workshopShortcutGrid{
    gap:6px!important;
  }

  .workshopShortcut{
    grid-template-rows:82px auto!important;
  }

  .workshopShortcut img{
    width:78px!important;
    height:78px!important;
  }
}


/* v0.11.1 — normalize perceived icon size and remove accidental card frame */

/* Use one shared canvas, then adjust only the artwork scale inside it. */
.workshopClean .workshopShortcut{
  grid-template-rows:112px auto!important;
}

.workshopClean .workshopShortcut img{
  width:96px!important;
  height:96px!important;
  object-fit:contain!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  filter:none!important;
}

/* Daily Slice: no generated white card frame. */
.workshopClean #guestDailySliceBtn img{
  width:104px!important;
  height:104px!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  transform:scale(1.04)!important;
}

/* Practice artwork has more transparent margin, so enlarge it slightly. */
.workshopClean #workshopPracticeBtn img{
  width:100px!important;
  height:100px!important;
  transform:scale(1.08)!important;
}

/* Stats artwork carries more visual weight, so reduce it slightly. */
.workshopClean #guestStatsBtn img{
  width:92px!important;
  height:92px!important;
  transform:scale(.94)!important;
}

/* Prevent older Daily Slice icon rules from reintroducing a border. */
.workshopClean #guestDailySliceBtn img,
.workshopClean #guestDailySliceBtn img:hover,
.workshopClean #guestDailySliceBtn img:focus{
  border:none!important;
  outline:none!important;
  box-shadow:none!important;
}

@media(max-width:680px){
  .workshopClean .workshopShortcut{
    grid-template-rows:96px auto!important;
  }

  .workshopClean #guestDailySliceBtn img{
    width:90px!important;
    height:90px!important;
  }

  .workshopClean #workshopPracticeBtn img{
    width:86px!important;
    height:86px!important;
  }

  .workshopClean #guestStatsBtn img{
    width:80px!important;
    height:80px!important;
  }
}

@media(max-width:390px){
  .workshopClean .workshopShortcut{
    grid-template-rows:88px auto!important;
  }

  .workshopClean #guestDailySliceBtn img{
    width:82px!important;
    height:82px!important;
  }

  .workshopClean #workshopPracticeBtn img{
    width:80px!important;
    height:80px!important;
  }

  .workshopClean #guestStatsBtn img{
    width:74px!important;
    height:74px!important;
  }
}


/* v0.11.2 – final Workshop polish */
.workshopClean #guestStatsBtn img{
  width:104px !important;
  height:104px !important;
  transform:scale(1.02) !important;
}
@media(max-width:680px){
  .workshopClean #guestStatsBtn img{
    width:90px !important;
    height:90px !important;
  }
}
@media(max-width:390px){
  .workshopClean #guestStatsBtn img{
    width:84px !important;
    height:84px !important;
  }
}


/* v0.12.0 — branded Stats overlay */
.statsOverlay[hidden]{
  display:none!important;
}

.statsOverlay{
  position:fixed;
  inset:0;
  z-index:700;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow:auto;
  background:rgba(2,9,18,.9);
  backdrop-filter:blur(9px);
}

.statsReport{
  width:min(94vw,620px);
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:24px 26px 20px;
  border:1px solid rgba(244,174,38,.5);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(36,92,145,.28),transparent 34%),
    linear-gradient(180deg,#102843 0%,#071525 100%);
  box-shadow:0 30px 90px rgba(0,0,0,.58);
  text-align:center;
  animation:statsReportIn .28s ease-out both;
}

.statsHeroLogo{
  display:block;
  width:min(66%,320px);
  height:auto;
  margin:0 auto 4px;
}

.statsReport > h1{
  margin:0;
  color:#fff;
  font-size:clamp(25px,5vw,36px);
  letter-spacing:.09em;
}

.statsContext{
  margin:7px 0 0;
  color:var(--accent);
  font-size:13px;
  font-weight:850;
  letter-spacing:.09em;
}

.statsDate{
  margin:5px 0 22px;
  color:#9fb0c5;
  font-size:11px;
  font-weight:650;
  letter-spacing:.045em;
}

.statsSection{
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,.13);
  text-align:left;
}

.statsSection h2{
  margin:0 0 15px;
  color:#fff;
  font-size:13px;
  font-weight:850;
  letter-spacing:.08em;
  text-align:center;
}

.statsList{
  margin:0;
}

.statsList > div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:baseline;
  padding:7px 3px;
}

.statsList dt{
  color:#b8c6d7;
  font-size:13px;
  font-weight:650;
}

.statsList dd{
  margin:0;
  color:#fff;
  font-size:14px;
  font-weight:850;
  font-variant-numeric:tabular-nums lining-nums;
  text-align:right;
}

.statsList .statsWide{
  grid-template-columns:1fr;
  gap:4px;
  text-align:center;
}

.statsList .statsWide dt,
.statsList .statsWide dd{
  text-align:center;
}

.statsList .statsWide dd{
  color:var(--accent);
  letter-spacing:.04em;
}

.statsComparison{
  text-align:center;
}

.statsComparison p{
  margin:10px 0;
  color:#d8e1eb;
  font-size:13px;
  line-height:1.4;
}

.statsLockedSection{
  opacity:.5;
  filter:saturate(.5);
}

.statsUnlockedSection{
  opacity:1;
  filter:none;
}

.statsLockHeader{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.statsLockHeader h2{
  margin:0;
}

.statsLockHeader span{
  color:var(--accent);
  font-size:13px;
}

.statsLockedSection > p{
  margin:10px auto 0;
  max-width:480px;
  color:#b8c6d7;
  font-size:12px;
  line-height:1.5;
  text-align:center;
}

.statsLockedItems{
  color:#8fa1b7!important;
}

.statsCloseHint{
  margin:18px 0 2px;
  color:#8fa1b7;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  text-align:center;
}

body.stats-open{
  overflow:hidden;
}

@keyframes statsReportIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media(max-width:680px){
  .statsOverlay{
    align-items:flex-start;
    padding:10px;
  }

  .statsReport{
    width:100%;
    max-height:calc(100vh - 20px);
    padding:20px 19px 16px;
    border-radius:18px;
  }

  .statsHeroLogo{
    width:min(72%,280px);
  }

  .statsSection{
    padding:17px 0;
  }
}


/* v0.12.1 Mobile compatibility */
html,body{
 touch-action:manipulation;
 -webkit-text-size-adjust:100%;
 overscroll-behavior:none;
}
input,textarea,select{font-size:16px;}


/* v0.12.1 — Workshop overflow, guide navigation, supplied clock, responsive game badge */
#entryFlow.show{
  align-items:flex-start!important;
  justify-content:center!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
}
#workshopPreviewScreen:not([hidden]),
#memberWorkshopScreen:not([hidden]){
  min-height:auto!important;
  align-items:flex-start!important;
  padding-top:calc(env(safe-area-inset-top) + 70px)!important;
  padding-bottom:calc(env(safe-area-inset-bottom) + 40px)!important;
  box-sizing:border-box!important;
}
#workshopPreviewScreen .workshopPreviewCard{
  margin-top:0!important;
  flex:0 0 auto!important;
}

.guideActions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:14px;
}
#guideBackBtn{
  width:100%;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:12px;
  background:transparent;
  color:#d7e2ef;
  font:inherit;
  font-weight:800;
  letter-spacing:.045em;
  cursor:pointer;
}
#guideStartBtn{margin-top:0!important;}
#guideOverlay.dailyGuide #guideBackBtn{display:none;}

#arena > #gameTimer.practiceTopTimer{
  font-weight:400!important;
  font-variant-numeric:tabular-nums;
}
#arena > #gameTimer.practiceTopTimer::before{
  background-image:url("../assets/practice-clock.png")!important;
  width:22px!important;
  height:22px!important;
  flex-basis:22px!important;
  border-radius:50%;
}
#rankPanel{cursor:pointer;}
#rankPanel:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}

@media(max-width:680px){
  #workshopPreviewScreen:not([hidden]),
  #memberWorkshopScreen:not([hidden]){
    padding-top:calc(env(safe-area-inset-top) + 62px)!important;
    padding-bottom:calc(env(safe-area-inset-bottom) + 32px)!important;
  }
  #arena > #gameTimer.practiceTopTimer{font-weight:400!important;}
  #arena > #gameTimer.practiceTopTimer::before{
    width:19px!important;
    height:19px!important;
    flex-basis:19px!important;
  }
}

/* v0.12.6 — consistent primary window borders
   Keep semantic colors, standardize every major screen/modal card to 2px. */
:root{--window-border-width:2px;--window-border-neutral:rgba(255,255,255,.22);}
.entryCard,
#guideCard,
.resultCard,
.identityModalCard,
.statsReport,
#morphemeDetailPanel .morphemeDetailCard{
  border-style:solid!important;
  border-width:var(--window-border-width)!important;
}
.entryCard,
#guideCard,
.resultCard,
#morphemeDetailPanel .morphemeDetailCard{
  border-color:var(--window-border-neutral)!important;
}
.resultCardSuccess,
#completionPanel .resultCard{
  border-color:rgba(95,227,154,.72)!important;
}
.resultCardLoss,
#lossPanel .resultCard{
  border-color:rgba(255,107,107,.66)!important;
}
.identityModalCard,
.statsReport{
  border-color:rgba(244,174,38,.58)!important;
}


/* v0.12.7 — consistent two-action layouts and training terminology */
.guideActions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:12px!important;
  align-items:stretch;
}
.guideActions > button{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  min-height:50px;
}

#lossPanel .resultActions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:12px!important;
}
#lossPanel .resultActions > button{
  width:100%!important;
  min-width:0!important;
}

@media(max-width:680px){
  .guideActions,
  #lossPanel .resultActions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
  }
  .guideActions > button,
  #lossPanel .resultActions > button{
    font-size:clamp(11px,3.1vw,14px)!important;
    padding-left:8px!important;
    padding-right:8px!important;
    white-space:normal;
    line-height:1.15;
  }
}

/* v0.12.9 — isolate single-action Daily Slice guide from two-action Training guide */
#guideOverlay.dailyGuide .guideActions{
  grid-template-columns:1fr!important;
  justify-items:center!important;
}
#guideOverlay.dailyGuide .guideActions > #guideStartBtn{
  width:auto!important;
  min-width:min(320px,100%)!important;
  max-width:100%!important;
  justify-self:center!important;
  padding-left:24px!important;
  padding-right:24px!important;
}
@media(max-width:680px){
  #guideOverlay.dailyGuide .guideActions{
    grid-template-columns:1fr!important;
  }
  #guideOverlay.dailyGuide .guideActions > #guideStartBtn{
    width:auto!important;
    min-width:min(260px,100%)!important;
    font-size:15px!important;
    white-space:nowrap!important;
    line-height:1.15;
  }
}


/* v0.13.1 — Training shuffle/layout polish, consistent secondary navigation */

/* Training timer lives in the footer so it can never overlap the puzzle word. */
.app > footer{
  gap:0!important;
}
.app > footer #gameTimer.practiceTopTimer{
  position:absolute!important;
  right:clamp(14px,3vw,28px)!important;
  left:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  z-index:2!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:5px 9px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#0b2d52!important;
  visibility:visible!important;
  opacity:1!important;
  font-size:16px!important;
  font-weight:400!important;
  letter-spacing:.02em!important;
  line-height:1!important;
  text-shadow:none!important;
  font-variant-numeric:tabular-nums lining-nums;
}
.app > footer #gameTimer.practiceTopTimer::before{
  content:""!important;
  display:block!important;
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  border-radius:50%!important;
  background:url("../assets/practice-clock.png") center/contain no-repeat!important;
  filter:none!important;
}
.app > footer #gameTimer.dailyHiddenTimer{
  display:none!important;
}

/* Keep the centered mode label visually centered even with the timer at right. */
.app > footer .modeStatusBanner{
  padding-left:clamp(18px,3vw,28px)!important;
  padding-right:clamp(145px,19vw,190px)!important;
}
.app > footer .modeStatusBanner:has(.bannerDivider){
  padding-right:clamp(18px,3vw,28px)!important;
}

@media(max-width:680px){
  .app > footer #gameTimer.practiceTopTimer{
    right:10px!important;
    gap:5px!important;
    padding:4px 6px!important;
    font-size:13px!important;
  }
  .app > footer #gameTimer.practiceTopTimer::before{
    width:18px!important;
    height:18px!important;
    flex-basis:18px!important;
  }
  .app > footer .modeStatusBanner{
    justify-content:flex-start!important;
    padding-left:14px!important;
    padding-right:105px!important;
    font-size:12px!important;
  }
  .app > footer .modeStatusBanner:has(.bannerDivider){
    justify-content:center!important;
    padding:0 12px!important;
  }
}

/* Completion screen: both choices read as real buttons. */
#trainingHomeBtn{
  border:1.5px solid rgba(255,255,255,.7)!important;
  border-radius:12px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  padding:11px 14px!important;
  text-decoration:none!important;
}
#trainingHomeBtn:hover,
#trainingHomeBtn:focus-visible{
  border-color:rgba(255,255,255,.9)!important;
  background:rgba(255,255,255,.10)!important;
  text-decoration:none!important;
}
#trainingHomeBtn:active{
  background:rgba(255,255,255,.16)!important;
}

/* Workshop HOME: clean text at rest; the frosted button appears on interaction. */
#backHomeBtn.workshopHomeLink{
  min-width:132px!important;
  border:1.5px solid transparent!important;
  border-radius:12px!important;
  background:transparent!important;
  padding:11px 20px!important;
  color:#fff!important;
  text-decoration:none!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease!important;
}
#backHomeBtn.workshopHomeLink:hover,
#backHomeBtn.workshopHomeLink:focus-visible,
#backHomeBtn.workshopHomeLink:active{
  border-color:rgba(255,255,255,.68)!important;
  background:rgba(255,255,255,.10)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
  text-decoration:none!important;
  box-shadow:0 8px 24px rgba(0,0,0,.16)!important;
}
#backHomeBtn.workshopHomeLink:active{transform:scale(.985)!important;}

/* Apply the same clean outlined secondary-action language to back/escape controls. */
#guideBackBtn,
#dailyReviewBackBtn,
#backToResultsBtn{
  border:1.5px solid rgba(255,255,255,.62)!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#fff!important;
  text-decoration:none!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
#guideBackBtn:hover,#guideBackBtn:focus-visible,#guideBackBtn:active,
#dailyReviewBackBtn:hover,#dailyReviewBackBtn:focus-visible,#dailyReviewBackBtn:active,
#backToResultsBtn:hover,#backToResultsBtn:focus-visible,#backToResultsBtn:active{
  border-color:rgba(255,255,255,.88)!important;
  background:rgba(255,255,255,.10)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
  text-decoration:none!important;
}

/* Safari support for existing frosted surfaces. */
header,
.statsOverlay,
.identityModal,
#menuBackdrop,
#gameMenu{
  -webkit-backdrop-filter:blur(10px);
}

/* Hover is unreliable on touch Safari; active/focus provide the same selection cue. */
@media(hover:hover){
  .workshopShortcut:hover{
    border-radius:14px!important;
    background:rgba(255,255,255,.07)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    backdrop-filter:blur(8px)!important;
  }
}
.workshopShortcut:focus-visible,
.workshopShortcut:active{
  border-radius:14px!important;
  background:rgba(255,255,255,.10)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
}


/* Game EXIT uses the same clean outlined navigation language as Sign In/back controls. */
#exitBtn{
  border:1.5px solid rgba(255,255,255,.72)!important;
  border-radius:12px!important;
  background:rgba(7,18,33,.18)!important;
  color:#fff!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
  transition:background .16s ease,border-color .16s ease,transform .12s ease!important;
}
#exitBtn:hover,
#exitBtn:focus-visible,
#exitBtn:active{
  border-color:rgba(255,255,255,.92)!important;
  background:rgba(255,255,255,.11)!important;
}
#exitBtn:active{transform:scale(.985)!important;}

/* v0.13.2 — restore Training footer timer + reduce Stats branding */
/* Stats is information-first: hero is half the previous visual size. */
.statsHeroLogo{
  width:min(33%,160px)!important;
}
@media(max-width:680px){
  .statsHeroLogo{width:min(36%,140px)!important;}
}

/* Training timer is a footer peer, not an arena overlay. Keep it visible even
   before the first throw, and use the same clean app typography. */
.app > footer #gameTimer.practiceTopTimer{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  color:#0b2d52!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:16px!important;
  font-weight:500!important;
  letter-spacing:.01em!important;
  z-index:10!important;
  pointer-events:none!important;
}
.app > footer #gameTimer.practiceTopTimer.hidden{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
}
@media(max-width:680px){
  .app > footer #gameTimer.practiceTopTimer,
  .app > footer #gameTimer.practiceTopTimer.hidden{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    font-size:13px!important;
    font-weight:500!important;
  }
}

/* v0.13.3 — Stats logo rebalance + Training timer typography/contrast */
/* Restore the Stats hero to 75% of its original report size: present, but secondary to the data. */
.statsHeroLogo{
  width:min(49.5%,240px)!important;
}
@media(max-width:680px){
  .statsHeroLogo{
    width:min(54%,210px)!important;
  }
}

/* Training timer: use the same UI type stack as the rest of Slice and strong contrast on white footer. */
.app > footer #gameTimer.practiceTopTimer,
.app > footer #gameTimer.practiceTopTimer.hidden{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-weight:400!important;
  font-style:normal!important;
  font-stretch:normal!important;
  font-feature-settings:"tnum" 1,"lnum" 1!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  letter-spacing:0!important;
  color:#16283a!important;
  -webkit-text-fill-color:#16283a!important;
  text-shadow:none!important;
}
@media(max-width:680px){
  .app > footer #gameTimer.practiceTopTimer,
  .app > footer #gameTimer.practiceTopTimer.hidden{
    font-weight:400!important;
    color:#16283a!important;
    -webkit-text-fill-color:#16283a!important;
  }
}


/* v0.13.5 — LOCKED HOME SCREEN
   Home is a single fixed composition. Workshop/member screens may scroll,
   but the home screen must not inherit the later entry-flow top alignment. */
html,body{
  width:100%;
  height:100%;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  -webkit-text-size-adjust:100%;
}
body.entry-active:has(#homeScreen:not([hidden])) #entryFlow.show{
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:
    max(12px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    max(12px,env(safe-area-inset-bottom))
    max(12px,env(safe-area-inset-left))!important;
}
#homeScreen:not([hidden]){
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:0!important;
}
#homeScreen .homeShell{
  width:min(94vw,820px)!important;
  height:min(92dvh,760px)!important;
  min-height:0!important;
  max-height:92dvh!important;
  flex:0 1 auto!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:clamp(8px,2dvh,20px) 18px!important;
}
#homeScreen .homeHeroLogo{
  flex:0 1 auto;
  max-height:min(20dvh,190px)!important;
}
#homeScreen .homeDestinations{
  flex:0 0 auto;
}
#homeScreen .outlinedSignIn,
#homeScreen .entryVersion,
#homeScreen .entryNotice{
  flex:0 0 auto;
}
@media(max-width:680px){
  #homeScreen .homeShell{
    width:100%!important;
    height:94dvh!important;
    max-height:94dvh!important;
    padding:8px 4px!important;
  }
  #homeScreen .homeHeroLogo{
    width:min(70vw,320px)!important;
    max-height:17dvh!important;
    margin-bottom:clamp(8px,2dvh,18px)!important;
  }
  #homeScreen .fanCards{
    width:min(145px,30dvh)!important;
    height:min(152px,31dvh)!important;
  }
  #homeScreen .navCard{
    width:min(88px,18dvh)!important;
    height:min(126px,25dvh)!important;
  }
  #homeScreen .dailyNavCard{
    width:min(98px,19dvh)!important;
    height:min(140px,28dvh)!important;
  }
  #homeScreen .outlinedSignIn{
    margin-top:clamp(12px,3dvh,29px)!important;
  }
}

/* v0.14.0 — simplified entry + tiered Workshop */
.entryChoiceRow{display:flex;gap:12px;justify-content:center;align-items:center;width:min(430px,88vw);margin:26px auto 8px}.entryChoiceChip{flex:1;min-height:52px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font-weight:800;letter-spacing:.06em;padding:12px 18px}.entryChoicePrimary{background:#fff;color:#111}.entryChoiceHint{margin:8px auto 0;color:rgba(255,255,255,.72);font-size:.82rem;text-align:center}.tierDevNote{margin:8px 0 16px;padding:9px 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px;font-size:.7rem;letter-spacing:.05em;opacity:.72;text-align:center}.workshopToolGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.workshopToolTile{min-height:138px;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 12px;background:rgba(255,255,255,.06);color:inherit;text-align:left;display:flex;flex-direction:column;gap:5px}.workshopToolTile b{display:grid;place-items:center;width:42px;height:42px;border:1px solid currentColor;border-radius:10px;font-size:1.35rem}.workshopToolTile strong{font-size:.83rem;letter-spacing:.04em}.workshopToolTile span{font-size:.72rem;opacity:.68;line-height:1.3}.workshopToolTile.comingTool{filter:grayscale(1);opacity:.46}.workshopToolTile.comingTool:hover,.workshopToolTile.comingTool:focus-visible{opacity:.68}.toolPreviewCard{text-align:center}.toolPreviewTier,.toolPreviewStatus{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;opacity:.72}.toolPreviewInitial{display:grid;place-items:center;width:72px;height:72px;margin:12px auto;border:2px solid currentColor;border-radius:16px;font-size:2rem;font-weight:900}.toolPreviewCard p{line-height:1.45}.toolPreviewStatus{margin-top:8px}.warmupGuideNote{font-size:.78rem;opacity:.72}
@media(max-width:420px){.entryChoiceRow{width:92vw;gap:9px}.entryChoiceChip{padding:10px 12px;font-size:.82rem}.workshopToolGrid{gap:9px}.workshopToolTile{min-height:128px;padding:11px 10px}}
.guestLockedTool{filter:grayscale(1);opacity:.48}


/* v0.14.1 — stronger entry branding + tier preview polish */
#homeScreen .homeHeroLogo{width:min(84vw,520px)!important;max-height:min(25dvh,235px)!important;margin-bottom:8px!important}
.startCardFan{position:relative;width:min(250px,52vw);height:150px;margin:0 auto 2px;flex:0 0 auto;pointer-events:none}
.startFanCard{position:absolute;left:50%;top:8px;width:92px;height:auto;transform-origin:50% 92%;border-radius:8px}
.startFanLeft{transform:translateX(-74%) rotate(-18deg)}
.startFanCenter{transform:translateX(-50%) translateY(-4px)}
.startFanRight{transform:translateX(-26%) rotate(18deg)}
.tierToolPreview{width:100%;display:flex;align-items:center;gap:12px;margin:4px 0 12px;padding:10px 12px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.05);color:inherit;text-align:left}
.tierToolPreview img{width:52px;height:52px;object-fit:contain;flex:0 0 auto}
.tierToolPreview span{display:flex;flex-direction:column;gap:2px}.tierToolPreview strong{font-size:.82rem;letter-spacing:.04em}.tierToolPreview small{font-size:.7rem;opacity:.72}
.toolPreviewIcon{display:block;width:82px;height:82px;object-fit:contain;margin:12px auto;filter:grayscale(1);opacity:.7}.toolPreviewIcon[hidden]{display:none}
.warmupResultActions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.warmupResultActions button{min-width:150px}
@media(max-width:680px){#homeScreen .homeHeroLogo{width:min(86vw,430px)!important;max-height:22dvh!important}.startCardFan{width:min(225px,58vw);height:132px}.startFanCard{width:82px}.entryChoiceRow{margin-top:14px}}


/* v0.14.2 — entry scale tuning */
#homeScreen .homeHeroLogo{
  width:min(92vw,572px)!important;
  max-height:min(28dvh,258px)!important;
  margin-bottom:4px!important;
}
.startCardFan{
  width:min(390px,72vw)!important;
  height:225px!important;
  margin:0 auto -4px!important;
}
.startFanCard{
  width:150px!important;
  top:4px!important;
}
.entryChoiceRow{
  width:min(390px,84vw)!important;
  gap:10px!important;
  margin:12px auto 6px!important;
}
.entryChoiceChip{
  min-height:46px!important;
  padding:9px 14px!important;
  font-size:.78rem!important;
}
@media(max-width:680px){
  #homeScreen .homeHeroLogo{
    width:min(92vw,473px)!important;
    max-height:24dvh!important;
  }
  .startCardFan{
    width:min(350px,78vw)!important;
    height:190px!important;
  }
  .startFanCard{width:132px!important}
  .entryChoiceRow{width:min(360px,88vw)!important;margin-top:8px!important}
  .entryChoiceChip{min-height:44px!important;padding:8px 11px!important;font-size:.76rem!important}
}
@media(max-width:420px){
  .startCardFan{width:min(320px,82vw)!important;height:172px!important}
  .startFanCard{width:120px!important}
}


/* v0.14.3 — warm-up framing and Daily results interaction fixes */
#warmupIntroPanel{z-index:6100!important;}
.warmupIntroCard{width:min(90vw,520px);text-align:center;border:1px solid rgba(255,255,255,.2);}
.warmupIntroLogo{display:block;width:min(68%,290px);height:auto;margin:0 auto 10px;}
.warmupIntroCard h2{margin:4px 0 12px;color:#fff;}
.warmupIntroCard p{margin:0 auto 22px;max-width:390px;color:#d6e0ed;line-height:1.5;}
.warmupIntroActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.warmupIntroActions button:first-child{background:var(--accent);color:#101010;border-color:transparent;}
#warmupIntroPanel.show{opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
#dailyEndPanel.show{z-index:6200!important;pointer-events:auto!important;}
#dailyEndPanel.show .dailyEndCard,#dailyEndPanel.show .resultActions,#dailyEndPanel.show button{pointer-events:auto!important;}
#dailyEndPanel.show button{position:relative;z-index:3;}
@media(max-width:520px){.warmupIntroActions{grid-template-columns:1fr}.warmupIntroCard{padding:24px 18px}}


/* v0.14.4 — centered overlays, clean warm-up choices, clearer free-account ladder */
#dailyReviewPanel.resultOverlay,
#warmupIntroPanel.resultOverlay{
  align-items:center!important;
  justify-content:center!important;
  padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;
}
#dailyReviewPanel .resultCard,
#warmupIntroPanel .resultCard{margin:auto!important;}

/* The warm-up completion decision is the same composition on desktop and mobile. */
#completionPanel.warmupComplete .warmupResultActions,
.warmupResultActions{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
}
#completionPanel.warmupComplete .warmupResultActions button,
.warmupResultActions button{
  width:min(100%,360px)!important;
  min-width:0!important;
  margin:0 auto!important;
}
#lossPanel.warmupComplete .resultActions{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
}
#lossPanel.warmupComplete .resultActions button{
  width:min(100%,360px)!important;
  min-width:0!important;
  margin:0 auto!important;
}

/* Tier headers sell identity/value first; pricing belongs in the later upgrade decision. */
.membershipHeader small{font-size:10px!important;letter-spacing:.11em!important;}
.tierPreviewInitial{
  width:52px;height:52px;flex:0 0 52px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.055);
  color:var(--accent);font-size:24px;font-weight:900;
}
.membershipDetails .tierToolPreview{cursor:pointer;}
.membershipDetails .tierToolPreview + .tierToolPreview{margin-top:8px;}

@media(max-width:620px){
  #dailyReviewPanel.resultOverlay,
  #warmupIntroPanel.resultOverlay{align-items:center!important;padding-top:max(16px,env(safe-area-inset-top))!important;}
}


/* v0.14.5 — compact See My Slices hero for mobile viewport fit */
.dailyReviewLogo{width:min(35%,150px)!important;}

/* v0.14.6 — tier value proposition copy */
.membershipPitch{margin:2px 4px 10px;color:rgba(255,255,255,.78);font-size:.88rem;line-height:1.35;}
.membershipPitch strong{color:#fff;font-weight:800;}


/* v0.15.0 — centered See My Slices, private tier testing, perfect-run Finisher */
#dailyReviewPanel.resultOverlay{
  align-items:center!important;
  justify-content:center!important;
  overflow:auto!important;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
}
#dailyReviewPanel .dailyReviewCard{
  margin:auto!important;
  max-height:calc(100dvh - 24px)!important;
  overscroll-behavior:contain;
}
#dailyReviewPanel .dailyReviewLogo{
  width:min(25%,110px)!important;
  max-height:72px!important;
  object-fit:contain!important;
  margin:0 auto 2px!important;
}
@media(max-width:680px){
  #dailyReviewPanel.resultOverlay{align-items:center!important;justify-content:center!important;}
  #dailyReviewPanel .dailyReviewCard{max-height:calc(100dvh - 20px)!important;padding-top:14px!important;padding-bottom:14px!important;}
  #dailyReviewPanel .dailyReviewLogo{width:min(24%,92px)!important;max-height:58px!important;}
  #dailyReviewPanel .dailyReviewList{margin:10px 0 14px!important;gap:7px!important;}
}

.devTierSwitcher{
  margin:12px auto 0;
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:rgba(255,255,255,.58);font-size:9px;font-weight:800;letter-spacing:.09em;
}
.devTierSwitcher select{
  width:auto;min-width:116px;padding:5px 24px 5px 8px;border:1px solid rgba(255,255,255,.18);
  border-radius:8px;background:rgba(4,14,27,.72);color:#fff;font-size:11px;
}



/* v0.15.3 — one Workshop shell for every membership level */
.workshopBadgeButton{position:relative;overflow:visible}
.workshopBadgeImage{width:100%;height:100%;object-fit:contain;display:block}
.workshopShortcutGrid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.workshopShortcut[hidden]{display:none!important}
.workshopShortcut.comingShortcut{opacity:.48;filter:grayscale(.72)}
.shortcutInitial{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 8px;border:1px solid currentColor;border-radius:12px;font-size:24px;font-weight:700;line-height:1}
#backHomeBtn[hidden]{display:none!important}
@media (min-width:700px){
  .workshopShortcutGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* v0.15.4 badge progression + trophy case */
.trophyCaseCard{width:min(92vw,760px);max-height:88vh;overflow:auto;text-align:center}
.trophyCaseSubtitle{margin:.2rem auto 1.2rem;color:#cbd5e1;max-width:34rem}
.trophyBadgeGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.trophyBadge{position:relative;border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:.75rem;background:rgba(255,255,255,.035);display:flex;flex-direction:column;align-items:center;gap:.45rem}
.trophyBadge img{display:block;width:min(100%,170px);height:auto;object-fit:contain}
.trophyBadge span{font-weight:800;font-size:.8rem;letter-spacing:.06em}
.trophyBadge.locked{opacity:.28;filter:grayscale(.8)}
.trophyBadge.current{border-color:#f7b733;box-shadow:0 0 0 2px rgba(247,183,51,.18) inset}
.workshopBadgeImage{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:600px){.trophyBadgeGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.trophyBadge img{width:min(100%,135px)}}

/* v0.15.5 — See My Slices opens authentic SAYWORD! card fronts */
.sliceCardOverlay{
  position:fixed;inset:0;z-index:1400;display:none;
  align-items:center;justify-content:center;flex-direction:column;
  padding:20px;background:rgba(1,8,18,.78);backdrop-filter:blur(5px);
}
.sliceCardOverlay.show{display:flex;animation:sliceCardOverlayIn .18s ease-out both}
@keyframes sliceCardOverlayIn{from{opacity:0}to{opacity:1}}
.sliceCardScene{
  width:min(78vw,340px);aspect-ratio:825/1125;perspective:1200px;
}
.sliceCardFlipper{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateY(0deg);transition:transform .64s cubic-bezier(.2,.72,.22,1);
}
.sliceCardFlipper.isFlipped{transform:rotateY(180deg)}
.sliceCardFace{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;border-radius:3.5%;filter:drop-shadow(0 18px 34px rgba(0,0,0,.48));
}
.sliceCardFace img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.sliceCardBackFace{transform:rotateY(0deg)}
.sliceCardFrontFace{transform:rotateY(180deg);background:#fff;color:#050505}
.sliceCardRelated{
  position:absolute;left:3.3%;top:2.1%;width:26%;white-space:pre-line;
  text-align:left;font-weight:900;font-size:clamp(10px,2.25vw,17px);line-height:1.04;
  letter-spacing:.03em;color:#050505;
}
.sliceCardRelated[hidden]{display:none}
.sliceCardTerm{
  position:absolute;left:10%;right:10%;top:37%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:19%;font-size:clamp(44px,13vw,92px);font-weight:950;line-height:.9;
  letter-spacing:.025em;color:#050505;text-transform:uppercase;overflow-wrap:anywhere;
}
.sliceCardMeaning{
  position:absolute;left:10%;right:10%;top:58%;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:clamp(14px,4vw,28px);font-style:italic;font-weight:650;line-height:1.08;
  color:#050505;
}
.sliceCardClose{
  position:absolute;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));
  z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  background:rgba(7,22,41,.92);color:#fff;font-size:28px;line-height:1;cursor:pointer;
}
.sliceCardHint{margin:12px 0 0;color:#d8e1ed;font-size:12px;font-weight:700;letter-spacing:.02em;text-align:center}
@media(max-width:620px){
  .sliceCardOverlay{padding:14px 12px}
  .sliceCardScene{width:min(76vw,300px)}
  .sliceCardClose{width:38px;height:38px;font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .sliceCardFlipper{transition:none}
}


/* v0.15.6 — Slice review uses a dimensional tile, not a physical deck card. */
.sliceTileScene{
  width:min(88vw,520px);aspect-ratio:1.72/1;perspective:1500px;
}
.sliceTileFlipper{
  transition:transform 1.12s cubic-bezier(.18,.62,.22,1);
}
.sliceTileBackFace,
.sliceTileFrontFace{
  border-radius:22px;
  border:2px solid rgba(255,255,255,.2);
  box-shadow:0 22px 48px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  filter:none;
}
.sliceTileBackFace{
  background:#07172c;
  display:flex;align-items:center;justify-content:center;
}
.sliceTileBackFace::after{
  content:'';position:absolute;inset:7px;border-radius:16px;border:1px solid rgba(255,255,255,.12);pointer-events:none;
}
.sliceTileBackLogo{
  width:56%!important;height:auto!important;object-fit:contain!important;
}
.sliceTileFrontFace{
  background:linear-gradient(180deg,#172437 0%,#111d2e 100%);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9% 9% 8%;
}
.sliceTileTerm{
  position:static;display:block;min-height:0;width:100%;
  font-size:clamp(42px,11vw,78px);font-weight:950;line-height:.95;color:#fff;text-transform:uppercase;
  margin:0 0 1rem;
}
.sliceTileMeaning{
  position:static;width:100%;font-family:inherit;font-style:normal;
  font-size:clamp(16px,3.6vw,24px);font-weight:650;line-height:1.25;color:#dce6f3;
}
.sliceTileRelated{
  position:absolute;left:18px;top:14px;width:auto;max-width:45%;
  font-size:clamp(10px,2.2vw,14px);line-height:1.15;color:#f7b733;opacity:.92;
}
@media(max-width:620px){
  .sliceTileScene{width:min(90vw,430px)}
}
@media(prefers-reduced-motion:reduce){.sliceTileFlipper{transition:none}}

/* v0.15.7 — pickup / concentration-style Slice tile transition */
.sliceTileScene{transform-origin:center center;will-change:transform,opacity}
.sliceTileFlipper{transition:transform .42s cubic-bezier(.22,.72,.25,1)}
.sliceTileBackFace,
.sliceTileFrontFace{
  overflow:hidden;
  background-color:#07172c;
}
.sliceTileBackFace::before,
.sliceTileFrontFace::before{
  content:'';
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(5,18,37,.62),rgba(5,18,37,.78)),url('../assets/background.png');
  background-size:cover;
  background-position:center;
  opacity:.9;
  pointer-events:none;
}
.sliceTileBackFace::after{
  content:'';position:absolute;inset:7px;border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 28px rgba(255,255,255,.035), inset 0 -14px 22px rgba(0,0,0,.28);
  pointer-events:none;
}
.sliceTileBackLogo{position:relative;z-index:1;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}
.sliceTileFrontFace{background:#111d2e}
.sliceTileFrontFace::after{
  content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 12px 18px rgba(255,255,255,.035),inset 0 -18px 26px rgba(0,0,0,.22);
}
.sliceTileTerm,.sliceTileMeaning,.sliceTileRelated{position:relative;z-index:1}
.sliceTileRelated{position:absolute}
.sliceTileScene{cursor:pointer}
.sliceCardHint{font-size:11px;opacity:.82}
@media(prefers-reduced-motion:reduce){.sliceTileFlipper{transition:none!important}.sliceTileScene{transform:none!important}}


/* v0.15.8 — clean flashcard Slices + full rank badges */
/* Flashcard: Slice on one side, meaning on the other. Keep the tile intentionally plain. */
.sliceTileBackFace,
.sliceTileFrontFace{
  background:#111d2e!important;
  background-image:none!important;
  border:2px solid rgba(255,255,255,.18)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.44),inset 0 0 0 1px rgba(255,255,255,.045)!important;
}
.sliceTileBackFace::before,
.sliceTileFrontFace::before,
.sliceTileFrontFace::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
.sliceTileBackFace::after{
  content:''!important;
  display:block!important;
  position:absolute!important;
  inset:7px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
.sliceTileBackFace,
.sliceTileFrontFace{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:9%!important;
}
.sliceTileTerm,
.sliceTileMeaning{
  position:relative!important;
  inset:auto!important;
  z-index:1!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  text-align:center!important;
}
.sliceTileTerm{
  color:#fff!important;
  font-size:clamp(48px,12vw,86px)!important;
  font-weight:950!important;
  line-height:.95!important;
  letter-spacing:.025em!important;
  text-transform:uppercase!important;
}
.sliceTileMeaning{
  color:#fff!important;
  font-family:inherit!important;
  font-size:clamp(19px,4vw,29px)!important;
  font-style:normal!important;
  font-weight:650!important;
  line-height:1.28!important;
}

/* Guest/Freelance retain the circular identity marker. Rank badges use their full silhouette. */
.workshopClean .workshopBadgeButton.rankBadgeButton,
.workshopIdentityCard > .workshopBadgeButton.rankBadgeButton{
  top:-72px!important;
  left:50%!important;
  right:auto!important;
  width:138px!important;
  height:138px!important;
  min-width:138px!important;
  min-height:138px!important;
  max-width:138px!important;
  max-height:138px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:translateX(-50%)!important;
}
.workshopBadgeButton.rankBadgeButton .workshopBadgeImage{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  overflow:visible!important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.34));
}
.workshopClean:has(.workshopBadgeButton.rankBadgeButton){
  padding-top:88px!important;
}
@media(max-width:680px){
  .workshopClean .workshopBadgeButton.rankBadgeButton,
  .workshopIdentityCard > .workshopBadgeButton.rankBadgeButton{
    top:-62px!important;
    width:120px!important;
    height:120px!important;
    min-width:120px!important;
    min-height:120px!important;
    max-width:120px!important;
    max-height:120px!important;
  }
  .workshopClean:has(.workshopBadgeButton.rankBadgeButton){padding-top:76px!important;}
}


/* v0.15.9 — Workshop exit/sign-out clarity + flashcard finish */
/* Workshop is the signed-in home, so its bottom control is an exit/sign-out action. */
#workshopPreviewScreen .workshopHomeLink{
  display:block;
  margin:26px auto 2px!important;
  width:auto!important;
}

/* Flashcards stay plain, but gain the small premium edge treatment used across Slice. */
.sliceTileBackFace,
.sliceTileFrontFace{
  border:2px solid #f7b733!important;
  box-shadow:
    0 0 18px rgba(255,255,255,.18),
    0 18px 38px rgba(0,0,0,.44),
    inset 0 0 0 1px rgba(255,255,255,.055)!important;
}
.sliceTileBackFace::after,
.sliceTileFrontFace::after{
  content:''!important;
  display:block!important;
  position:absolute!important;
  inset:8px!important;
  border-radius:15px!important;
  border:1px solid rgba(247,183,51,.86)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)!important;
  pointer-events:none!important;
}


/* v0.16.0 — flashcard edge, tier-matched Workshop frame, Apprentice star, tabbed Stats */
.sliceTileBackFace,
.sliceTileFrontFace{
  border:2px solid #f4b52f!important;
  box-shadow:
    0 0 11px rgba(255,255,255,.48),
    0 0 23px rgba(255,255,255,.14),
    0 18px 38px rgba(0,0,0,.44)!important;
}
.sliceTileBackFace::after,
.sliceTileFrontFace::after{
  content:''!important;
  display:block!important;
  position:absolute!important;
  inset:8px!important;
  border-radius:14px!important;
  border:2px solid rgba(244,181,47,.88)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;
  pointer-events:none!important;
}

/* Guest and Freelance keep the established neutral frame. Paid rank frames echo the badge material. */
#workshopPreviewScreen .workshopPreviewCard.tierApprentice{
  border-width:4px!important;
  border-color:#e3ddd0!important;
  box-shadow:0 0 0 1px rgba(29,61,104,.58) inset,0 18px 46px rgba(0,0,0,.26)!important;
}
#workshopPreviewScreen .workshopPreviewCard.tierWordsmith{
  border-width:4px!important;
  border-color:#8f9ca8!important;
  box-shadow:0 0 0 1px rgba(25,31,37,.88) inset,0 18px 46px rgba(0,0,0,.3)!important;
}
/* Never show the fallback initial behind a loaded rank badge. */
.workshopBadgeButton.rankBadgeButton .workshopBadgeCore{display:none!important}
/* Apprentice begins at one star; keep it readable below the full badge silhouette. */
.workshopBadgeButton.rankBadgeButton .identityBadgeStars{
  position:absolute!important;
  left:50%!important;
  bottom:-9px!important;
  transform:translateX(-50%)!important;
  z-index:4!important;
  display:flex;
  gap:3px;
  padding:2px 7px;
  border-radius:999px;
  background:#07172c;
  border:1px solid rgba(244,181,47,.72);
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.workshopBadgeButton.rankBadgeButton .identityBadgeStars[hidden]{display:none!important}
.workshopBadgeButton.rankBadgeButton .identityBadgeStars i{font-size:13px;color:rgba(255,255,255,.25)}
.workshopBadgeButton.rankBadgeButton .identityBadgeStars i.earned{color:#f4b52f}

.statsReport{width:min(94vw,760px)!important}
.statsTabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  margin:14px 0 18px;padding:5px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(2,12,25,.55);
}
.statsTab{
  min-width:0;padding:10px 7px;border:0;border-radius:9px;background:transparent;color:#9eafc3;
  font:inherit;font-size:11px;font-weight:900;letter-spacing:.04em;cursor:pointer;
}
.statsTab.isActive{background:#f4b52f;color:#07172c}
.statsTabPanel[hidden]{display:none!important}
.statsPanelNote{margin:14px 0 0;color:#9fb0c5;font-size:12px;line-height:1.45;text-align:center}
.analyticsInsightGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.analyticsInsightGrid>div{padding:12px 10px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.035)}
.analyticsInsightGrid strong,.analyticsInsightGrid span{display:block}
.analyticsInsightGrid strong{color:#f4b52f;font-size:11px;letter-spacing:.06em}
.analyticsInsightGrid span{margin-top:6px;color:#d9e3ef;font-size:11px;line-height:1.35}
.analyticsMiniGraph{height:92px;display:flex;align-items:flex-end;gap:7px;margin:18px 4px 2px;padding:10px 10px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.analyticsMiniGraph i{display:block;flex:1;height:var(--h);min-height:8px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#f4b52f,#9b6d10)}
@media(max-width:560px){
  .statsTab{font-size:9px;padding:9px 3px}
  .analyticsInsightGrid{grid-template-columns:1fr}
}

/* v0.16.2 — training selector access + trophy effect containment */

/* The Workshop panel is the player's personal wall. The outer SAYWORD! environment stays unchanged. */
#workshopPreviewScreen .workshopPreviewCard[data-rank="apprentice"],
#workshopPreviewScreen .workshopPreviewCard[data-rank="carpenter"],
#workshopPreviewScreen .workshopPreviewCard[data-rank="mason"],
#workshopPreviewScreen .workshopPreviewCard[data-rank="smith"],
#workshopPreviewScreen .workshopPreviewCard[data-rank="jeweler"],
#workshopPreviewScreen .workshopPreviewCard[data-rank="engineer"]{
  background-image:var(--workshop-wall-image)!important;
  background-size:cover!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}
#workshopPreviewScreen .workshopPreviewCard[data-rank="apprentice"]{border:6px solid #e8e1d3!important}
#workshopPreviewScreen .workshopPreviewCard[data-rank="carpenter"]{border:6px solid #b87532!important}
#workshopPreviewScreen .workshopPreviewCard[data-rank="mason"]{border:6px solid #a9aaab!important}
#workshopPreviewScreen .workshopPreviewCard[data-rank="smith"]{border:6px solid #76828b!important}
#workshopPreviewScreen .workshopPreviewCard[data-rank="jeweler"]{border:6px solid #7551a6!important}
#workshopPreviewScreen .workshopPreviewCard[data-rank="engineer"]{border:6px solid #2a9be8!important}

/* Keep tools readable while letting the actual material remain visible. */
#workshopPreviewScreen .workshopPreviewCard[data-rank] .workshopShortcut,
#workshopPreviewScreen .workshopPreviewCard[data-rank] .membershipLevel{
  text-shadow:0 2px 5px rgba(0,0,0,.78);
}
#workshopPreviewScreen .workshopPreviewCard[data-rank] .comingShortcut,
#workshopPreviewScreen .workshopPreviewCard[data-rank] .membershipLevel{
  backdrop-filter:blur(1.5px);
}

/* The fallback initial must never coexist with a real rank badge. */
#workshopIdentityBadge.rankBadgeButton #workshopBadgeCore,
#workshopIdentityBadge.rankBadgeButton .workshopBadgeCore{
  display:none!important;
  visibility:hidden!important;
}
.workshopDisplayName{
  margin:4px 0 0!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
  text-align:center!important;
}

/* Persistent player identity in Daily Slice and Training. */
#rankBadge.rankBadgeGraphic{
  width:72px!important;
  height:72px!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  box-shadow:none!important;
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.42));
}
.rankDisplayName{
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media(max-width:620px){
  #rankBadge.rankBadgeGraphic{width:58px!important;height:58px!important}
  .rankDisplayName{max-width:115px;font-size:8px}
}

/* Stats: one stable report shell; tabs only swap the content area below them. */
.statsReport{
  height:min(82vh,720px)!important;
  min-height:min(620px,82vh)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.statsHeroLogo{flex:0 0 auto}
.statsPlayerHeader{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0 auto 2px;
  min-height:42px;
}
.statsPlayerHeader img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(0,0,0,.34))}
.statsPlayerHeader strong,.statsPlayerHeader span{display:block;text-align:left}
.statsPlayerHeader strong{color:#fff;font-size:12px;letter-spacing:.08em}
.statsPlayerHeader span{color:#9fb0c5;font-size:10px;font-weight:800;letter-spacing:.08em;margin-top:2px}
.statsTabs{flex:0 0 auto}
.statsTabViewport{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
}
.statsTabPanel{min-height:100%;padding:1px 2px 8px}
.statsTabPanel.statsPanelEnter{animation:statsPanelSwap .2s ease-out both}
@keyframes statsPanelSwap{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.statsCloseHint{flex:0 0 auto;margin-top:8px!important}
@media(max-width:560px){
  .statsReport{height:84vh!important;min-height:0!important}
  .statsPlayerHeader img{width:40px;height:40px}
}

/* Training mode selector floats over the real training arena. */
.trainingModeOverlay{
  position:fixed;
  inset:0;
  z-index:140;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(1,8,18,.58);
  backdrop-filter:blur(2px);
}
.trainingModeOverlay[hidden]{display:none!important}
.trainingModeCard{
  position:relative;
  width:min(92vw,650px);
  padding:28px 24px 22px;
  border:2px solid rgba(255,255,255,.42);
  border-radius:22px;
  background:rgba(6,20,38,.94);
  box-shadow:0 25px 60px rgba(0,0,0,.46);
  text-align:center;
}
.trainingModeEyebrow{margin:0 0 6px;color:#f4b52f;font-size:11px;font-weight:950;letter-spacing:.13em}
.trainingModeCard h2{margin:0;color:#fff;font-size:clamp(20px,4vw,30px);line-height:1.05}
.trainingModeIntro{margin:10px auto 18px;max-width:520px;color:#c5d0df;font-size:13px;line-height:1.4}
.trainingModeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.trainingModeChoice{
  position:relative;
  min-height:96px;
  padding:14px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.trainingModeChoice strong,.trainingModeChoice span,.trainingModeChoice em{display:block}
.trainingModeChoice strong{font-size:13px;letter-spacing:.06em;color:#fff}
.trainingModeChoice span{margin-top:6px;color:#b9c8d9;font-size:11px;line-height:1.35}
.trainingModeChoice em{position:absolute;right:9px;top:9px;color:#f4b52f;font-size:8px;font-style:normal;font-weight:900;letter-spacing:.07em}
.trainingModeChoice.isReady{border-color:#f4b52f;background:rgba(244,181,47,.09)}
.trainingModeChoice:hover,.trainingModeChoice:focus-visible{border-color:#f4b52f;transform:translateY(-1px)}
.trainingModeNotice{min-height:18px;margin:12px 0 0;color:#f4b52f;font-size:11px;font-weight:800}
@media(max-width:520px){.trainingModeGrid{grid-template-columns:1fr}.trainingModeCard{padding:24px 16px 18px}.trainingModeChoice{min-height:78px}}

/* Trophy case: quiet physical presence rather than constant motion. */
.trophyBadge.earned img,.trophyBadge.current img{animation:trophyIdle 5.6s ease-in-out infinite;transform-origin:50% 88%}
.trophyBadge:nth-child(2) img{animation-delay:-1.2s}.trophyBadge:nth-child(3) img{animation-delay:-2.8s}.trophyBadge:nth-child(4) img{animation-delay:-.7s}.trophyBadge:nth-child(5) img{animation-delay:-3.4s}.trophyBadge:nth-child(6) img{animation-delay:-4.1s}
@keyframes trophyIdle{0%,88%,100%{transform:rotate(0deg)}92%{transform:rotate(-.7deg)}96%{transform:rotate(.55deg)}}
.trophyBadge[data-rank="smith"]::after{
  content:'';position:absolute;inset:7px;border-radius:14px;pointer-events:none;
  background:linear-gradient(112deg,transparent 35%,rgba(255,255,255,.0) 43%,rgba(255,255,255,.24) 50%,rgba(255,255,255,0) 57%,transparent 65%);
  transform:translateX(-125%);animation:smithLight 7.2s ease-in-out infinite;
}
@keyframes smithLight{0%,70%{transform:translateX(-125%);opacity:0}78%{opacity:.55}88%{transform:translateX(125%);opacity:0}100%{opacity:0}}
.trophyBadge[data-rank="jeweler"]::before{
  content:'✦';position:absolute;right:18%;top:18%;z-index:3;color:#fff;font-size:16px;opacity:0;pointer-events:none;animation:jewelTwinkle 4.9s ease-in-out infinite;
}
@keyframes jewelTwinkle{0%,70%,100%{opacity:0;transform:scale(.55) rotate(0)}78%{opacity:.9;transform:scale(1.15) rotate(20deg)}84%{opacity:0;transform:scale(.7) rotate(36deg)}}
.trophyBadge[data-rank="engineer"] img{filter:drop-shadow(0 0 4px rgba(53,171,255,.28));animation:trophyIdle 5.6s ease-in-out infinite,engineerPulse 3.8s ease-in-out infinite}
@keyframes engineerPulse{0%,100%{filter:drop-shadow(0 0 4px rgba(53,171,255,.22))}50%{filter:drop-shadow(0 0 16px rgba(53,171,255,.72))}}

@media (prefers-reduced-motion:reduce){
  .statsTabPanel.statsPanelEnter,.trophyBadge img,.trophyBadge::before,.trophyBadge::after{animation:none!important}
  .trainingModeChoice{transition:none!important}
}


/* v0.16.2 — training selector is a required choice, with tier-gated drills visible in place. */
.trainingModeChoice:disabled,
.trainingModeChoice.isLocked{
  opacity:.32!important;
  filter:grayscale(.45);
  cursor:not-allowed!important;
  transform:none!important;
  border-color:rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.025)!important;
}
.trainingModeChoice:disabled strong,.trainingModeChoice:disabled span{color:#8090a2!important}
.trainingModeChoice:disabled em{color:#9aa8b8!important}
.trainingModeChoice.isReady:not(:disabled){border-color:rgba(244,181,47,.68);}

/* Keep Smith's specular sweep inside the Smith trophy only. */
.trophyBadge[data-rank="smith"]{overflow:hidden}
/* Jeweler owns its own localized twinkle; no neighboring light sweep can cross into it. */
.trophyBadge[data-rank="jeweler"]{overflow:visible}
.trophyBadge[data-rank="jeweler"]::before{
  text-shadow:0 0 7px rgba(255,255,255,.9),0 0 14px rgba(190,125,255,.55);
}


/* v0.16.3 — toolkit textures, stable player stats, training hub repair */

/* Use the supplied rank textures directly so the toolkit surface is visible in every ranked profile. */
#workshopPreviewScreen .workshopPreviewCard[data-rank="apprentice"]{background-image:linear-gradient(rgba(3,11,21,.16),rgba(3,11,21,.28)),url("../assets/workshop-apprentice.png")!important}
#workshopPreviewScreen .workshopPreviewCard[data-rank="carpenter"]{background-image:linear-gradient(rgba(3,11,21,.12),rgba(3,11,21,.25)),url("../assets/workshop-carpenter.png")!important}
#workshopPreviewScreen .workshopPreviewCard[data-rank="mason"]{background-image:linear-gradient(rgba(3,11,21,.16),rgba(3,11,21,.28)),url("../assets/workshop-mason.png")!important}
#workshopPreviewScreen .workshopPreviewCard[data-rank="smith"]{background-image:linear-gradient(rgba(3,11,21,.14),rgba(3,11,21,.26)),url("../assets/workshop-smith.png")!important}
#workshopPreviewScreen .workshopPreviewCard[data-rank="jeweler"]{background-image:linear-gradient(rgba(3,8,18,.12),rgba(3,8,18,.24)),url("../assets/workshop-jeweler.png")!important}
#workshopPreviewScreen .workshopPreviewCard[data-rank="engineer"]{background-image:linear-gradient(rgba(1,8,18,.10),rgba(1,8,18,.22)),url("../assets/workshop-engineer.png")!important}
#workshopPreviewScreen .workshopPreviewCard[data-rank]{
  background-size:cover!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}
/* Let the tools read as objects mounted on the wall, not opaque tiles hiding it. */
#workshopPreviewScreen .workshopPreviewCard[data-rank] .workshopShortcut{
  background:rgba(4,14,27,.34)!important;
  border-color:rgba(255,255,255,.28)!important;
  backdrop-filter:blur(1px);
}
#workshopPreviewScreen .workshopPreviewCard[data-rank] .workshopHeaderBlock{
  text-shadow:0 3px 8px rgba(0,0,0,.72);
}

/* Stats identity always occupies the same header position. */
.statsPlayerHeader{min-height:86px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important}
.statsPlayerHeader #statsPlayerBadge{
  display:block;
  width:82px!important;
  height:82px!important;
  object-fit:contain!important;
  flex:0 0 auto;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.4));
}
.statsPlayerHeader #statsPlayerBadge[hidden]{display:none!important}
.statsPlayerBadgeFallback{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  border:3px solid rgba(255,255,255,.8);background:#15365e;color:#f4b52f;
  font-size:26px;font-weight:950;box-shadow:0 8px 18px rgba(0,0,0,.3);
}
.statsPlayerBadgeFallback[hidden]{display:none!important}
.statsPlayerHeader>div{text-align:left}
.statsPlayerHeader strong,.statsPlayerHeader span{display:block}
.statsPlayerHeader strong{font-size:14px;letter-spacing:.08em}
.statsPlayerHeader>div span{margin-top:2px;color:#aebed1;font-size:10px;font-weight:850;letter-spacing:.1em}

/* Fixed viewport: tabs stay put; only content swaps/fades below. */
.statsReport{height:min(88vh,780px)!important;min-height:min(650px,88vh)!important}
.statsTabViewport{position:relative!important;flex:1!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain}
.statsTabPanel{min-height:100%;padding-bottom:6px}
.statsPanelEnter{animation:statsContentIn .22s ease both!important}
@keyframes statsContentIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.statsDailyHistory{display:grid;gap:7px}
.statsHistoryRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:rgba(255,255,255,.035)}
.statsHistoryRow span{display:grid;gap:2px;text-align:left}.statsHistoryRow strong{font-size:11px}.statsHistoryRow small{font-size:9px;color:#9fb0c5}.statsHistoryRow b{color:#f4b52f;font-size:12px}

/* Training chooser floats over the real training arena. */
.trainingModeOverlay{z-index:120!important;background:rgba(2,9,18,.58)!important;backdrop-filter:blur(2px)}
.trainingModeCard{box-shadow:0 24px 72px rgba(0,0,0,.48)!important}
.trainingModeChoice:disabled{opacity:.32!important;filter:grayscale(.35);cursor:not-allowed!important}

@media(max-width:620px){
  .statsPlayerHeader #statsPlayerBadge{width:66px!important;height:66px!important}
  .statsPlayerBadgeFallback{width:50px;height:50px;font-size:22px}
  .statsReport{height:90vh!important;min-height:0!important}
}

/* v0.16.4 — quieter Workshop ambience, consistent Training label, trophy polish */

/* The Workshop is rank-aware without using literal material textures. Keep the
   surrounding SAYWORD! world unchanged and make the tool wall a low-contrast
   ambient gradient derived from each badge family. */
#workshopPreviewScreen .workshopPreviewCard[data-rank]{
  background-image:none!important;
  border-width:3px!important;
  background-color:#071323!important;
}
#workshopPreviewScreen .workshopPreviewCard[data-rank="apprentice"]{
  border-color:#d8d1c3!important;
  background:
    radial-gradient(circle at 50% 7%,rgba(210,200,180,.18),transparent 39%),
    radial-gradient(circle at 12% 72%,rgba(63,79,96,.18),transparent 44%),
    linear-gradient(155deg,#101a26 0%,#091421 50%,#050d17 100%)!important;
}
#workshopPreviewScreen .workshopPreviewCard[data-rank="carpenter"]{
  border-color:#a96931!important;
  background:
    radial-gradient(circle at 50% 4%,rgba(157,92,42,.22),transparent 39%),
    radial-gradient(circle at 88% 72%,rgba(76,43,28,.20),transparent 45%),
    linear-gradient(155deg,#21150f 0%,#100f11 53%,#060c13 100%)!important;
}
#workshopPreviewScreen .workshopPreviewCard[data-rank="mason"]{
  border-color:#93979a!important;
  background:
    radial-gradient(circle at 48% 5%,rgba(135,140,143,.20),transparent 39%),
    radial-gradient(circle at 14% 78%,rgba(61,68,73,.22),transparent 44%),
    linear-gradient(155deg,#1a2025 0%,#0d141b 52%,#060c13 100%)!important;
}
#workshopPreviewScreen .workshopPreviewCard[data-rank="smith"]{
  border-color:#737e86!important;
  background:
    radial-gradient(circle at 52% 3%,rgba(132,145,154,.18),transparent 38%),
    radial-gradient(circle at 82% 70%,rgba(154,80,32,.13),transparent 42%),
    linear-gradient(155deg,#182027 0%,#0c1319 54%,#060b11 100%)!important;
}
#workshopPreviewScreen .workshopPreviewCard[data-rank="jeweler"]{
  border-color:#7955a9!important;
  background:
    radial-gradient(circle at 50% 4%,rgba(132,79,169,.25),transparent 40%),
    radial-gradient(circle at 82% 74%,rgba(79,39,107,.19),transparent 43%),
    linear-gradient(155deg,#171126 0%,#0d0c19 55%,#060912 100%)!important;
}
#workshopPreviewScreen .workshopPreviewCard[data-rank="engineer"]{
  border-color:#248fd2!important;
  background:
    radial-gradient(circle at 50% 4%,rgba(21,127,194,.25),transparent 40%),
    radial-gradient(circle at 14% 75%,rgba(16,76,117,.22),transparent 43%),
    linear-gradient(155deg,#081a29 0%,#06121e 54%,#030914 100%)!important;
}

/* Tools sit directly on the ambient wall. Hover/focus is a slow, consistent
   expansion rather than a translucent rollover tile. */
#workshopPreviewScreen .workshopShortcut,
#workshopPreviewScreen .workshopShortcut:hover,
#workshopPreviewScreen .workshopShortcut:focus-visible,
#workshopPreviewScreen .workshopShortcut:active{
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
#workshopPreviewScreen .workshopShortcut{
  transition:transform .38s cubic-bezier(.2,.72,.25,1),opacity .25s ease!important;
  transform:scale(1);
}
@media(hover:hover){
  #workshopPreviewScreen .workshopShortcut:hover{transform:scale(1.055)!important}
}
#workshopPreviewScreen .workshopShortcut:focus-visible{transform:scale(1.04)!important}
#workshopPreviewScreen .workshopShortcut:active{transform:scale(1.02)!important}

/* Training always has one player-facing name in the Workshop. Tier descriptions
   and level-up messaging explain how the tool becomes more capable. */
#unifiedTrainingBtn > span{letter-spacing:.06em}

/* Training can be abandoned before selecting a drill. */
.trainingModeExit{
  margin:16px auto 0;
  padding:9px 18px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:transparent;
  color:#dce6f2;
  font:inherit;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,color .2s ease;
}
.trainingModeExit:hover,.trainingModeExit:focus-visible{transform:scale(1.035);border-color:#fff;color:#fff}

/* Trophy case — badges hang with a very slow Y-axis drift. */
.trophyBadge.earned img,.trophyBadge.current img{
  animation:trophyHang 8.8s ease-in-out infinite!important;
  transform-origin:50% 4%!important;
  transform-style:preserve-3d;
}
.trophyBadge:nth-child(2) img{animation-delay:-1.5s!important}
.trophyBadge:nth-child(3) img{animation-delay:-3.2s!important}
.trophyBadge:nth-child(4) img{animation-delay:-.9s!important}
.trophyBadge:nth-child(5) img{animation-delay:-4.6s!important}
.trophyBadge:nth-child(6) img{animation-delay:-6.1s!important}
@keyframes trophyHang{
  0%,100%{transform:perspective(850px) rotateY(-2.2deg)}
  50%{transform:perspective(850px) rotateY(2.2deg)}
}
.trophyBadge[data-rank="engineer"] img{
  animation:trophyHang 8.8s ease-in-out infinite,engineerPulse 3.8s ease-in-out infinite!important;
}

/* More localized jewel sparkles, staggered across the badge instead of a sweep. */
.trophyBadge[data-rank="jeweler"]::before,
.trophyBadge[data-rank="jeweler"]::after{
  position:absolute;z-index:4;color:#fff;pointer-events:none;opacity:0;
  text-shadow:0 0 7px rgba(255,255,255,.95),0 0 15px rgba(192,126,255,.68);
}
.trophyBadge[data-rank="jeweler"]::before{
  content:'✦   ✧';left:13%;top:14%;font-size:15px;letter-spacing:40px;
  animation:jewelSparkleA 4.7s ease-in-out infinite!important;
}
.trophyBadge[data-rank="jeweler"]::after{
  content:'✧   ✦';right:11%;bottom:25%;font-size:12px;letter-spacing:31px;
  animation:jewelSparkleB 5.4s ease-in-out 1.1s infinite!important;
}
@keyframes jewelSparkleA{0%,62%,100%{opacity:0;transform:scale(.45) rotate(0)}70%{opacity:.95;transform:scale(1.15) rotate(20deg)}77%{opacity:.15;transform:scale(.72) rotate(35deg)}}
@keyframes jewelSparkleB{0%,68%,100%{opacity:0;transform:scale(.5) rotate(0)}76%{opacity:.8;transform:scale(1.08) rotate(-18deg)}83%{opacity:.08;transform:scale(.68) rotate(-34deg)}}

/* Current rank is explicit but visually secondary to the badge name. */
.trophyBadge span{display:flex;flex-direction:column;align-items:center;gap:2px}
.trophyCurrentLabel{display:block;font-size:.62rem;font-weight:500;letter-spacing:.11em;color:#bfc8d4}

@media(prefers-reduced-motion:reduce){
  #workshopPreviewScreen .workshopShortcut,.trainingModeExit{transition:none!important}
  .trophyBadge img,.trophyBadge::before,.trophyBadge::after{animation:none!important}
}


/* v0.16.5 — training selector identity + gameplay rank badge overlap */
.trainingModeCard{
  position:relative;
  padding-top:62px!important;
  overflow:visible!important;
}
.trainingModeIcon{
  position:absolute;
  left:50%;
  top:-46px;
  transform:translateX(-50%);
  width:92px;
  height:92px;
  object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.42));
  z-index:3;
  pointer-events:none;
}
#rankPanel{
  overflow:visible!important;
  padding-top:42px!important;
}
#rankBadge.rankBadgeGraphic{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  transform:translate(-50%,-46%)!important;
  z-index:3!important;
}
#rankBadge:not(.rankBadgeGraphic){
  position:absolute!important;
  left:50%!important;
  top:0!important;
  transform:translate(-50%,-42%)!important;
  z-index:3!important;
}
@media(max-width:620px){
  .trainingModeCard{padding-top:54px!important}
  .trainingModeIcon{width:78px;height:78px;top:-38px}
  #rankPanel{padding-top:35px!important}
}


/* v0.16.6 — rank-themed gameplay identity tile + XP/score separation */
#rankPanel{
  --identity-edge:rgba(255,255,255,.18);
  --identity-a:rgba(9,21,38,.92);
  --identity-b:rgba(12,31,54,.84);
  background:linear-gradient(145deg,var(--identity-a),var(--identity-b))!important;
  border:1.5px solid var(--identity-edge)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.025)!important;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
#rankPanel[data-rank-theme="apprentice"]{--identity-a:rgba(36,39,43,.94);--identity-b:rgba(87,77,59,.78);--identity-edge:#d9d0bd}
#rankPanel[data-rank-theme="carpenter"]{--identity-a:rgba(30,16,8,.95);--identity-b:rgba(104,55,20,.78);--identity-edge:#bb7a38}
#rankPanel[data-rank-theme="mason"]{--identity-a:rgba(20,24,27,.95);--identity-b:rgba(62,70,73,.76);--identity-edge:#9ca4a5}
#rankPanel[data-rank-theme="smith"]{--identity-a:rgba(17,20,23,.96);--identity-b:rgba(63,47,37,.76);--identity-edge:#b47a48}
#rankPanel[data-rank-theme="jeweler"]{--identity-a:rgba(17,10,29,.97);--identity-b:rgba(74,27,88,.82);--identity-edge:#b478dc;box-shadow:0 12px 32px rgba(0,0,0,.32),0 0 14px rgba(141,77,194,.12),inset 0 0 0 1px rgba(232,193,255,.06)!important}
#rankPanel[data-rank-theme="engineer"]{--identity-a:rgba(3,16,31,.97);--identity-b:rgba(7,67,91,.78);--identity-edge:#55bde8;box-shadow:0 12px 32px rgba(0,0,0,.32),0 0 14px rgba(50,166,224,.12),inset 0 0 0 1px rgba(130,218,255,.05)!important}
#rankPanel[data-membership="account"]{--identity-a:rgba(8,20,36,.94);--identity-b:rgba(19,43,68,.82);--identity-edge:rgba(157,181,205,.46)}
#rankPanel[data-membership="guest"]{--identity-a:rgba(8,20,36,.9);--identity-b:rgba(12,30,51,.82);--identity-edge:rgba(255,255,255,.14)}
#rankPanel.trainingIdentity #scorePill{display:none!important}

.workshopXp{
  display:inline-flex;align-items:center;gap:7px;margin:4px auto 0;padding:4px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:rgba(2,9,18,.34);color:#c5d1df;
  font-size:9px;font-weight:900;letter-spacing:.1em;
}
.workshopXp strong{color:#f4b52f;font-size:11px;letter-spacing:.04em}
.workshopXp[hidden]{display:none!important}
.xpFloat{
  position:fixed;z-index:90;pointer-events:none;color:#f4b52f;font-size:14px;font-weight:950;letter-spacing:.04em;
  text-shadow:0 2px 7px rgba(0,0,0,.7);transform:translate(-50%,-50%);
  animation:xpFloatUp .95s ease-out forwards;
}
@keyframes xpFloatUp{0%{opacity:0;transform:translate(-50%,-35%) scale(.8)}18%{opacity:1;transform:translate(-50%,-60%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-145%) scale(.9)}}
.badgePopupXp{margin:10px auto 0;padding:9px 12px;border:1px solid rgba(244,181,47,.34);border-radius:12px;background:rgba(244,181,47,.055);color:#fff}
.badgePopupXp strong{color:#f4b52f;font-size:18px}


/* v0.16.7 — stats close control, themed identity detail, training summary polish */
.statsReport{position:relative!important}
.statsCloseBtn{
  position:absolute;right:14px;top:12px;z-index:8;width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:rgba(4,14,27,.52);color:#dbe6f4;font-size:25px;line-height:1;display:grid;place-items:center;cursor:pointer;
  transition:transform .18s ease,background .18s ease;
}
.statsCloseBtn:hover,.statsCloseBtn:focus-visible{transform:scale(1.08);background:rgba(244,181,47,.14)}
.statsPlayerHeader strong[hidden]{display:none!important}
.statsPlayerHeader>div:has(strong[hidden]) span{margin-top:0!important;font-size:12px!important;color:#fff!important}

.trainingEndActions button{border-radius:999px!important;min-height:50px!important;font-weight:900!important;letter-spacing:.025em!important}
#trainingHomeBtn{border-color:rgba(255,255,255,.72)!important}

.badgePopupCard{
  --popup-a:rgba(8,20,36,.97);--popup-b:rgba(18,42,68,.91);--popup-edge:rgba(255,255,255,.25);
  background:linear-gradient(145deg,var(--popup-a),var(--popup-b))!important;
  border:2px solid var(--popup-edge)!important;
  box-shadow:0 24px 62px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.035)!important;
}
.badgePopupCard[data-rank-theme="apprentice"]{--popup-a:rgba(35,38,42,.98);--popup-b:rgba(84,75,59,.91);--popup-edge:#d9d0bd}
.badgePopupCard[data-rank-theme="carpenter"]{--popup-a:rgba(28,15,8,.98);--popup-b:rgba(91,49,19,.9);--popup-edge:#bb7a38}
.badgePopupCard[data-rank-theme="mason"]{--popup-a:rgba(17,21,24,.98);--popup-b:rgba(56,64,67,.9);--popup-edge:#9ca4a5}
.badgePopupCard[data-rank-theme="smith"]{--popup-a:rgba(15,18,21,.98);--popup-b:rgba(60,44,34,.9);--popup-edge:#b47a48}
.badgePopupCard[data-rank-theme="jeweler"]{--popup-a:rgba(15,8,27,.99);--popup-b:rgba(70,25,84,.93);--popup-edge:#b478dc;box-shadow:0 24px 62px rgba(0,0,0,.48),0 0 22px rgba(141,77,194,.13),inset 0 0 0 1px rgba(238,207,255,.05)!important}
.badgePopupCard[data-rank-theme="engineer"]{--popup-a:rgba(2,14,29,.99);--popup-b:rgba(5,60,84,.91);--popup-edge:#55bde8;box-shadow:0 24px 62px rgba(0,0,0,.48),0 0 22px rgba(50,166,224,.13),inset 0 0 0 1px rgba(146,225,255,.05)!important}
.badgePopupCard[data-rank-theme="freelance"]{--popup-a:rgba(8,20,36,.98);--popup-b:rgba(19,43,68,.92);--popup-edge:rgba(157,181,205,.55)}
.largeIdentityBadge.rankVisual{width:190px;height:170px;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;margin-bottom:8px}
.badgePopupImage{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 13px 18px rgba(0,0,0,.42))}
.badgePopupImage[hidden]{display:none!important}
.badgePopupCard .badgePopupXp{border-color:color-mix(in srgb,var(--popup-edge) 60%,transparent)!important;background:rgba(0,0,0,.12)!important}

@media(max-width:560px){.statsCloseBtn{right:9px;top:9px;width:32px;height:32px}.largeIdentityBadge.rankVisual{width:158px;height:144px}}

/* v0.16.8 — identity consolidation: Guest/Freelance badges + stable profile surfaces */

/* Guest and Freelance now use real badge art, so all Workshop identities share one silhouette treatment. */
#workshopIdentityBadge.rankBadgeButton{
  width:138px!important;height:138px!important;min-width:138px!important;min-height:138px!important;
  max-width:138px!important;max-height:138px!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;overflow:visible!important;
}
#workshopIdentityBadge.rankBadgeButton .workshopBadgeImage{
  width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;
  filter:drop-shadow(0 11px 16px rgba(0,0,0,.34));
}
#workshopIdentityBadge.rankBadgeButton .workshopBadgeCore{display:none!important}

/* Stats uses the same intentional identity art instead of a missing-circle fallback. */
.statsPlayerHeader{min-height:92px!important}
.statsPlayerHeader #statsPlayerBadge{
  width:86px!important;height:86px!important;object-fit:contain!important;display:block!important;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.38));
}
.statsPlayerHeader #statsPlayerBadge[hidden]{display:none!important}
.statsPlayerHeader .statsPlayerBadgeFallback[hidden]{display:none!important}
.statsPlayerHeader>div{min-width:0}
.statsPlayerHeader strong,.statsPlayerHeader>div span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Match the simple × used throughout Trophy Case / profile modals. */
.statsCloseBtn{
  position:absolute!important;right:11px!important;top:8px!important;z-index:12!important;
  width:38px!important;height:38px!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;color:#d7e2ef!important;font-size:28px!important;line-height:1!important;
  display:grid!important;place-items:center!important;cursor:pointer!important;box-shadow:none!important;
}
.statsCloseBtn:hover,.statsCloseBtn:focus-visible{transform:scale(1.08)!important;background:transparent!important;color:#fff!important}

/* Expanded profile is a larger version of the player's identity tile, not a badge pasted over a generic modal. */
#badgePopup .badgePopupCard{
  --popup-a:rgba(8,20,36,.98);--popup-b:rgba(18,42,68,.94);--popup-edge:#91a7bd;
  position:relative!important;width:min(90vw,430px)!important;padding:104px 24px 24px!important;
  border:2px solid var(--popup-edge)!important;border-radius:22px!important;
  background:linear-gradient(145deg,var(--popup-a),var(--popup-b))!important;
  box-shadow:0 26px 68px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.035)!important;
  overflow:visible!important;
}
#badgePopup .badgePopupCard[data-rank-theme="guest"]{--popup-a:rgba(31,36,40,.98);--popup-b:rgba(73,65,50,.92);--popup-edge:#d8cfb9}
#badgePopup .badgePopupCard[data-rank-theme="freelance"]{--popup-a:rgba(6,22,42,.99);--popup-b:rgba(13,53,83,.94);--popup-edge:#efaa2d}
#badgePopup .badgePopupCard[data-rank-theme="apprentice"]{--popup-a:rgba(35,38,42,.99);--popup-b:rgba(84,75,59,.93);--popup-edge:#d9d0bd}
#badgePopup .badgePopupCard[data-rank-theme="carpenter"]{--popup-a:rgba(28,15,8,.99);--popup-b:rgba(91,49,19,.93);--popup-edge:#bb7a38}
#badgePopup .badgePopupCard[data-rank-theme="mason"]{--popup-a:rgba(17,21,24,.99);--popup-b:rgba(56,64,67,.93);--popup-edge:#9ca4a5}
#badgePopup .badgePopupCard[data-rank-theme="smith"]{--popup-a:rgba(15,18,21,.99);--popup-b:rgba(60,44,34,.93);--popup-edge:#b47a48}
#badgePopup .badgePopupCard[data-rank-theme="jeweler"]{--popup-a:rgba(15,8,27,.99);--popup-b:rgba(70,25,84,.95);--popup-edge:#b478dc}
#badgePopup .badgePopupCard[data-rank-theme="engineer"]{--popup-a:rgba(2,14,29,.99);--popup-b:rgba(5,60,84,.94);--popup-edge:#55bde8}
#badgePopup .largeIdentityBadge.rankVisual{
  position:absolute!important;left:50%!important;top:-88px!important;transform:translateX(-50%)!important;
  width:184px!important;height:184px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;overflow:visible!important;z-index:4!important;
}
#badgePopup .badgePopupImage{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;display:block!important;filter:drop-shadow(0 13px 18px rgba(0,0,0,.42));
}
#badgePopup .badgePopupImage[hidden]{display:none!important}
#badgePopup .badgePopupCard h2{margin-top:0!important}
#badgePopup .badgePopupXp{
  border-color:color-mix(in srgb,var(--popup-edge) 58%,transparent)!important;
  background:rgba(0,0,0,.13)!important;
}

/* Stats shell can inherit a whisper of the identity palette without becoming another themed environment. */
.statsReport[data-rank-theme="guest"]{border-color:#d8cfb9!important}
.statsReport[data-rank-theme="freelance"]{border-color:#efaa2d!important}
.statsReport[data-rank-theme="apprentice"]{border-color:#d9d0bd!important}
.statsReport[data-rank-theme="carpenter"]{border-color:#bb7a38!important}
.statsReport[data-rank-theme="mason"]{border-color:#9ca4a5!important}
.statsReport[data-rank-theme="smith"]{border-color:#b47a48!important}
.statsReport[data-rank-theme="jeweler"]{border-color:#b478dc!important}
.statsReport[data-rank-theme="engineer"]{border-color:#55bde8!important}

/* The player-facing Training tool stays simply TRAINING; enhanced access is shown inside the selector/upgrade copy. */
#unifiedTrainingBtn > span{letter-spacing:.06em!important}

@media(max-width:620px){
  #workshopIdentityBadge.rankBadgeButton{width:120px!important;height:120px!important;min-width:120px!important;min-height:120px!important;max-width:120px!important;max-height:120px!important}
  .statsPlayerHeader #statsPlayerBadge{width:70px!important;height:70px!important}
  #badgePopup .badgePopupCard{padding-top:88px!important}
  #badgePopup .largeIdentityBadge.rankVisual{width:154px!important;height:154px!important;top:-72px!important}
}
#rankPanel[data-rank-theme="guest"]{--identity-a:rgba(31,36,40,.96);--identity-b:rgba(73,65,50,.82);--identity-edge:#d8cfb9}
#rankPanel[data-rank-theme="freelance"]{--identity-a:rgba(5,22,42,.97);--identity-b:rgba(13,53,83,.84);--identity-edge:#efaa2d}


/* v0.16.9 — centered Training footer + achievements naming pass */
/* Training is a true center label. The timer may occupy the right edge without
   shifting the visual center on desktop, mobile, or narrow Safari layouts. */
.app > footer .modeStatusBanner:not(:has(.bannerDivider)){
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:auto!important;
  max-width:calc(100% - 220px)!important;
  padding:0!important;
  margin:0!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
@media(max-width:680px){
  .app > footer .modeStatusBanner:not(:has(.bannerDivider)){
    left:50%!important;
    transform:translate(-50%,-50%)!important;
    max-width:calc(100% - 150px)!important;
    padding:0!important;
    justify-content:center!important;
    text-align:center!important;
  }
}
#trophyCaseTitle{text-transform:none}


/* v0.17.0 — finalized Achievements + Library assets and mobile-safe Achievements */
.achievementsHero{
  display:block;width:clamp(116px,18vw,170px);height:auto;object-fit:contain;
  margin:-58px auto 4px;position:relative;z-index:3;filter:none;
}
#trophyCaseModal{padding-top:max(76px,calc(env(safe-area-inset-top) + 54px));padding-bottom:max(24px,env(safe-area-inset-bottom));overflow-y:auto;align-items:flex-start}
#trophyCaseModal .trophyCaseCard{margin:auto;overflow:visible;max-height:none}
#trophyCaseClose{position:sticky!important;top:max(8px,env(safe-area-inset-top))!important;margin-left:auto!important;z-index:12!important}
/* Smith: faster, thicker specular band, clipped to the badge artwork footprint. */
.trophyBadge[data-rank="smith"]::after{display:none!important}
.trophyBadge[data-rank="smith"] img{position:relative;z-index:1}
.trophyBadge[data-rank="smith"]{overflow:visible!important}
.trophyBadge[data-rank="smith"]::before{
  content:'';position:absolute;z-index:2;pointer-events:none;
  left:50%;top:8px;width:min(calc(100% - 24px),170px);aspect-ratio:1/1.05;
  transform:translateX(-50%);border-radius:22%;
  background:linear-gradient(108deg,transparent 27%,rgba(255,255,255,0) 35%,rgba(255,255,255,.62) 46%,rgba(255,255,255,.18) 56%,transparent 67%);
  background-size:240% 100%;background-position:160% 0;
  -webkit-mask-image:url("../assets/badge-smith.png");mask-image:url("../assets/badge-smith.png");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  animation:smithBadgeSweep 3.8s ease-in-out infinite;
}
@keyframes smithBadgeSweep{0%,52%{background-position:160% 0;opacity:0}58%{opacity:.9}78%{background-position:-60% 0;opacity:.82}84%,100%{background-position:-60% 0;opacity:0}}
/* Subtle texture only where mobile exposes background around the modal. */
@media(max-width:680px){
  #trophyCaseModal{background-color:#020b16;background-image:linear-gradient(rgba(2,11,22,.84),rgba(2,11,22,.92)),url("../assets/background.png");background-size:cover;background-position:center;background-attachment:fixed}
  .achievementsHero{margin-top:-48px;width:132px}
  #trophyCaseModal .trophyCaseCard{width:min(94vw,760px)}
}


/* v0.17.1 — workshop icon scale, explicit Achievements close, Smith badge glint */
#unifiedLibraryBtn img{
  width:106px!important;
  height:106px!important;
}
@media(max-width:680px){
  #unifiedLibraryBtn img{width:97px!important;height:97px!important}
}
@media(max-width:390px){
  #unifiedLibraryBtn img{width:86px!important;height:86px!important}
}

/* Achievements closes only from its explicit X control. */
#trophyCaseClose{
  position:absolute!important;
  top:max(14px,env(safe-area-inset-top))!important;
  right:16px!important;
  margin:0!important;
  z-index:20!important;
}
#trophyCaseModal .trophyCaseCard{position:relative!important}

/* Remove the training question while keeping the mode selector concise. */
.trainingModeIntro{margin-top:2px!important}

/* Smith highlight: duplicate transparent badge artwork with a bright diagonal band
   clipped to the PNG itself, so the light never crosses the achievement tile. */
.trophyBadge[data-rank="smith"]::before,
.trophyBadge[data-rank="smith"]::after{display:none!important}
.trophyBadge[data-rank="smith"]{overflow:visible!important}
.trophyBadge[data-rank="smith"] > img:not(.smithLightLayer){position:relative;z-index:1}
.trophyBadge[data-rank="smith"] .smithLightLayer{
  position:absolute!important;
  top:.75rem!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(calc(100% - 1.5rem),170px)!important;
  height:auto!important;
  object-fit:contain!important;
  z-index:4!important;
  pointer-events:none!important;
  opacity:0;
  filter:brightness(2.15) contrast(1.08) drop-shadow(0 0 7px rgba(255,255,255,.28))!important;
  animation:smithGraphicGlint 2.8s ease-in-out infinite!important;
  transform-origin:center!important;
}
@keyframes smithGraphicGlint{
  0%,46%{
    opacity:0;
    clip-path:polygon(-55% 0,-20% 0,18% 100%,-17% 100%);
  }
  53%{opacity:.95}
  76%{
    opacity:.92;
    clip-path:polygon(83% 0,118% 0,156% 100%,121% 100%);
  }
  82%,100%{
    opacity:0;
    clip-path:polygon(83% 0,118% 0,156% 100%,121% 100%);
  }
}
@media(max-width:600px){
  .trophyBadge[data-rank="smith"] .smithLightLayer{
    width:min(calc(100% - 1.5rem),135px)!important;
  }
}


/* v0.17.2 — mobile grab reliability + modal interaction lock */
@media (pointer:coarse){
  #cardHolder{touch-action:none;cursor:grab;}
  #card{pointer-events:none;}
}
body.result-open #cardHolder,
body.result-open #wordWrap,
body.result-open #throwDeck,
body.result-open #aimCursor,
body.result-open #confidenceLabels{
  pointer-events:none!important;
}
#dailyReviewPanel.show,
#dailyEndPanel.show,
#completionPanel.show,
#lossPanel.show,
#warmupIntroPanel.show,
#trainingEndPanel.show{pointer-events:auto!important;}

/* v0.18.0 — live candidate: touch precision, tablet safety, celebrations, accounts */
#cardHolder{
  width:clamp(152px,14.85vw,248px)!important;
  height:clamp(178px,23.1vh,289px)!important;
  touch-action:none!important;
}
#card{transform-origin:center center}

/* Simple standalone close mark — no circular/pill chrome. */
#exitBtn{
  width:42px!important;height:42px!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border-radius:0!important;background:transparent!important;
  color:#fff!important;font-size:34px!important;font-weight:400!important;
  line-height:1!important;box-shadow:none!important;
}
#exitBtn:hover,#exitBtn:focus-visible,#exitBtn:active{background:transparent!important;transform:scale(1.08)!important;color:var(--accent)!important}

/* Missed Daily Slice teaching state. */
#lossPanel .resultMorpheme.missedMorpheme{
  border:3px solid #ef4444!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 18px rgba(239,68,68,.26)!important;
}
.sliceDivider.missedSliceDivider{
  background:#ef4444!important;
  box-shadow:0 0 10px rgba(239,68,68,.55)!important;
}

/* Completion payoff. Animation is visual-only; it never controls input/audio state. */
#arena.wordCelebration::after{
  content:"";position:absolute;inset:0;z-index:120;pointer-events:none;
  background:radial-gradient(circle at 50% 36%,rgba(255,255,255,.36),rgba(255,185,45,.15) 20%,transparent 54%);
  animation:wordResolveFlash .62s ease-out both;
}
#arena.wordCelebration #wordWrap{animation:wordResolveSlow .62s cubic-bezier(.15,.8,.25,1) both}
#arena.perfectRunCelebration::after{animation:perfectResolveFlash 1.25s ease-out both;background:radial-gradient(circle at 50% 36%,rgba(255,255,255,.72),rgba(255,196,58,.30) 24%,rgba(42,168,255,.12) 44%,transparent 68%)}
#arena.perfectRunCelebration #wordWrap{animation:perfectResolveSlow 1.25s cubic-bezier(.12,.76,.18,1) both}
@keyframes wordResolveFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes wordResolveSlow{0%{transform:scale(1)}30%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes perfectResolveFlash{0%{opacity:0}12%{opacity:1}42%{opacity:.76}100%{opacity:0}}
@keyframes perfectResolveSlow{0%{transform:scale(1)}20%{transform:scale(1.07)}55%{transform:scale(1.035)}100%{transform:scale(1)}}

/* Home fan: white-edged physical cards dealt into place. */
.startFanCard{
  outline:2px solid rgba(255,255,255,.94)!important;
  outline-offset:1px!important;
  opacity:0;
  animation:homeDeal .42s cubic-bezier(.2,.8,.2,1) forwards;
}
.startFanLeft{animation-delay:.06s!important}.startFanCenter{animation-delay:.20s!important}.startFanRight{animation-delay:.34s!important}
@keyframes homeDeal{0%{opacity:0;transform:translate(-50%,-28px) rotate(0deg) scale(.82)}100%{opacity:1}}

/* Small brand signature inside the Workshop without competing with its tools. */
.workshopBrand{margin:12px 0 5px;text-align:center;font-size:11px;letter-spacing:.19em;font-weight:900;color:rgba(255,255,255,.42)}

/* Training result geometry is identical on both actions. */
.trainingEndActions button{width:min(100%,250px)!important;min-height:50px!important;border-radius:999px!important;padding:12px 18px!important}
.trainingSummaryGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:620px){.trainingSummaryGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Account modal */
.accountModalCard{width:min(92vw,460px)!important;padding-top:34px!important}
.accountModalBadge{display:block;width:112px;height:auto;margin:-76px auto 8px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.34))}
.accountTabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 14px}
.accountTab{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.15)!important}
.accountTab.isActive{background:var(--accent)!important;color:#10141d!important;border-color:var(--accent)!important}
.accountForm{display:grid;gap:12px;text-align:left}.accountForm label{display:grid;gap:6px;font-size:12px;font-weight:900;letter-spacing:.08em;color:#dce8f8}
.accountForm input{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:#06101e;color:#fff;padding:13px 14px;font:inherit;outline:none}
.accountForm input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,188,42,.13)}
.accountForm button{margin-top:4px}.accountMessage{min-height:22px;margin:10px 0 0;color:#ffd26b;font-weight:700}.accountFinePrint{font-size:12px;color:rgba(255,255,255,.6);line-height:1.4}

/* Tablet landscape: layouts that are not yet wide-optimized politely request portrait. */
/* Landscape tablets and Chromebooks are supported. */

/* True center of Training footer regardless of the timer/other footer peers. */
.app > footer .modeStatusBanner:not(:has(.bannerDivider)){
  position:absolute!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important;width:max-content!important;max-width:70%!important;text-align:center!important;
}
#card .card-face{width:clamp(89px,7.92vw,139px)!important;height:clamp(131px,11.55vw,201px)!important}

/* v0.18.1 — home cards use alpha-aware white edge and physically deal/spin in from below. */
.startFanCard{
  outline:none!important;
  outline-offset:0!important;
  opacity:1!important;
  filter:
    drop-shadow(1px 0 0 rgba(255,255,255,.98))
    drop-shadow(-1px 0 0 rgba(255,255,255,.98))
    drop-shadow(0 1px 0 rgba(255,255,255,.98))
    drop-shadow(0 -1px 0 rgba(255,255,255,.98));
  will-change:transform;
  animation-duration:.62s!important;
  animation-timing-function:cubic-bezier(.16,.78,.22,1)!important;
  animation-fill-mode:both!important;
}
.startFanLeft{
  --fan-final:translateX(-74%) rotate(-18deg);
  --fan-start:translateX(-74%) translateY(245px) rotate(-245deg) scale(.86);
  animation-name:homeDealSpin!important;
}
.startFanCenter{
  --fan-final:translateX(-50%) translateY(-4px) rotate(0deg);
  --fan-start:translateX(-50%) translateY(265px) rotate(225deg) scale(.86);
  animation-name:homeDealSpin!important;
}
.startFanRight{
  --fan-final:translateX(-26%) rotate(18deg);
  --fan-start:translateX(-26%) translateY(245px) rotate(255deg) scale(.86);
  animation-name:homeDealSpin!important;
}
@keyframes homeDealSpin{
  0%{transform:var(--fan-start)}
  72%{transform:var(--fan-final) scale(1.035)}
  100%{transform:var(--fan-final)}
}
/* Do not allow newly revealed gameplay meaning tiles to flash before the word-complete modal. */
#arena.resolving-word #meanings{visibility:hidden!important;opacity:0!important}

/* v0.18.2 — practice chrome, true-centered training footer, and intro fan polish. */
#exitBtn{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  padding:8px!important;
  width:auto!important;
  height:auto!important;
  line-height:1!important;
}
#exitBtn:hover,#exitBtn:focus-visible,#exitBtn:active{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Training label is centered inside the white footer, independent of the timer. */
.app > footer .modeStatusBanner:not(:has(.bannerDivider)){
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:max-content!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  line-height:1.1!important;
  text-align:center!important;
  color:#0b2d52!important;
  z-index:1!important;
}

/* Double the alpha-aware white edge and start cards farther below the viewport. */
.startFanCard{
  filter:
    drop-shadow(2px 0 0 rgba(255,255,255,.99))
    drop-shadow(-2px 0 0 rgba(255,255,255,.99))
    drop-shadow(0 2px 0 rgba(255,255,255,.99))
    drop-shadow(0 -2px 0 rgba(255,255,255,.99))!important;
}
.startFanLeft{
  --fan-start:translateX(-74%) translateY(420px) rotate(-245deg) scale(.86)!important;
}
.startFanCenter{
  --fan-start:translateX(-50%) translateY(445px) rotate(225deg) scale(.86)!important;
}
.startFanRight{
  --fan-start:translateX(-26%) translateY(420px) rotate(255deg) scale(.86)!important;
}


/* v0.18.3 — center the single Daily Slice loss action */
#lossPanel.singleResultAction .resultActions{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
}
#lossPanel.singleResultAction .resultActions > #lossNextBtn{
  width:min(100%,520px)!important;
  margin:0 auto!important;
}


/* v0.18.5 — intentional word/finale celebration sequence */
.celebrationOverlay{
  position:absolute;inset:0;z-index:185;
  display:grid;place-items:center;overflow:hidden;
  background:rgba(2,9,18,.42);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,visibility 0s linear .18s;
  isolation:isolate;
}
.celebrationOverlay.show{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .14s ease;
  cursor:pointer;
}
.celebrationBurst{
  position:absolute;left:50%;top:47%;width:min(52vw,470px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.18) rotate(0deg);
  border-radius:50%;opacity:0;
  background:
    repeating-conic-gradient(from 0deg,rgba(255,190,48,.0) 0 7deg,rgba(255,190,48,.50) 8deg 10deg,rgba(255,255,255,.0) 11deg 18deg),
    radial-gradient(circle,rgba(255,255,255,.92) 0 3%,rgba(255,194,54,.70) 7%,rgba(255,145,31,.34) 23%,rgba(48,143,255,.12) 42%,transparent 66%);
  filter:drop-shadow(0 0 24px rgba(255,179,47,.52));
}
.celebrationOverlay.show .celebrationBurst{animation:celebrationBurstSpin 1.65s cubic-bezier(.12,.72,.18,1) both}
.celebrationOverlay.finale .celebrationBurst{
  width:min(70vw,660px);
  filter:drop-shadow(0 0 36px rgba(255,186,51,.72));
}
.celebrationOverlay.finale.show .celebrationBurst{animation-duration:3.8s}
.celebrationOverlay.perfectFinale .celebrationBurst{
  background:
    repeating-conic-gradient(from 0deg,rgba(255,255,255,0) 0 6deg,rgba(255,221,104,.72) 7deg 10deg,rgba(110,194,255,.24) 11deg 13deg,transparent 14deg 20deg),
    radial-gradient(circle,rgba(255,255,255,1) 0 4%,rgba(255,222,91,.86) 8%,rgba(255,148,28,.42) 25%,rgba(56,164,255,.19) 43%,transparent 68%);
}
.celebrationCopy{position:relative;z-index:4;text-align:center;transform:translateY(-2vh);pointer-events:none}
.celebrationWord{
  color:#fff;font-weight:1000;letter-spacing:.055em;line-height:.9;
  font-size:clamp(48px,9vw,116px);
  text-shadow:0 5px 0 rgba(16,48,88,.92),0 0 14px rgba(255,174,28,.80),0 0 38px rgba(255,174,28,.42);
  opacity:0;transform:scale(.35) rotate(-4deg);
}
.celebrationOverlay.show .celebrationWord{animation:celebrationWordPop .82s cubic-bezier(.14,.82,.22,1.16) .08s both}
.celebrationOverlay.finale .celebrationWord{font-size:clamp(60px,11vw,150px)}
.celebrationOverlay.perfectFinale .celebrationWord{
  color:#fff7cf;text-shadow:0 6px 0 #1a3b6b,0 0 16px #fff,0 0 32px #ffc43d,0 0 62px rgba(255,151,26,.76);
}
.celebrationHint{
  margin-top:20px;color:rgba(255,255,255,.78);font-size:clamp(11px,1.4vw,16px);
  font-weight:850;letter-spacing:.14em;text-transform:uppercase;opacity:0;
}
.celebrationOverlay.show .celebrationHint{animation:celebrationHintIn .42s ease .74s forwards}
.celebrationParticles{position:absolute;inset:0;z-index:3;pointer-events:none}
.celebrationParticle{
  position:absolute;left:50%;top:47%;opacity:0;
  transform:translate(-50%,-50%) scale(var(--particle-scale,.9));
  transform-origin:center;
  animation:celebrationParticleFly 1.35s cubic-bezier(.12,.66,.24,1) var(--delay,0s) both;
}
.finale .celebrationParticle{animation-duration:2.65s}
.celebrationParticle.isLetter,.celebrationParticle.isStar{
  font-weight:1000;color:#fff7d0;font-size:clamp(19px,2.5vw,38px);
  text-shadow:0 0 11px rgba(255,177,36,.95),0 2px 0 #16345e;
}
.celebrationParticle.isStar{color:#ffc43d;font-size:clamp(21px,3vw,46px)}
.celebrationParticle.isCard span{
  display:block;width:clamp(22px,3vw,42px);aspect-ratio:.69;
  border:2px solid #fff;border-radius:5px;
  background:#12396e url('../assets/sayword-card-back.png') center/cover no-repeat;
  box-shadow:0 0 12px rgba(255,255,255,.34),0 4px 12px rgba(0,0,0,.35);
}
@keyframes celebrationBurstSpin{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-28deg)}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1.02) rotate(18deg)}
  72%{opacity:.86;transform:translate(-50%,-50%) scale(1.08) rotate(98deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.19) rotate(148deg)}
}
@keyframes celebrationWordPop{
  0%{opacity:0;transform:scale(.28) rotate(-5deg)}
  55%{opacity:1;transform:scale(1.12) rotate(1deg)}
  78%{transform:scale(.97) rotate(0)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes celebrationHintIn{to{opacity:.82}}
@keyframes celebrationParticleFly{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.15)}
  11%{opacity:1}
  78%{opacity:1}
  100%{
    opacity:0;
    transform:translate(-50%,-50%) rotate(var(--spin,180deg)) translateX(var(--distance,180px)) scale(var(--particle-scale,.9));
  }
}
@media(max-width:720px){
  .celebrationBurst{width:min(78vw,430px)}
  .celebrationOverlay.finale .celebrationBurst{width:min(95vw,590px)}
  .celebrationCopy{transform:translateY(-1vh)}
}
@media(prefers-reduced-motion:reduce){
  .celebrationBurst,.celebrationParticle,.celebrationWord,.celebrationHint{animation-duration:.01ms!important;animation-delay:0ms!important}
}

/* v0.18.7 — SAYWORD! Dictionary */
.dictionaryCard{width:min(760px,94vw);max-height:min(86dvh,820px);overflow:auto;text-align:left;padding-top:42px}
.dictionaryCard h2{text-align:center;margin:4px 44px 8px}
.dictionaryIntro{max-width:620px;margin:0 auto 18px;text-align:center;color:rgba(255,255,255,.76);line-height:1.45}
.dictionarySearch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:18px 0 10px}
.dictionarySearch input{min-width:0;background:#081528;color:#fff;border:1px solid rgba(255,255,255,.24);border-radius:12px;padding:13px 14px;font:inherit;font-size:16px;outline:none}
.dictionarySearch input:focus{border-color:#ffbd3e;box-shadow:0 0 0 2px rgba(255,189,62,.15)}
.dictionarySearch button{border:0;border-radius:12px;padding:0 18px;font-weight:900;background:#fff;color:#0b1d37;cursor:pointer}
.dictionaryStatus{min-height:22px;margin:8px 2px 14px;color:rgba(255,255,255,.68);font-size:14px}
.dictionaryResults{display:grid;gap:12px}
.dictionaryResultCard{background:rgba(4,15,29,.64);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:15px 16px}
.dictionaryResultCard h3{margin:0 0 10px;color:#fff;font-size:17px}
.dictionaryWord{font-size:clamp(25px,5vw,38px);font-weight:1000;letter-spacing:.02em;color:#fff}
.dictionarySource{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;background:#ffbd3e;color:#071426;font-size:10px;font-weight:1000;vertical-align:middle}
.dictionaryDefinition{font-size:16px;line-height:1.5;color:#e9eef6}
.dictionarySpanish{margin-top:5px;color:#aebdd1;font-size:14px}
.dictionaryMorphemes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dictionaryMorpheme{flex:1 1 125px;min-width:105px;border:1px solid rgba(255,189,62,.48);border-radius:12px;padding:10px;background:rgba(255,189,62,.055)}
.dictionaryMorpheme b{display:block;color:#ffcf68;font-size:17px;margin-bottom:4px}
.dictionaryMorpheme span{display:block;color:#e9eef6;font-size:13px;line-height:1.35}
.dictionaryMorpheme small{display:block;color:#9eacc0;margin-top:4px;line-height:1.3}
.dictionaryList{margin:0;padding-left:20px;color:#e9eef6;line-height:1.5}.dictionaryList li+li{margin-top:7px}
@media(max-width:560px){.dictionaryCard{width:96vw;max-height:88dvh;padding-left:18px;padding-right:18px}.dictionarySearch{grid-template-columns:1fr}.dictionarySearch button{min-height:44px}}


/* v0.18.9 — Workshop tool identity */
.toolWindowBrand{position:absolute;top:16px;left:18px;width:86px;z-index:2}
.toolWindowBrand img{display:block;width:100%;height:auto}
.toolHeroIcon{display:block;width:min(190px,42vw);height:170px;object-fit:contain;margin:4px auto 8px}
.dictionaryHeroIcon{height:190px}
@media(max-width:560px){.toolWindowBrand{top:14px;left:14px;width:70px}.toolHeroIcon{width:min(155px,42vw);height:145px}.dictionaryHeroIcon{height:160px}}


/* v0.19.0 — unified Workshop tool shell.
   Achievements is the canonical model: explicit top-right X, no backdrop-close,
   consistent branding, hero icon, responsive internal scrolling. */
.workshopToolShell{
  position:relative;
  width:min(92vw,760px);
  max-height:min(88dvh,860px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:82px 28px 30px;
  border:1px solid rgba(244,174,38,.58);
  border-radius:22px;
  background:linear-gradient(180deg,#102742,#071526);
  box-shadow:0 30px 80px rgba(0,0,0,.58);
  scrollbar-gutter:stable;
}
.workshopToolShell .toolWindowBrand{
  position:absolute;
  top:18px;
  left:20px;
  width:76px;
  z-index:4;
  pointer-events:none;
}
.workshopToolShell .toolWindowBrand img{display:block;width:100%;height:auto}
.workshopToolShell > .identityModalClose,
.trainingModeClose{
  position:absolute!important;
  top:calc(12px + env(safe-area-inset-top,0px))!important;
  right:14px!important;
  z-index:8!important;
  width:42px!important;
  height:42px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#eef5ff!important;
  font-size:32px!important;
  line-height:1!important;
  cursor:pointer;
}
.workshopToolShell > .identityModalClose:hover,
.workshopToolShell > .identityModalClose:focus-visible,
.trainingModeClose:hover,.trainingModeClose:focus-visible{transform:scale(1.08);color:#fff!important}

/* Tool identity: same hierarchy everywhere. */
.workshopToolShell .toolHeroIcon,
.trainingModeCard .trainingModeIcon{
  display:block;
  width:min(190px,44vw);
  height:165px;
  object-fit:contain;
  margin:0 auto 10px;
}
.dictionaryCard.dictionaryCard{padding-top:82px;text-align:left}
.dictionaryCard .dictionaryHeroIcon{height:175px}
.dictionaryCard h2,.dictionaryCard .dictionaryIntro{text-align:center}
.toolPreviewCard{padding-top:82px!important}
.toolPreviewCard .toolPreviewIcon{display:block;width:min(190px,44vw);height:165px;object-fit:contain;margin:0 auto 10px}
.toolPreviewCard .toolPreviewInitial{width:118px;height:118px;border-radius:22px;font-size:3rem;margin:4px auto 16px}

/* Training is a Workshop tool window too: no separate EXIT TRAINING chip. */
.trainingModeOverlay{
  z-index:500;
  padding:20px;
  background:rgba(2,10,20,.82);
  backdrop-filter:blur(8px);
}
.trainingModeCard{
  width:min(92vw,760px)!important;
  max-height:min(88dvh,860px)!important;
  overflow:auto!important;
  padding:82px 28px 30px!important;
  border:1px solid rgba(244,174,38,.58)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#102742,#071526)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.58)!important;
}
.trainingModeCard h2{margin:0 0 4px;color:#fff;font-size:clamp(24px,4vw,34px)}
.trainingModeCard .trainingModeIcon{height:170px;margin-bottom:4px}
.trainingModeEyebrow{margin:0 0 4px}
.trainingModeIntro{margin:8px auto 18px}
.trainingModeExit{display:none!important}

/* Prevent clicks on the modal backdrop from reading as a close affordance. */
#dictionaryModal,#toolPreviewModal,#trophyCaseModal{cursor:default}

@media(max-width:560px){
  .workshopToolShell,.trainingModeCard{
    width:96vw!important;
    max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))!important;
    padding:76px 18px 24px!important;
  }
  .workshopToolShell .toolWindowBrand{top:16px;left:16px;width:64px}
  .workshopToolShell .toolHeroIcon,.trainingModeCard .trainingModeIcon{width:min(155px,46vw);height:140px}
  .dictionaryCard .dictionaryHeroIcon{height:150px}
}

/* v0.19.1 — Achievements is the canonical Workshop tool window.
   Hero artwork overlaps the top edge; no SAYWORD! Slice branding inside tools. */
.toolWindowBrand{display:none!important}

/* Shared tool card geometry — matches Achievements. */
.workshopToolShell,
.trainingModeCard,
.statsReport.statsToolShell{
  position:relative!important;
  width:min(92vw,760px)!important;
  max-height:none!important;
  overflow:visible!important;
  padding:118px 28px 30px!important;
  border:1px solid rgba(244,174,38,.58)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#102742,#071526)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.58)!important;
  text-align:center!important;
}

/* The overlay, not the card, owns scrolling so the hero can protrude cleanly. */
#dictionaryModal,#toolPreviewModal,#trophyCaseModal,.trainingModeOverlay,.statsOverlay{
  overflow-y:auto!important;
  align-items:flex-start!important;
  padding-top:max(76px,calc(env(safe-area-inset-top) + 54px))!important;
  padding-bottom:max(24px,env(safe-area-inset-bottom))!important;
}
#dictionaryModal .workshopToolShell,
#toolPreviewModal .workshopToolShell,
#trophyCaseModal .workshopToolShell,
.trainingModeOverlay .trainingModeCard,
.statsOverlay .statsToolShell{margin:auto!important}

/* One close treatment everywhere. */
.workshopToolShell > .identityModalClose,
.trainingModeClose,
.statsToolShell > .statsCloseBtn{
  position:absolute!important;
  top:12px!important;
  right:14px!important;
  z-index:20!important;
  width:42px!important;
  height:42px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#eef5ff!important;
  font-size:32px!important;
  line-height:1!important;
  cursor:pointer!important;
}

/* Hero icon overlaps the top edge just like Achievements. */
.workshopToolShell > .toolHeroIcon,
.trainingModeCard > .trainingModeIcon,
.statsToolShell > .statsToolHero{
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:0!important;
  transform:translate(-50%,-48%)!important;
  width:clamp(118px,18vw,170px)!important;
  height:clamp(118px,18vw,170px)!important;
  object-fit:contain!important;
  margin:0!important;
  z-index:8!important;
  pointer-events:none!important;
}
.dictionaryCard > .dictionaryHeroIcon{width:clamp(120px,19vw,178px)!important;height:clamp(120px,19vw,178px)!important}

/* Achievements keeps its already-correct hero behavior. */
#trophyCaseModal .achievementsHero{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  transform:translate(-50%,-48%)!important;
  width:clamp(116px,18vw,170px)!important;
  height:auto!important;
  margin:0!important;
  z-index:8!important;
}

.toolWindowTitle{
  margin:0 0 14px!important;
  color:#fff!important;
  font-size:clamp(24px,4vw,34px)!important;
  line-height:1.08!important;
  text-align:center!important;
}
.toolWindowIntro{
  max-width:620px!important;
  margin:0 auto 20px!important;
  color:#c5d0df!important;
  font-size:14px!important;
  line-height:1.45!important;
  text-align:center!important;
}

/* Training: keep tier label, but the hero no longer obscures the heading. */
.trainingModeCard{padding-top:118px!important}
.trainingModeCard .trainingModeIcon{margin:0!important}
.trainingModeEyebrow{margin:0 0 8px!important}
.trainingModeIntro{margin:0 auto 20px!important}
.trainingModeExit{display:none!important}

/* Stats now uses the same shell while preserving its existing tabs/content. */
.statsToolShell{height:auto!important;min-height:0!important}
.statsToolShell .statsPlayerHeader{margin-top:4px!important}
.statsToolShell .statsTabs{margin-top:18px!important}
.statsHeroLogo{display:none!important}

/* Tool previews: icon or fallback occupies the hero position. */
.toolPreviewCard > .toolPreviewIcon{
  position:absolute!important;left:50%!important;top:0!important;
  transform:translate(-50%,-48%)!important;
  width:clamp(118px,18vw,170px)!important;height:clamp(118px,18vw,170px)!important;
  object-fit:contain!important;margin:0!important;z-index:8!important;
}
.toolPreviewCard > .toolPreviewInitial{
  position:absolute!important;left:50%!important;top:0!important;
  transform:translate(-50%,-48%)!important;
  width:132px!important;height:132px!important;margin:0!important;
  display:grid;place-items:center;border-radius:22px!important;z-index:8!important;
}
.toolPreviewTier{display:block;margin:0 0 8px!important}

@media(max-width:560px){
  .workshopToolShell,.trainingModeCard,.statsReport.statsToolShell{
    width:94vw!important;
    padding:104px 18px 24px!important;
  }
  .workshopToolShell > .toolHeroIcon,
  .trainingModeCard > .trainingModeIcon,
  .statsToolShell > .statsToolHero,
  #trophyCaseModal .achievementsHero,
  .toolPreviewCard > .toolPreviewIcon{
    width:132px!important;height:132px!important;
  }
  .dictionaryCard > .dictionaryHeroIcon{width:138px!important;height:138px!important}
  .toolPreviewCard > .toolPreviewInitial{width:118px!important;height:118px!important}
}

/* v0.19.3 — My Slices and Archive are active Apprentice tool surfaces. */
#unifiedLibraryBtn,#unifiedArchiveBtn,
.workshopToolTile[data-tool-kind="my-slices"],
.workshopToolTile[data-tool-kind="archive"]{
  filter:none!important;
  opacity:1!important;
}
.toolPreviewCard > .toolPreviewIcon{filter:none!important;opacity:1!important}
.toolPreviewDynamic{width:100%;margin:18px auto 0}
.emptyToolMessage{
  margin:20px auto 6px!important;
  padding:20px 18px;
  max-width:560px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:rgba(255,255,255,.045);
  color:#d4deeb!important;
  font-size:15px!important;
  font-weight:700;
  letter-spacing:.01em;
}
.archiveCalendar{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  width:min(100%,650px);
  margin:10px auto 0;
}
.archiveDay{
  position:relative;
  min-height:78px;
  padding:8px 5px 7px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  text-align:center;
  font:inherit;
}
.archiveDay span,.archiveDay strong,.archiveDay small,.archiveDay em{display:block}
.archiveDay span{font-size:9px;font-weight:900;letter-spacing:.08em;color:#8fa0b7;text-transform:uppercase}
.archiveDay strong{margin:3px 0 1px;font-size:20px;line-height:1;color:#fff}
.archiveDay small{font-size:9px;font-weight:800;letter-spacing:.06em;color:#b8c5d5;text-transform:uppercase}
.archiveDay em{margin-top:4px;font-size:7px;font-style:normal;font-weight:950;letter-spacing:.08em;color:#f4b52f}
.archiveDay.isToday{border-color:#f4b52f;background:rgba(244,181,47,.10);box-shadow:0 0 0 1px rgba(244,181,47,.18) inset}
.archiveHint{margin:14px auto 0!important;max-width:590px;color:#91a2b7!important;font-size:12px!important;line-height:1.4!important}
@media(max-width:620px){
  .archiveCalendar{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .archiveDay{min-height:70px}
}
@media(max-width:390px){
  .archiveCalendar{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* v0.19.5 — final Workshop icon assets */
.workshopShortcut > img,.tierPreviewIcon,.workshopToolTile > img{
  display:block;object-fit:contain;flex:0 0 auto;
}
.workshopShortcut > img{width:52px;height:52px;margin:0 auto 8px}
.tierPreviewIcon{width:62px;height:62px}
.workshopToolTile > img{width:58px;height:58px;margin:0 0 3px}
/* Preserve clean silhouettes; hero uses the same source asset as the tile. */
.toolPreviewCard > .toolPreviewIcon{object-fit:contain!important}

/* v0.19.6 — Keep illustrated Workshop tool icons at full color/brightness.
   Availability is communicated by access/COMING SOON copy, not by desaturating artwork. */
.workshopShortcut.comingShortcut{
  opacity:1!important;
  filter:none!important;
}
.workshopShortcut.comingShortcut img{
  opacity:1!important;
  filter:none!important;
}
.workshopShortcut.comingShortcut span{
  opacity:1;
}


/* v0.20.0 — MY SLICES carousel + hands-free Partner Practice. */
.mySlicesTool{width:100%;max-width:670px;margin:0 auto;text-align:center}
.mySlicesTabs{display:inline-flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(3,12,24,.55);margin:0 auto 12px}
.mySlicesTabs button{min-width:112px;padding:9px 18px;border:0;border-radius:999px;background:transparent;color:#9eacbf;font:900 11px/1 system-ui;letter-spacing:.1em}
.mySlicesTabs button.isActive{background:#f5b52f;color:#071526}
.mySlicesDeckCount{margin:2px 0 8px;color:#8fa0b7;font-size:11px;font-weight:900;letter-spacing:.12em}
.mySlicesCarousel{position:relative;display:grid;grid-template-columns:38px 78px minmax(220px,330px) 78px 38px;align-items:center;justify-content:center;gap:7px;min-height:270px;overflow:hidden;padding:10px 0}
.mySlicesPeek{height:190px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:linear-gradient(145deg,#d9b23c,#f7dc65);color:#10213c;display:grid;place-items:center;font:950 19px/1 system-ui;opacity:.38;transform:scale(.86)}
.mySlicesPeekLeft{transform:translateX(20px) scale(.86) rotate(-4deg)}
.mySlicesPeekRight{transform:translateX(-20px) scale(.86) rotate(4deg)}
.mySlicesNav{z-index:3;width:38px;height:52px;border:0;background:transparent;color:#f4b52f;font-size:42px;line-height:1;cursor:pointer}
.mySliceFlashcard{position:relative;z-index:4;width:100%;height:235px;padding:26px;border:2px solid rgba(244,181,47,.82);border-radius:22px;background:linear-gradient(145deg,#f7de69,#d7aa2e);color:#10213c;box-shadow:0 20px 40px rgba(0,0,0,.32);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;cursor:pointer;transform-style:preserve-3d;transition:transform .22s ease,box-shadow .22s ease}
.mySliceFlashcard:hover{transform:translateY(-3px);box-shadow:0 24px 48px rgba(0,0,0,.38)}
.mySliceFlashcard.isFlipped{background:linear-gradient(145deg,#f4f0df,#d9d0b5)}
.mySliceFlashcard small{font:950 10px/1 system-ui;letter-spacing:.16em;opacity:.58}
.mySliceFlashcard strong{max-width:100%;font:950 clamp(27px,5vw,46px)/1.05 system-ui;text-wrap:balance}
.mySliceFlashcard span{font:800 10px/1 system-ui;letter-spacing:.08em;opacity:.55}
.mySliceFavorite,.partnerPracticeLaunch{display:block;margin:8px auto 0;min-width:220px;padding:12px 20px;border-radius:999px;font:950 11px/1 system-ui;letter-spacing:.09em;cursor:pointer}
.mySliceFavorite{border:1px solid rgba(244,181,47,.5);background:transparent;color:#f4b52f}
.mySliceFavorite.isFavorite{background:rgba(244,181,47,.12)}
.partnerPracticeLaunch{margin-top:18px;border:0;background:#f5b52f;color:#071526}.partnerPracticeLaunch:disabled{opacity:.35;cursor:not-allowed}
.mySlicesPartnerHint{margin:9px auto 0!important;color:#8394a9!important;font-size:11px!important}

.partnerPracticeModal{z-index:700!important;background:#020a14!important;padding:0!important;overflow:hidden!important}
.partnerPracticeCard{position:relative;width:100vw;height:100dvh;min-height:100vh;background:radial-gradient(circle at 50% 35%,#12304f 0,#071526 48%,#020914 100%);color:#fff;display:grid;place-items:center;padding:max(22px,env(safe-area-inset-top)) max(26px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(26px,env(safe-area-inset-left));text-align:center}
.partnerPracticeClose{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));z-index:10;width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:34px;line-height:1;cursor:pointer}
.partnerPracticeIntro{width:min(760px,90vw)}.partnerPracticeIntro h2{margin:0 0 12px;font-size:clamp(29px,5vw,48px)}.partnerPracticeIntro>p{max-width:650px;margin:0 auto 22px;color:#c9d4e2;font-size:clamp(15px,2vw,19px);line-height:1.5}
.partnerGestureGuide{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px auto;width:min(590px,90vw)}.partnerGestureGuide div{padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.055)}.partnerGestureGuide b,.partnerGestureGuide strong,.partnerGestureGuide span{display:block}.partnerGestureGuide b{font-size:42px;color:#f5b52f}.partnerGestureGuide strong{font-size:18px;margin:3px 0}.partnerGestureGuide span{font-size:12px;color:#9cacbf}
.partnerPracticeNote{font-size:13px!important;color:#8fa0b7!important}.partnerPrimaryBtn{padding:15px 28px;border:0;border-radius:999px;background:#f5b52f;color:#071526;font:950 12px/1 system-ui;letter-spacing:.09em;cursor:pointer}
.partnerPracticeDeck{width:min(1080px,94vw)}.partnerDeckMeta{display:flex;justify-content:space-between;max-width:920px;margin:0 auto 12px;color:#a9b6c7;font:900 11px/1 system-ui;letter-spacing:.12em}.partnerPracticeCardFace{width:min(920px,88vw);height:min(58vh,470px);margin:0 auto;border:3px solid rgba(244,181,47,.86);border-radius:28px;background:linear-gradient(145deg,#f6dd67,#d5a72b);color:#10213c;box-shadow:0 28px 70px rgba(0,0,0,.4);display:grid;place-items:center;padding:30px;font:950 clamp(54px,11vw,130px)/1 system-ui;letter-spacing:.02em;text-wrap:balance}.partnerMotionStatus{margin:16px auto 0;font:950 12px/1 system-ui;letter-spacing:.14em;color:#9cacbf}.partnerMotionStatus[data-state="correct"]{color:#57dc9b}.partnerMotionStatus[data-state="pass"]{color:#ff6d73}.partnerFallbackControls{display:flex;justify-content:center;gap:14px;margin:16px auto 0}.partnerFallbackControls button{min-width:150px;padding:12px 20px;border:1px solid rgba(255,255,255,.23);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font:900 11px/1 system-ui;letter-spacing:.08em}.partnerFallbackControls button:first-child{border-color:rgba(87,220,155,.55)}.partnerFallbackControls button:last-child{border-color:rgba(255,109,115,.55)}
@media(max-width:650px){.mySlicesCarousel{grid-template-columns:30px 44px minmax(190px,1fr) 44px 30px;gap:3px}.mySlicesPeek{height:160px;font-size:14px}.mySliceFlashcard{height:210px}.mySlicesTabs button{min-width:96px;padding-inline:13px}}
@media(orientation:portrait) and (max-width:800px){.partnerPracticeDeck::before{content:'TURN YOUR DEVICE SIDEWAYS';display:block;margin:0 auto 16px;color:#f5b52f;font:950 12px/1 system-ui;letter-spacing:.13em}}

/* v0.20.2 — MY SLICES definition-side typography refinement (desktop-first). */
.mySliceFlashcard.isFlipped strong{
  width:100%;
  max-width:88%;
  font-size:clamp(18px,2.4vw,28px);
  line-height:1.18;
  overflow-wrap:anywhere;
  text-wrap:balance;
}

/* v0.20.3 Library + Training Catalog */
.librarySectionNote{margin:0 auto 8px!important;color:#9eacbf!important;font-size:12px!important}
.removeMyWord{display:block;margin:8px auto 0;min-width:220px;padding:11px 18px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:transparent;color:#c9d4e2;font:900 10px/1 system-ui;letter-spacing:.08em}
.partnerPracticeResults{width:min(720px,90vw);text-align:center}.partnerPracticeResults h2{font-size:clamp(28px,4vw,46px);margin:0 0 18px}.partnerPracticeResults>strong{display:block;color:#f5b52f;font:950 clamp(36px,7vw,72px)/1 system-ui}.partnerPracticeResults>p{color:#c9d4e2;font-size:18px}.partnerResultActions{display:flex;justify-content:center;gap:12px;margin-top:24px}.partnerResultActions button{padding:14px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;font:950 11px/1 system-ui;letter-spacing:.08em}.partnerResultActions button:first-child{background:#f5b52f;color:#071526;border-color:#f5b52f}
.trainingModeCard{width:min(1050px,94vw)!important;max-height:88vh!important;overflow:auto!important}.trainingCatalogLegend{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 16px}.trainingCatalogLegend span{font:900 10px/1 system-ui;letter-spacing:.08em;color:#a8b6c8;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 12px}.trainingCatalogGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.trainingCatalogCard{border:1px solid rgba(255,255,255,.12);background:rgba(5,17,33,.64);border-radius:15px;padding:13px;text-align:left}.trainingCatalogCard h3{margin:0 0 10px;font:950 13px/1.1 system-ui;color:#fff}.trainingCatalogCard small{display:block;margin-top:9px;color:#72849b;font-size:9px}.trainingLevelRow{display:grid;gap:5px}.trainingCatalogCard button{width:100%;padding:9px;border-radius:9px;border:1px solid rgba(245,181,47,.35);background:rgba(245,181,47,.1);color:#f4c35c;font:900 9px/1 system-ui;letter-spacing:.05em;text-align:left}.trainingCatalogCard button:disabled{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#66758a}.trainingProfessionalSection{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}.trainingProfessionalSection>h3{margin:0;color:#f5b52f}.trainingProfessionalSection>p{margin:6px 0 14px;color:#8fa0b7;font-size:11px}.sliceFavoriteHeart{margin-left:12px;border:0;background:transparent;color:#ffb33c;font-size:25px;line-height:1;cursor:pointer;align-self:center}
@media(max-width:900px){.trainingCatalogGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v0.20.4 interface prototypes */
.toolPreviewCard:has(.prototypeTool){max-width:1180px;width:min(92vw,1180px)}
.prototypeTool{width:min(100%,1000px);margin:22px auto 0;text-align:left}.segmented,.filterChips{display:flex;justify-content:center;gap:10px;margin:12px 0}.segmented button,.filterChips button,.prototypeTool button{font:inherit;font-weight:800;letter-spacing:.05em}.segmented button,.filterChips button{border:1px solid #53677d;background:#0c1c30;color:#aebbd0;border-radius:999px;padding:10px 22px}.segmented button.active,.filterChips button.active{background:#f7b52d;color:#071425;border-color:#f7b52d}.filterChips.compact button{padding:7px 16px;font-size:.78rem}.leaderRows{border:1px solid #34495f;border-radius:18px;overflow:hidden}.playerRankRow{display:grid;grid-template-columns:44px 18px 1fr 150px 130px;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #263c52;color:#fff}.playerRankRow:last-child{border-bottom:0}.playerRankRow small{color:#91a4bb}.playerRankRow em{text-align:right;color:#f7b52d;font-style:normal;font-weight:900}.playerRankRow.isYou{background:#172b42;box-shadow:inset 4px 0 #f7b52d}.presenceDot{width:11px;height:11px;border-radius:50%;background:#68788a;display:inline-block}.presenceDot.active{background:#20c55a;box-shadow:0 0 8px #20c55a}.guildCards,.matchCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.guildCards article,.matchCards article,.workshopSample{position:relative;border:1px solid #34495f;background:#07192b;border-radius:18px;padding:18px;color:#fff}.guildMemberLine{display:grid;grid-template-columns:16px 1fr 100px auto;align-items:center;gap:8px;padding:10px 0;border-top:1px solid #24394e}.guildMemberLine button,.guildActions button,.matchCards button,.workshopSample button{border:1px solid #a87820;background:#10233a;color:#f7b52d;border-radius:999px;padding:8px 14px}.guildActions{display:flex;gap:8px;margin-top:14px}.prototypeNote{color:#91a4bb;text-align:center}.challengeRecord,.guildmasterStats{display:flex;justify-content:center;gap:14px}.challengeRecord>div,.guildmasterStats span{min-width:150px;text-align:center;border:1px solid #34495f;border-radius:14px;padding:12px;color:#aebbd0}.challengeRecord strong,.guildmasterStats b{display:block;font-size:1.5rem;color:#f7b52d}.matchCards article>.presenceDot{position:absolute;right:18px;top:18px}.prototypePrimary{display:block;margin:20px auto!important;background:#f7b52d!important;color:#071425!important;border:0!important;border-radius:999px!important;padding:13px 24px!important}.guildmasterWidgets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.guildmasterWidgets button{text-align:left;border:1px solid #34495f;background:#07192b;color:#fff;border-radius:16px;padding:18px}.guildmasterWidgets button b{display:block;color:#f7b52d;margin-bottom:5px}.guildmasterWidgets button span{color:#9fb0c4;font-weight:500;font-size:.86rem}.achievementTabs{display:flex;justify-content:center;gap:8px;margin:15px 0 22px}.achievementTabs button{border:1px solid #4c6075;background:#0b1d31;color:#aebbd0;border-radius:999px;padding:10px 26px;font-weight:900}.achievementTabs button.active{background:#f7b52d;color:#071425}.minorAchievementGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.minorAchievement{border:1px solid #3c5065;background:#091b2d;border-radius:16px;padding:18px;text-align:center;opacity:.55}.minorAchievement.earned{opacity:1}.minorAchievement b{display:block;margin:auto auto 8px;width:54px;height:54px;border-radius:50%;background:#b77b16;color:#ffe39a;font-size:30px;line-height:54px}.minorAchievement strong{display:block;color:#fff}.minorAchievement span{display:block;color:#9eafc2;font-size:.82rem;margin-top:5px}.partnerPracticeResults #partnerResultGrade{display:block;color:#f7b52d;font-size:clamp(3rem,6vw,6.5rem);line-height:1}.partnerPracticeResults #partnerResultScore{font-size:clamp(1.8rem,3vw,3rem);color:#cbd6e4;margin:24px 0}.trainingCatalogGrid{display:block!important}.trainingDomain{margin:22px 0 34px}.trainingDomain>h3{color:#f7b52d;text-align:left;font-size:1.35rem;border-bottom:1px solid #42556b;padding-bottom:10px}.trainingDomainGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.trainingCatalogCard h4{font-size:1.05rem;margin:0 0 12px;color:#fff}

/* v0.20.5 — desktop-first interface refinement */
/* Training: fixed header/hero, scroll catalog only. */
.trainingModeOverlay{padding-top:120px!important;align-items:flex-start!important;overflow:hidden!important}
.trainingModeCard{width:min(94vw,1180px)!important;max-height:calc(100vh - 150px)!important;overflow:visible!important;display:flex!important;flex-direction:column!important;padding:118px 28px 24px!important}
.trainingModeCard > .trainingModeIcon{top:0!important;transform:translate(-50%,-48%)!important;width:170px!important;height:170px!important}
.trainingCatalogScroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 14px;margin:0 -8px;scrollbar-gutter:stable}
.trainingCatalogLegend{flex:0 0 auto}.trainingModeTitle,.trainingModeEyebrow,.trainingModeIntro{flex:0 0 auto}
.trainingProfessionalSection .trainingCatalogGrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.trainingProfessionalSection .trainingCatalogCard{min-height:115px}

/* Leaderboard: all-time vertical report with Global/Guild tabs. */
.leaderboardPrototype{max-width:900px!important}
.leaderboardScope{position:sticky;top:0;z-index:2;padding:6px 0;background:linear-gradient(180deg,#102742 75%,rgba(16,39,66,0))}
.leaderboardScrollReport{display:grid;gap:26px;margin-top:18px}
.leaderboardCategory>h3{margin:0 0 10px;color:#f7b52d;font-size:1.25rem;letter-spacing:.06em}
.leaderboardCategory .leaderRows{background:#07192b}

/* Challenge: compact vertical matches with avatar slot before username. */
.challengeList{display:grid;gap:12px;margin-top:18px}
.challengeListRow{display:grid;grid-template-columns:70px 1fr auto;gap:16px;align-items:center;border:1px solid #34495f;background:#07192b;border-radius:18px;padding:16px 18px;color:#fff;text-align:left}
.challengeAvatar{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:2px solid #8ba0b8;background:linear-gradient(145deg,#162d48,#091725);color:#f7b52d;font-weight:950;font-size:1.35rem}
.challengeAvatar .presenceDot{position:absolute;right:-1px;bottom:3px;border:2px solid #07192b;width:13px;height:13px}
.challengePlayer h3{margin:0 0 5px;font-size:1.05rem}.challengePlayer b{font-size:.85rem;color:#fff}.challengePlayer p{margin:6px 0 0;color:#aebbd0;font-size:.9rem}
.challengeListRow>button{border:1px solid #a87820;background:#10233a;color:#f7b52d;border-radius:999px;padding:10px 18px;font-weight:900}.challengeListRow>button:disabled{color:#7f8ea1;border-color:#425369}

/* My Guilds: one guild per row with crest visible. */
.guildList{display:grid;gap:13px;margin-top:18px}
.guildListItem{display:grid;grid-template-columns:88px 1fr auto;gap:18px;align-items:center;border:1px solid #34495f;background:#07192b;border-radius:18px;padding:16px 18px;color:#fff;text-align:left}
.guildListCrest{width:78px;height:78px;object-fit:contain}.guildListInfo h3{margin:0 0 6px}.guildListInfo p{margin:0;color:#cbd5e2}.guildListInfo small{display:block;margin-top:6px;color:#66dc96;font-weight:800}.guildListItem .guildActions{margin:0;justify-content:flex-end}

/* Guildmaster starts with tools, not summary metrics. */
.guildmasterStats{display:none!important}
.guildmasterProto .guildmasterWidgets{margin-top:4px}

/* Partner Practice result hierarchy: celebration first, score second. */
.partnerPracticeResults #partnerResultGrade{color:#f7b52d!important;font-size:clamp(3rem,6vw,6.5rem)!important;line-height:1!important;margin:10px 0 18px}
.partnerPracticeResults #partnerResultScore{font-size:clamp(2.25rem,4vw,3.8rem)!important;color:#cbd6e4!important;margin:0 0 26px!important;font-weight:900}

@media(max-width:900px){.trainingProfessionalSection .trainingCatalogGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.guildListItem{grid-template-columns:72px 1fr}.guildListItem .guildActions{grid-column:1/-1}.challengeListRow{grid-template-columns:58px 1fr}.challengeListRow>button{grid-column:2;justify-self:start}}


/* v0.20.6 interface refinement */
.leaderboardScope{display:none!important}
.challengeGroup{margin:24px 0 30px}.challengeGroup>h3{margin:0 0 10px;color:#f7b52d;font-size:1.05rem;letter-spacing:.08em;border-bottom:1px solid #34495f;padding-bottom:9px}
.achievementTabs{display:none!important}.achievementSectionTitle{color:#f7b52d;letter-spacing:.1em;text-align:left;margin:20px 0 14px}.achievementSectionDivider{margin-top:34px;padding-top:24px;border-top:1px solid #34495f}.minorAchievement img{display:block;width:76px;height:76px;object-fit:contain;margin:0 auto 10px}.minorAchievement b{display:none}
@media(max-width:1100px){.trainingDomainGrid,.trainingProfessionalSection .trainingCatalogGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:680px){.trainingDomainGrid,.trainingProfessionalSection .trainingCatalogGrid{grid-template-columns:1fr!important}}

/* v0.20.7 — hybrid surfaces + populated prototype history */
/* White breaks up the navy environment without changing the brand shell. */
.trainingDomain>h3{background:#fff;color:#0a1d33!important;border:0!important;border-radius:13px;padding:12px 16px!important;box-shadow:0 5px 16px rgba(0,0,0,.16)}
.trainingCatalogCard{background:#12304f!important;border-color:#355778!important}
.trainingProfessionalSection>h3{display:inline-block;background:#fff;color:#0a1d33!important;border-radius:13px;padding:12px 16px}
.playerRankRow{background:linear-gradient(90deg,#fff 0%,#f3f7fb 58%,#dbe9f5 100%);color:#10233a!important;border-bottom-color:#c7d5e1!important}
.playerRankRow small{color:#566b82!important}.playerRankRow em{color:#8a5c08!important}.playerRankRow.isYou{background:linear-gradient(90deg,#fff7df,#f5e3aa)!important;color:#10233a!important}
.leaderboardCategory .leaderRows{background:#fff!important;border-color:#9eb2c5!important}
.guildListItem{background:#fff!important;color:#10233a!important;border-color:#aebdca!important}.guildListInfo p{color:#425b73!important}.guildListInfo small{color:#167844!important}
.guildDetailDemo{margin-top:18px;background:#fff;border-radius:18px;padding:18px;color:#10233a}.guildDetailHead{display:flex;align-items:center;gap:14px;border-bottom:1px solid #d5dfe7;padding-bottom:12px}.guildDetailHead img{width:72px;height:72px;object-fit:contain}.guildDetailHead h3,.guildDetailHead p{margin:0}.guildMemberDemo{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid #e1e8ee}.guildMemberDemo img{width:48px;height:48px;object-fit:contain}.guildMemberDemo span small{display:block;color:#60758b;margin-top:3px}.guildMemberDemo em{font-style:normal;font-weight:900;color:#8a5c08}.guildCreateJoin{display:flex;justify-content:center;gap:10px;margin-bottom:14px}.guildCreateJoin button{border:1px solid #a87820;background:#10233a;color:#f7b52d;border-radius:999px;padding:10px 16px}
.challengeListRow{grid-template-columns:70px 1fr 90px auto!important;background:linear-gradient(90deg,#fff,#eef5fb)!important;color:#10233a!important;border-color:#aebdca!important}.challengePlayer b{color:#10233a!important}.challengePlayer p{color:#566b82!important}.challengeAvatar{background:#e8eef4!important;border-color:#879caf!important}.challengeAvatar img{width:54px;height:54px;object-fit:contain}.challengeIdentity{text-align:center}.challengeIdentity img{display:block;width:54px;height:54px;object-fit:contain;margin:auto}.challengeIdentity small{color:#536a82;font-size:.7rem;font-weight:900}.challengeAvatar .presenceDot{border-color:#fff!important}
.guildmasterWidgets button{background-color:#d8d0c3!important;background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),url('../assets/workshop-mason.png')!important;background-size:cover!important;background-position:center!important;color:#10233a!important;border-color:#a99d8c!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 5px 14px rgba(0,0,0,.18)}
.guildmasterWidgets button:nth-child(even){background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),url('../assets/workshop-engineer.png')!important}.guildmasterWidgets button b{color:#5d3e08!important}.guildmasterWidgets button span{color:#243b51!important}
.dictionaryDiscovery{margin:18px 0;background:#fff;color:#10233a;border-radius:18px;padding:20px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.18)}.dictionaryDiscovery>p{margin:0;color:#7d5a12;font-weight:950;letter-spacing:.12em;font-size:.75rem}.dictionaryDiscovery h3{font-size:3rem!important;color:#10233a!important;margin:5px 0!important}.dictionaryDiscovery>strong{font-size:1.15rem}.dictionaryExamples{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0}.dictionaryExamples span{background:#edf3f8;border-radius:999px;padding:8px 13px}.dictionaryExamples b{color:#b47708}.dictionaryDiscovery small{display:block;color:#5b6f84;line-height:1.4}
/* Archive unplayed dates use white surfaces. Completion classes can override this later. */
.archiveDay:not(.isToday){background:#fff!important;border-color:#b8c7d3!important}.archiveDay:not(.isToday) span,.archiveDay:not(.isToday) strong,.archiveDay:not(.isToday) small{color:#17314b!important}
/* Stats: preserve functionality, increase substance/readability. */
.statsReport.statsToolShell{background:#102742!important}.statsSection{background:linear-gradient(135deg,#fff,#edf4f9)!important;color:#10233a!important;border-radius:18px!important;padding:18px!important;margin-bottom:14px!important}.statsSection h2,.statsSection dt,.statsSection dd,.statsSection strong{color:#10233a!important}.statsSection dd{font-size:1.25rem!important;font-weight:950!important}.statsHistoryRow{background:#fff!important;color:#10233a!important;border-color:#d1dde6!important}.statsHistoryRow small{color:#60758b!important}.statsTab{font-size:.9rem!important}.statsPanelNote{color:#5c7187!important}
@media(max-width:900px){.challengeListRow{grid-template-columns:58px 1fr 70px!important}.challengeListRow>button{grid-column:2/4!important}}


/* v0.20.8 readability + identity refinement */
.trainingCatalogCard{background:#fff!important;border-color:#c9d5df!important;color:#10233a!important;box-shadow:0 4px 12px rgba(0,0,0,.14)}
.trainingCatalogCard h4,.trainingCatalogCard h3{color:#10233a!important}.trainingCatalogCard small{color:#5c7187!important}.trainingLevelRow button{background:#edf3f8!important;color:#17314b!important;border-color:#c4d2de!important}.trainingLevelRow button:not([disabled]){background:#f7b52d!important;color:#071425!important;border-color:#f7b52d!important}
.trainingDomain>h3{border:0!important;border-radius:12px;padding:11px 14px!important;color:#fff!important;background:#b78318!important}.trainingDomain:nth-child(2)>h3{background:#337b4d!important}.trainingDomain:nth-child(3)>h3{background:#28679b!important}.trainingDomain:nth-child(4)>h3{background:#7652a6!important}.trainingDomain:nth-child(5)>h3{background:#a45c34!important}.trainingDomain:nth-child(6)>h3{background:#9a7a18!important}
/* Leaderboard returns to dark competitive surface */
.leaderboardCategory{background:#07192b!important;border:1px solid #34495f!important}.leaderRows{background:#07192b!important}.playerRankRow{width:100%;border:0;border-bottom:1px solid #263c52!important;background:#07192b!important;text-align:left;cursor:pointer}.playerRankRow:first-child{background:linear-gradient(90deg,rgba(247,181,45,.24),#07192b 55%)!important;box-shadow:inset 4px 0 #f7b52d}.playerRankRow.isYou{background:#172b42!important}.playerRankRow strong{color:#fff}.playerRankRow small{color:#91a4bb}.playerRankRow em{color:#f7b52d}
/* Guild opening list only; actual crests and avatars */
.guildListItem{background:#fff!important}.guildListCrest{width:78px!important;height:78px!important;object-fit:contain!important}.guildDetailDemo{background:#fff!important;color:#10233a!important;border-radius:18px;padding:18px;margin-top:16px}.guildDetailHead img{width:88px!important;height:88px!important;object-fit:contain!important}.guildMemberDemo{width:100%;grid-template-columns:58px 1fr auto!important;background:#f4f7fa!important;border:0!important;border-top:1px solid #d4dfe8!important;color:#10233a!important;text-align:left}.guildMemberDemo img{width:48px!important;height:48px!important;object-fit:contain!important}.guildMemberDemo small{color:#61758a!important}.guildBackBtn{background:#10233a!important;color:#fff!important;border-radius:999px!important;padding:8px 14px!important;border:0!important}
.challengeAvatar img,.challengeIdentity img{object-fit:contain!important}
/* Achievements become larger collected objects, not empty dark chips */
.minorAchievementGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important}.minorAchievement{background:transparent!important;border:0!important;padding:10px!important}.minorAchievement img{width:112px!important;height:112px!important}.minorAchievement strong{font-size:1rem}.minorAchievement.earned strong{color:#fff!important}
/* Archive states */
.archiveDay.isMissed{background:#fff!important;border-color:#d8a7a7!important}.archiveDay.isMissed span,.archiveDay.isMissed strong,.archiveDay.isMissed small{color:#17314b!important}.archiveDay.isMissed em{color:#9b3030!important}.archiveDay.isComplete{background:#163451!important;border-color:#31516d!important}.archiveDay.isComplete span,.archiveDay.isComplete strong,.archiveDay.isComplete small{color:#fff!important}
/* Guildmaster texture belongs to environment, not controls */
.guildmasterProto{position:relative;border-radius:20px;padding:18px;background-color:#081a2c!important;background-image:linear-gradient(rgba(4,17,30,.88),rgba(4,17,30,.88)),url('../assets/workshop-mason.png')!important;background-size:cover!important;background-position:center!important}.guildmasterWidgets button{background:#fff!important;background-image:none!important;color:#10233a!important;border-color:#cbd7e1!important;box-shadow:0 5px 14px rgba(0,0,0,.2)!important}.guildmasterWidgets button:nth-child(even){background:#fff!important;background-image:none!important}.guildmasterWidgets button b{color:#17314b!important}.guildmasterWidgets button span{color:#5c7187!important}.workshopSample{background:#fff!important;color:#10233a!important}
/* Stats remain stable from the top/left as viewport narrows. */
.statsOverlay{align-items:flex-start!important;overflow:auto!important}.statsReport{margin:38px auto!important;transform:none!important;left:auto!important;right:auto!important;max-width:calc(100vw - 24px)!important}.statsTabViewport,.statsTabPanel,.statsSection{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere}.statsList{min-width:0!important}
@media(max-width:760px){.playerRankRow{grid-template-columns:34px 12px minmax(105px,1fr) 82px 80px!important;padding:11px 9px!important;gap:6px!important;font-size:.78rem}.playerRankRow small{font-size:.65rem}.playerRankRow em{font-size:.7rem}.leaderboardCategory{overflow:hidden}.minorAchievementGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.statsReport{margin:20px 12px!important;width:calc(100vw - 24px)!important}.statsTabs{overflow-x:auto!important;justify-content:flex-start!important}.statsTab{flex:0 0 auto!important}}


/* v0.20.9 — identity cleanup + Guild/Guildmaster/Training refinement */
/* Training: discipline color owns both section header and list accent. */
.trainingDomain{--domain:#d8a12a}
.trainingDomain--language{--domain:#d6a128}.trainingDomain--science{--domain:#3f9b69}.trainingDomain--math{--domain:#3a78b8}.trainingDomain--social{--domain:#a66a42}.trainingDomain--tech{--domain:#6c73bc}.trainingDomain--testprep{--domain:#9b6db1}
.trainingDomain>h3{border:0!important;border-radius:14px!important;padding:14px 18px!important;color:#fff!important;background:linear-gradient(100deg,var(--domain),color-mix(in srgb,var(--domain) 62%,#0d2035))!important;box-shadow:inset 0 1px rgba(255,255,255,.22),0 5px 14px rgba(0,0,0,.18)!important}
.trainingCatalogCard{background:#fff!important;border-color:#cad5df!important;color:#10233a!important;box-shadow:0 4px 12px rgba(0,0,0,.14)!important}.trainingCatalogCard h4,.trainingCatalogCard h3{color:#10233a!important}.trainingCatalogCard small{color:#65798c!important}.trainingCatalogCard .trainingLevelRow button{border-color:color-mix(in srgb,var(--domain,#d6a128) 60%,#8797a6)!important;background:color-mix(in srgb,var(--domain,#d6a128) 10%,white)!important;color:#10233a!important}.trainingCatalogCard .trainingLevelRow button:not(:disabled):first-child{box-shadow:inset 4px 0 var(--domain,#d6a128)!important}.trainingCatalogCard .trainingLevelRow button:disabled{background:#edf1f4!important;color:#8b98a7!important;border-color:#d5dde4!important}
.trainingProfessionalSection>h3{color:#10233a!important;background:linear-gradient(100deg,#eef1f4,#9ca7b1)!important;border-radius:14px!important;padding:14px 18px!important;text-align:left!important}.trainingProfessionalSection{--domain:#818c96}.trainingProfessionalSection .trainingCatalogCard{background:#fff!important}.trainingProfessionalSection .trainingLevelRow button{border-color:#aab4bd!important;background:#f2f4f6!important;color:#263746!important}.professionalLevels{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}

/* My Guilds: crest-first, dark environment, no invite on overview. */
.guildList{gap:18px!important}.guildListItem{display:grid!important;grid-template-columns:minmax(180px,30%) 1fr!important;gap:28px!important;align-items:center!important;background:#07192b!important;color:#fff!important;border:1px solid #30485f!important;padding:22px 28px!important;min-height:240px!important}.guildCrestStage{display:flex;align-items:center;justify-content:center;min-height:190px}.guildListCrest{width:190px!important;height:190px!important;max-width:100%!important;object-fit:contain!important;filter:drop-shadow(0 12px 16px rgba(0,0,0,.32))}.guildListInfo h3{font-size:1.55rem!important;color:#fff!important;margin:0 0 10px!important}.guildListInfo p{color:#cbd5e2!important;font-size:1rem!important}.guildListInfo small{color:#66dc96!important;margin:8px 0 18px!important}.guildListInfo .openGuildBtn{border:1px solid #a87820;background:#10233a;color:#f7b52d;border-radius:999px;padding:10px 18px;font-weight:900}
.guildDetailDemo{background:#07192b!important;color:#fff!important;border:1px solid #30485f!important}.guildDetailHead{border-color:#2b4158!important;gap:24px!important}.guildDetailHead img{width:180px!important;height:180px!important;filter:drop-shadow(0 10px 14px rgba(0,0,0,.32))}.guildDetailHead h3{font-size:1.6rem;color:#fff}.guildDetailHead p{color:#b9c7d6}.guildInviteBtn,.guildBackBtn{border:1px solid #a87820!important;background:#10233a!important;color:#f7b52d!important;border-radius:999px!important;padding:9px 15px!important;font-weight:900}.guildMembersHeading{color:#f7b52d;font-size:1.1rem;letter-spacing:.08em;margin:22px 0 8px}.guildMemberDemo{grid-template-columns:74px 1fr auto!important;background:#0b2035!important;color:#fff!important;border:1px solid #263e55!important;border-radius:14px!important;margin:8px 0!important;padding:12px 14px!important}.guildMemberAvatar{position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center}.guildMemberDemo img{width:64px!important;height:64px!important;object-fit:contain!important}.guildMemberAvatar .presenceDot{position:absolute;right:0;bottom:1px;border:2px solid #0b2035}.guildMemberDemo small{color:#93a8bd!important}.guildMemberDemo em{color:#f7b52d!important}

/* Challenge identity separation: avatar left, rank badge right. */
.challengeAvatar img{width:64px!important;height:64px!important;object-fit:contain!important}.challengeIdentity img{width:58px!important;height:58px!important;object-fit:contain!important}

/* Guildmaster: navy environment, white readable tools, top-aligned, responsive without squishing. */
.guildmasterProto{background:#081a2c!important;background-image:none!important;padding:18px!important}.guildmasterWidgets{grid-template-columns:repeat(3,minmax(220px,1fr))!important;align-items:stretch!important}.guildmasterWidgets button{min-height:150px!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:flex-start!important;text-align:left!important;padding:22px!important;background:#fff!important;color:#10233a!important;border-color:#cbd7e1!important;background-image:none!important}.guildmasterWidgets button b{color:#17314b!important;margin:0 0 10px!important}.guildmasterWidgets button span{color:#5c7187!important;line-height:1.45!important}.workshopSample{background:#fff!important;color:#10233a!important}.guildmasterSubpanel{background:#fff;color:#10233a;border-radius:16px;padding:20px;margin-top:10px}.guildmasterCompactPanel h3{margin:10px 0 16px}.gmCompactList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gmCompactList button,.gmPanelClose{background:#10233a!important;color:#fff!important;border:1px solid #a87820!important;border-radius:12px!important;padding:12px 14px!important;text-align:left!important}.gmPanelClose{border-radius:999px!important;display:inline-block!important}
@media(max-width:1050px){.guildmasterWidgets{grid-template-columns:repeat(2,minmax(240px,1fr))!important}.guildListItem{grid-template-columns:160px 1fr!important}.guildListCrest{width:155px!important;height:155px!important}.guildCrestStage{min-height:160px}}
@media(max-width:680px){.guildmasterWidgets{grid-template-columns:1fr!important}.guildmasterWidgets button{min-height:135px!important}.gmCompactList{grid-template-columns:1fr}.guildListItem{grid-template-columns:120px 1fr!important;padding:16px!important;gap:14px!important;min-height:170px!important}.guildListCrest{width:118px!important;height:118px!important}.guildCrestStage{min-height:120px}.guildListInfo h3{font-size:1.2rem!important}.guildDetailHead{align-items:flex-start!important}.guildDetailHead img{width:120px!important;height:120px!important}.guildMemberDemo{grid-template-columns:62px 1fr!important}.guildMemberDemo em{grid-column:2}.guildMemberDemo img{width:54px!important;height:54px!important}}
\n\n/* v0.20.10 — leaderboard dark restoration + archive action clarity */
.leaderboardPrototype{max-width:980px!important;color:#fff!important}
.leaderboardScrollReport{display:grid!important;gap:34px!important}
.leaderboardCategory{background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important}
.leaderboardCategory>h3{color:#f7b52d!important;font-size:1.45rem!important;letter-spacing:.04em!important;margin:0 0 14px!important}
.leaderboardCategory .leaderRows,.leaderRows{background:#07192b!important;border:1px solid #34495f!important;border-radius:20px!important;overflow:hidden!important}
.playerRankRow{display:grid!important;grid-template-columns:58px 16px minmax(220px,1.4fr) minmax(130px,.8fr) minmax(95px,.5fr)!important;align-items:center!important;gap:14px!important;width:100%!important;min-width:0!important;padding:18px 24px!important;background:#07192b!important;border:0!important;border-bottom:1px solid #263c52!important;color:#fff!important;box-sizing:border-box!important}
.playerRankRow:last-child{border-bottom:0!important}
.playerRankRow:first-child{background:#07192b!important;box-shadow:none!important}
.playerRankRow.isYou{background:#172b42!important;box-shadow:inset 5px 0 #f7b52d!important}
.playerRankRow strong{color:#fff!important;font-size:1.05rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.playerRankRow small{color:#91a4bb!important;font-size:.94rem!important;white-space:nowrap!important}
.playerRankRow em{color:#f7b52d!important;font-style:normal!important;font-weight:900!important;text-align:right!important;white-space:nowrap!important}
.playerRankRow .presenceDot{width:12px!important;height:12px!important}
.archiveDay.isMissed em{color:#a87820!important}.archiveDay.isComplete em{color:#f7b52d!important}
@media(max-width:760px){
  .leaderboardPrototype{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .leaderboardCategory{width:100%!important;overflow:hidden!important}
  .leaderboardCategory .leaderRows,.leaderRows{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .playerRankRow{grid-template-columns:34px 12px minmax(0,1fr) 72px 76px!important;padding:13px 10px!important;gap:6px!important;font-size:.78rem!important}
  .playerRankRow strong{font-size:.82rem!important;min-width:0!important}.playerRankRow small{font-size:.68rem!important}.playerRankRow em{font-size:.76rem!important}
}

/* v0.20.11 — canonical identity art, Guildmaster group drill-down, Profile prototype */
.profileShortcut img,.profileToolTile img{object-fit:contain!important;border-radius:18px!important}
.profilePrototype{max-width:760px}.profileHero{display:flex;align-items:center;gap:22px;padding:20px;border:1px solid #34495f;border-radius:18px;background:#07192b}.profileHero img{width:120px;height:120px;object-fit:contain}.profileHero h3{margin:0;color:#fff;font-size:2rem}.profileHero p{color:#9fb0c4}.profileOptions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.profileOptions button{background:#fff!important;color:#10233a!important;border:1px solid #cbd7e1!important;border-radius:16px!important;padding:18px!important;text-align:left!important}.profileOptions button span{display:block;color:#60758a;font-weight:500;margin-top:6px;font-size:.84rem}
.guildListCrest,.guildDetailHead img,.challengeAvatar img,.guildMemberAvatar img{object-fit:contain!important;object-position:center!important}
.guildMemberDemo{background:#07192b!important;color:#fff!important;border-top-color:#294057!important}.guildMemberDemo small{color:#9fb0c4!important}.guildDetailDemo{background:#07192b!important;color:#fff!important;border:1px solid #30485f!important}.guildDetailDemo p{color:#b8c6d6}.guildDetailHead{display:flex;gap:18px;align-items:center}.guildDetailHead img{width:150px!important;height:150px!important}.guildInviteBtn{border:1px solid #a87820;background:#10233a;color:#f7b52d;border-radius:999px;padding:9px 15px;font-weight:900}
.guildmasterSubpanel{background:transparent!important;color:#fff!important;padding:0!important}.guildmasterCompactPanel{background:#07192b;border:1px solid #30485f;border-radius:18px;padding:18px}.guildmasterCompactPanel h3{color:#fff}.guildmasterCompactPanel p{color:#aebfd1}.gmGroupList{display:grid;gap:14px}.gmGroupRow{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;background:#07192b!important;color:#fff!important;border:1px solid #34495f!important;border-radius:18px!important;padding:18px 20px!important;text-align:left!important}.gmGroupRow span b{display:block;color:#fff;font-size:1.15rem}.gmGroupRow small{display:block;color:#aebfd1;margin-top:5px}.gmGroupRow em{display:block;color:#66dc96;font-style:normal;font-size:.8rem;font-weight:800;margin-top:7px}.gmGroupRow>strong{color:#f7b52d}.gmGroupDetail{background:#07192b;border:1px solid #30485f;border-radius:18px;padding:20px;color:#fff}.gmGroupsBack{border:1px solid #a87820!important;background:#10233a!important;color:#f7b52d!important;border-radius:999px!important;padding:8px 14px!important}.gmGroupDetail h3{font-size:1.5rem;margin:18px 0 4px}.gmGroupDetail p{color:#aebfd1}.gmGroupAnalytics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.gmGroupAnalytics span{background:#fff;color:#10233a;border-radius:14px;padding:14px;text-align:center}.gmGroupAnalytics b{display:block;font-size:1.5rem}.gmGroupAnalytics small{color:#61758a}.gmRoster{display:grid;gap:8px}.gmRoster button{display:flex!important;justify-content:space-between!important;gap:12px!important;background:#fff!important;color:#10233a!important;border:1px solid #cbd7e1!important;border-radius:12px!important;padding:12px 14px!important;text-align:left!important}.gmRoster button span{color:#61758a;font-size:.82rem}
@media(max-width:760px){.profileOptions{grid-template-columns:1fr}.profileHero img{width:90px;height:90px}.gmGroupAnalytics{grid-template-columns:1fr}.gmGroupRow{grid-template-columns:1fr!important;gap:10px}.gmRoster button{flex-direction:column}.guildDetailHead{align-items:flex-start}.guildDetailHead img{width:110px!important;height:110px!important}}


/* v0.20.13 deeper ecosystem prototypes */
.challengeSelf{display:flex;align-items:center;gap:18px;margin:4px 0 28px;padding:16px 20px;border:1px solid rgba(255,184,43,.28);border-radius:22px;background:rgba(3,19,35,.55)}
.challengeSelf img{width:112px;height:112px;object-fit:contain}.challengeSelf div{display:flex;flex-direction:column;gap:5px}.challengeSelf b{font-size:1.35rem}.challengeSelf span{color:#b8c8dc;font-weight:700}
.challengeListRow{grid-template-columns:150px minmax(0,1fr) 150px 118px!important;min-height:160px}.challengeAvatar{position:relative;width:138px;height:138px;display:grid;place-items:center}.challengeAvatar>img:first-child{width:132px;height:132px;object-fit:contain}.challengeAvatarCrest{position:absolute!important;width:52px!important;height:62px!important;object-fit:contain;right:-3px;bottom:-2px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}.challengeAvatar .presenceDot{position:absolute;right:4px;top:9px}.challengeScore{text-align:center;color:#7d8b9a}.challengeScore strong{display:block;font-size:2.2rem;line-height:1}.challengeScore small{display:block;margin-top:9px;font-weight:900;letter-spacing:.12em}.challengeScore.win{color:#20a85b}.challengeScore.loss{color:#d64949}
.guildMemberDemo>em{display:flex!important;flex-direction:column;align-items:flex-end;gap:3px}.guildMemberDemo>em small{font-size:.65rem;letter-spacing:.12em;color:#8194aa}.guildMemberDemo>em b{font-size:1.15rem;color:#ffb72b}.guildPlayerProfile{padding:8px}.guildPlayerHero{display:grid;grid-template-columns:180px 1fr 90px;gap:22px;align-items:center;padding:20px;border-bottom:1px solid #29445d}.guildPlayerHero>img:first-child{width:170px;height:170px;object-fit:contain}.guildPlayerBadge{width:78px;height:78px;object-fit:contain}.guildPlayerMatchGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.guildPlayerMatchGrid article{background:#071c2e;border:1px solid #29445d;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px}.guildPlayerMatchGrid small{color:#ffb72b;font-weight:900;letter-spacing:.12em}
.archivePrelaunch{max-width:720px;margin:20px auto;text-align:center;padding:38px;border:1px solid #36516c;border-radius:26px;background:#071c2e;display:flex;flex-direction:column;gap:14px}.archivePrelaunch>p{color:#ffb72b;font-weight:900;letter-spacing:.16em}.archivePrelaunch h3{font-size:2rem}.archivePrelaunch span{color:#b8c8dc}.archivePrelaunch>div button,.archiveReturnBtn{border-radius:999px;padding:13px 22px;font-weight:900}.archiveStartBtn{background:#ffb72b;color:#07162a;border:0}.archiveReturnBtn{align-self:flex-start;background:transparent;color:#c9d8e8;border:1px solid #496278}
.gmClassActions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.gmClassActions button{min-height:150px;border-radius:20px;background:#fff;color:#0b2036;border:1px solid #cdd8e1;text-align:left;padding:18px;display:grid;grid-template-columns:70px 1fr;grid-template-rows:auto auto;column-gap:14px}.gmClassActions img{grid-row:1/3;width:64px;height:64px;object-fit:contain}.gmClassActions b{font-size:1rem}.gmClassActions span{color:#526b83}.gmRoster .gmAddStudent{border:2px dashed #7890a5;background:rgba(255,255,255,.04)!important;color:#d8e5f0}.gmStudentAnalytics{padding:22px;background:#fff;color:#0c2036;border-radius:20px}.gmStudentAnalytics>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.gmStudentAnalytics span{padding:14px;background:#edf3f8;border-radius:14px;display:flex;flex-direction:column}.gmStudentAnalytics b{font-size:1.5rem}.gmActionPopup{position:relative;margin-top:18px;padding:25px;background:#fff;color:#0c2036;border-radius:22px}.gmActionPopup>img{width:90px;height:90px;object-fit:contain}.gmActionClose{position:absolute;right:15px;top:12px;border:0;background:none;font-size:1.7rem}.customListForm{margin-top:18px;padding:24px;background:#fff;color:#0c2036;border-radius:20px}.customListForm label{display:flex;flex-direction:column;gap:6px;margin:14px 0;font-weight:900}.customListForm input,.customListForm textarea{border:1px solid #b9c7d3;border-radius:12px;padding:12px;font:inherit}.customListForm>div{display:flex;gap:12px;margin-top:15px}.customListShare{margin-top:20px!important;padding:18px;background:#edf3f8;border-radius:15px;flex-direction:column!important}.fakeQr{width:110px;height:110px;background:repeating-conic-gradient(#071c2e 0 25%,#fff 0 50%) 50%/22px 22px;border:8px solid #fff;box-shadow:0 0 0 1px #adbcc8}
.profileAvatarStage{display:flex;flex-direction:column;gap:8px;align-items:center}.profileAvatarStage button,.profileScreenName{border:1px solid #ffb72b;color:#ffb72b;background:transparent;border-radius:999px;padding:8px 13px;font-weight:900}.profileQuickStats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}.profileQuickStats article{background:#fff;color:#0c2036;border-radius:20px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:7px}.profileQuickStats img{width:80px;height:80px;object-fit:contain}.profileQuickStats strong{font-size:2rem}.profileQuickStats button{margin-top:auto;border:0;background:#0d2944;color:#fff;border-radius:999px;padding:9px 12px}
.playerPopupBackdrop{position:fixed;inset:0;z-index:9999;background:rgba(0,8,18,.82);display:grid;place-items:center;padding:20px}.playerPopup{position:relative;width:min(520px,94vw);background:#0a2238;border:1px solid #d29825;border-radius:26px;padding:30px;text-align:center;color:#fff}.playerPopup>img:first-of-type{width:180px;height:180px;object-fit:contain}.playerPopupBadge{position:absolute;width:76px;height:76px;object-fit:contain;left:calc(50% + 55px);top:150px}.playerPopup>div{display:inline-flex;flex-direction:column;margin:12px;padding:12px}.playerPopupClose{position:absolute;right:15px;top:12px;background:none;border:0;color:#fff;font-size:2rem}
.minorAchievement:not(.earned){opacity:.3}.minorAchievement img{width:125px!important;height:125px!important;object-fit:contain}
@media(max-width:850px){.challengeListRow{grid-template-columns:100px minmax(0,1fr) 90px!important}.challengeListRow>button{grid-column:2/4}.challengeAvatar{width:95px;height:95px}.challengeAvatar>img:first-child{width:92px;height:92px}.challengeAvatarCrest{width:40px!important;height:46px!important}.guildPlayerHero{grid-template-columns:120px 1fr}.guildPlayerHero>img:first-child{width:115px;height:115px}.guildPlayerBadge{display:none}.guildPlayerMatchGrid,.gmClassActions,.profileQuickStats{grid-template-columns:1fr}.gmClassActions button{grid-template-columns:60px 1fr}.challengeSelf img{width:86px;height:86px}}


/* v0.20.14 — My Cards naming, Slice of the Day, identity scale, compact class tool menu, 10-word custom list editor */
/* Guild member identity: avatar is the primary person marker; rank badge remains separate in profile. */
.guildMemberDemo{grid-template-columns:112px minmax(0,1fr) auto!important;min-height:124px!important;padding:14px 18px!important}
.guildMemberAvatar{width:104px!important;height:104px!important;overflow:visible!important}
.guildMemberDemo .guildMemberAvatar>img{width:100px!important;height:100px!important;object-fit:contain!important;transform:scale(1.12);transform-origin:center}
.guildMemberAvatar .presenceDot{right:1px!important;bottom:4px!important;width:15px!important;height:15px!important}

/* Challenge identity: enlarge the actual avatar substantially while retaining crest overlap and status dot. */
.challengeListRow{grid-template-columns:245px minmax(0,1fr) 150px 118px!important;min-height:238px!important;padding:18px 22px!important;overflow:visible!important}
.challengeAvatar{width:224px!important;height:224px!important;overflow:visible!important;background:#e8eef4!important}
.challengeAvatar>img:first-child{width:218px!important;height:218px!important;object-fit:contain!important;transform:scale(1.34);transform-origin:center!important}
.challengeAvatarCrest{width:78px!important;height:92px!important;right:-12px!important;bottom:-9px!important;z-index:3!important}
.challengeAvatar .presenceDot{width:18px!important;height:18px!important;right:8px!important;top:12px!important;z-index:4!important}

/* Group detail tools are icon-menu items, not cards. */
.gmClassActions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;margin:20px auto 24px!important;max-width:620px!important;align-items:start!important}
.gmClassActions button{min-width:0!important;min-height:0!important;padding:8px!important;background:transparent!important;border:0!important;border-radius:0!important;color:#fff!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;text-align:center!important;box-shadow:none!important;overflow:visible!important}
.gmClassActions button img{width:92px!important;height:92px!important;object-fit:contain!important;grid-row:auto!important}
.gmClassActions button b{font-size:.92rem!important;letter-spacing:.08em!important;color:#fff!important;line-height:1.1!important;white-space:normal!important}
.gmClassActions button span{display:none!important}

/* Custom Lists: ten visible word entries; each word supports at most five Slice/meaning pairs. */
.customListForm{max-width:1080px!important;margin-left:auto!important;margin-right:auto!important}
.customListNameLabel{max-width:520px!important}
.customListInstructions{color:#526b83!important;margin:10px 0 18px!important;line-height:1.45!important}
.customWordEntries{display:flex!important;flex-direction:column!important;gap:14px!important;margin:16px 0 22px!important}
.customWordEntry{border:1px solid #cad6e0!important;border-radius:16px!important;padding:16px!important;background:#f5f8fb!important}
.customWordHead{display:grid!important;grid-template-columns:90px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;margin-bottom:12px!important}
.customWordHead b{color:#0b2036!important;letter-spacing:.08em!important}
.customWordHead input{border:1px solid #b9c7d3!important;border-radius:10px!important;padding:10px 12px!important;font:inherit!important;min-width:0!important}
.customSliceFields{display:grid!important;grid-template-columns:90px minmax(0,1fr)!important;gap:8px 12px!important;align-items:center!important}
.customFieldLabel{font-size:.72rem!important;font-weight:950!important;letter-spacing:.1em!important;color:#5a7086!important}.customFieldLabel small{font-weight:700!important;letter-spacing:0!important}
.customFiveGrid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;min-width:0!important}
.customFiveGrid input{width:100%!important;min-width:0!important;border:1px solid #b9c7d3!important;border-radius:9px!important;padding:9px 8px!important;font:inherit!important;font-size:.82rem!important}
.customListActions{display:flex!important;gap:12px!important;margin-top:15px!important;flex-wrap:wrap!important}

@media(max-width:980px){
  .challengeListRow{grid-template-columns:180px minmax(0,1fr) 120px!important}.challengeAvatar{width:168px!important;height:168px!important}.challengeAvatar>img:first-child{width:164px!important;height:164px!important;transform:scale(1.28)}.challengeAvatarCrest{width:62px!important;height:72px!important}.challengeListRow>button{grid-column:2/4!important;justify-self:start!important}
  .customFiveGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:680px){
  .guildMemberDemo{grid-template-columns:82px minmax(0,1fr)!important}.guildMemberAvatar{width:76px!important;height:76px!important}.guildMemberDemo .guildMemberAvatar>img{width:74px!important;height:74px!important}.guildMemberDemo>em{grid-column:2!important;align-items:flex-start!important}
  .challengeListRow{grid-template-columns:128px minmax(0,1fr)!important;min-height:180px!important}.challengeAvatar{width:120px!important;height:120px!important}.challengeAvatar>img:first-child{width:118px!important;height:118px!important;transform:scale(1.22)}.challengeAvatarCrest{width:48px!important;height:56px!important;right:-7px!important}.challengeScore{grid-column:2!important;text-align:left!important}.challengeListRow>button{grid-column:2!important}
  .gmClassActions{gap:10px!important}.gmClassActions button img{width:70px!important;height:70px!important}.gmClassActions button b{font-size:.72rem!important}
  .customWordHead,.customSliceFields{grid-template-columns:1fr!important}.customFiveGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* v0.20.15 — mockup alignment + intentional My Cards favorites */
.challengeAvatar{background:#050b12!important;border-color:#8da2b5!important}
.mySlicesCarousel{position:relative}.removeMyCardX{position:absolute;z-index:8;right:calc(50% - 285px);top:34px;border:0!important;background:transparent!important;color:#0b2036!important;font-size:2rem!important;font-weight:950!important;line-height:1!important;padding:8px!important}
.sliceCardFavorite{position:absolute;z-index:6;right:76px;top:22px;border:0;background:transparent;color:#ffb72b;font-size:2.2rem;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.customWordEntry{background:#e3e9ef!important;border-color:#aab9c7!important}.customAddWord{display:block;margin:4px auto 18px;border:1px dashed #657c91;background:#d3dce4;color:#10233a;border-radius:999px;padding:11px 24px;font-weight:950;letter-spacing:.06em}
@media(max-width:680px){.removeMyCardX{right:9%;top:28px}.sliceCardFavorite{right:64px;top:18px}}
\n\n/* v0.20.16 — cache-busted mockup corrections */\n/* Challenge: avatar is the visual anchor, on a black circular field. */\n.challengeListRow{grid-template-columns:270px minmax(0,1fr) 150px 140px!important;min-height:250px!important;align-items:center!important;overflow:hidden!important}\n.challengeAvatar{width:236px!important;height:236px!important;background:#02060b!important;border:3px solid #8fa2b4!important;overflow:visible!important;margin-left:10px!important}\n.challengeAvatar>img:first-child{width:228px!important;height:228px!important;object-fit:contain!important;transform:scale(1.18)!important;transform-origin:center!important}\n.challengeAvatarCrest{width:86px!important;height:102px!important;right:-13px!important;bottom:-14px!important;z-index:5!important}\n.challengeAvatar .presenceDot{width:21px!important;height:21px!important;right:7px!important;top:13px!important;border:3px solid #02060b!important;z-index:6!important}\n.challengePlayer{min-width:0!important}.challengePlayer b{font-size:1.35rem!important}.challengePlayer p{font-size:1rem!important}\n.challengeScore strong{font-size:3.1rem!important}.challengeScore{min-width:120px!important}\n\n/* Guildmaster group: content on left, three unboxed tool icons on right. */\n.gmGroupDetail{overflow:hidden!important;max-width:100%!important}\n.gmGroupHero{display:grid!important;grid-template-columns:minmax(310px,1fr) minmax(430px,.9fr)!important;gap:30px!important;align-items:center!important;min-width:0!important}\n.gmGroupHeroInfo{min-width:0!important}.gmGroupHeroInfo h3{margin:20px 0 10px!important}.gmGroupHeroInfo p{white-space:normal!important;overflow-wrap:anywhere!important}\n.gmClassActions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;align-items:start!important;min-width:0!important}\n.gmClassActions button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:8px!important;color:#fff!important;min-width:0!important}\n.gmClassActions button img{width:116px!important;height:116px!important;object-fit:contain!important;filter:drop-shadow(0 5px 8px rgba(0,0,0,.35))!important}\n.gmClassActions button b{font-size:1rem!important;letter-spacing:.08em!important;color:#fff!important;text-align:center!important}\n\n/* My Cards: X belongs visually to the card itself. */\n.mySlicesCarousel{position:relative!important}\n.removeMyCardX{right:calc(50% - 286px)!important;top:38px!important;color:#0b2036!important;font-size:2rem!important;cursor:pointer!important}\n\n/* Custom list: start with one darker entry; more appear only on Add Word. */\n.customWordEntry{background:#cbd5de!important;border:1px solid #8fa0af!important;box-shadow:0 3px 8px rgba(5,19,34,.12)!important}\n.customAddWord{background:#c0ccd7!important;border-color:#657b8e!important}\n\n@media(max-width:1050px){\n  .challengeListRow{grid-template-columns:205px minmax(0,1fr) 120px!important;min-height:220px!important}.challengeListRow>button{grid-column:2/4!important;justify-self:start!important}.challengeAvatar{width:185px!important;height:185px!important}.challengeAvatar>img:first-child{width:180px!important;height:180px!important}.challengeAvatarCrest{width:68px!important;height:80px!important}\n  .gmGroupHero{grid-template-columns:1fr!important}.gmClassActions{max-width:560px!important}\n}\n@media(max-width:680px){\n  .challengeListRow{grid-template-columns:130px minmax(0,1fr)!important;min-height:190px!important}.challengeAvatar{width:122px!important;height:122px!important;margin-left:0!important}.challengeAvatar>img:first-child{width:118px!important;height:118px!important}.challengeAvatarCrest{width:48px!important;height:56px!important}.challengeScore{grid-column:2!important;text-align:left!important}.challengeScore strong{font-size:2.2rem!important}.challengeListRow>button{grid-column:2!important}\n  .gmClassActions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}.gmClassActions button img{width:72px!important;height:72px!important}.gmClassActions button b{font-size:.68rem!important}\n  .removeMyCardX{right:8%!important;top:30px!important}\n}\n

/* v0.20.17 — stable tool shells, profile dashboard, compact training levels, white guild/group surfaces */
/* See My Slices: no separate X; heart lives on the lower-right of the tile. */
.sliceCardClose{display:none!important}
.sliceCardScene{position:relative!important}
.sliceCardFavorite{position:absolute!important;z-index:20!important;right:7%!important;bottom:5%!important;top:auto!important;border:0!important;background:transparent!important;color:#d43f63!important;font-size:2.55rem!important;line-height:1!important;padding:8px!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))!important;cursor:pointer!important}
.sliceCardFavorite:hover{transform:scale(1.08)}

/* Stats + dictionary: top anchored so changing content never shifts the whole window. */
#statsOverlay,#dictionaryModal{align-items:flex-start!important;justify-content:center!important;overflow-y:auto!important;overscroll-behavior:contain}
#statsOverlay .statsReport,#dictionaryModal .dictionaryCard{margin:28px auto 44px!important;transform:none!important;top:auto!important;left:auto!important}
.statsTabViewport{min-height:760px!important;width:100%!important;position:relative!important}
.statsTabPanel{width:100%!important;transform:none!important;animation:none!important}
.statsPanelEnter{animation:none!important}
.dictionaryCard{transform:none!important}

/* Profile uses avatar-09 as the Workshop icon only; give it the same white silhouette edge as other tool art. */
#unifiedProfileBtn img,#toolPreviewIcon[src*="avatar-09.png"]{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 5px 8px rgba(0,0,0,.35))!important}
.profileDashboard{display:grid;gap:18px}.profileIdentityPanel{display:grid;grid-template-columns:180px minmax(0,1fr) 110px;align-items:center;gap:22px;background:linear-gradient(135deg,#07192b,#122c47);border:1px solid #35516c;border-radius:20px;padding:22px;color:#fff}.profileIdentityPanel .profileAvatarStage img{width:160px;height:160px;object-fit:contain}.profileIdentityCopy h3{font-size:2rem;margin:4px 0 8px}.profileIdentityCopy>small{color:#f7b52d;font-weight:900;letter-spacing:.14em}.profileIdentityCopy p{color:#aebfd1;font-weight:800}.profileXp{height:10px;background:#203d57;border-radius:999px;overflow:hidden;margin:15px 0 5px}.profileXp span{display:block;height:100%;background:#f7b52d;border-radius:inherit}.profileRankBadge{width:105px;height:105px;object-fit:contain}.profileStatStrip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.profileStatStrip article{background:#fff;color:#10233a;border-radius:16px;padding:16px;text-align:center}.profileStatStrip strong{display:block;font-size:1.65rem}.profileStatStrip span{font-size:.7rem;font-weight:900;letter-spacing:.08em;color:#657a8e}.profileQuickLinks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.profileQuickLinks button{background:#fff;color:#10233a;border:1px solid #cbd7e1;border-radius:16px;padding:16px;text-align:left}.profileQuickLinks b{display:block;font-size:1rem}.profileQuickLinks span{display:block;color:#64798e;margin-top:5px;font-size:.8rem}

/* Training: compact levels on one row and a category marker beside each section heading. */
.trainingLevelRow{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}.trainingLevelRow button{min-width:0!important;width:100%!important;padding:10px 6px!important;font-size:.75rem!important;white-space:nowrap!important}.professionalLevels{grid-template-columns:repeat(2,minmax(0,1fr))!important}.trainingDomain>h3{display:flex!important;align-items:center!important;gap:14px!important}.trainingDomainIcon{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;flex:0 0 44px!important;border-radius:50%!important;background:rgba(255,255,255,.88)!important;color:#10233a!important;font-size:1.15rem!important;font-weight:1000!important;box-shadow:0 2px 5px rgba(0,0,0,.14)}

/* Leaderboard: YOU row uses the same dark field as every other ranking row. */
.playerRankRow.isYou{background:#07192b!important}

/* My Guilds: same light information surface used by Challenge. */
.guildListItem,.guildDetailDemo{background:linear-gradient(135deg,#fff,#edf4f9)!important;color:#10233a!important;border-color:#9eb2c5!important}.guildListInfo h3,.guildDetailDemo h3,.guildDetailDemo h4,.guildMemberDemo b{color:#10233a!important}.guildListInfo p,.guildDetailDemo p,.guildMemberDemo small{color:#5d7389!important}.guildListInfo small{color:#13834d!important}.guildMemberDemo{background:linear-gradient(135deg,#fff,#eef4f9)!important;color:#10233a!important;border-color:#c6d4df!important}.guildMemberDemo>em b{color:#9a6805!important}.guildCreateJoin{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important}.guildBackMenuBtn[hidden]{display:none!important}

/* Challenge mockup: large avatar, clear information band, score and action kept distinct. */
.challengeListRow{background:linear-gradient(135deg,#fff,#eef4f9)!important;border-color:#9eb2c5!important;color:#10233a!important;grid-template-columns:280px minmax(240px,1fr) 160px 150px!important;min-height:260px!important}.challengeAvatar{border:0!important;background:#02060b!important;padding:0!important;cursor:pointer!important;appearance:none!important}.challengePlayer h3,.challengePlayer b{color:#10233a!important}.challengePlayer p{color:#60758a!important}.challengeScore strong{color:#7f8fa2!important}.challengeScore.win strong{color:#16914e!important}.challengeScore.loss strong{color:#c43d45!important}.challengeScore small{font-weight:1000!important;letter-spacing:.12em!important}.challengeListRow>button:not(.challengeAvatar){background:#102b47!important;color:#f7b52d!important;border-color:#b47a13!important}

/* Guildmaster top-level tools and class lists. */
.guildmasterWidgets button{position:relative!important;padding-top:24px!important}.gmToolSymbol{display:flex!important;align-items:center!important;justify-content:center!important;width:54px!important;height:54px!important;border-radius:14px!important;background:#102b47!important;color:#f7b52d!important;font-style:normal!important;font-weight:1000!important;font-size:1.5rem!important;margin-bottom:14px!important}.guildmasterWidgets button b{font-size:1.2rem!important;letter-spacing:.055em!important}.gmGroupRow,.gmCompactList button,.gmChoiceGrid button{background:#fff!important;color:#10233a!important;border:1px solid #c6d4df!important}.gmGroupRow span b{color:#10233a!important}.gmGroupRow small{color:#60758a!important}.gmGroupRow>strong{color:#a66c03!important}.gmChoiceGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 22px}.gmChoiceGrid button{border-radius:14px;padding:13px;text-align:left;font-weight:850}.gmChoiceGrid button.isSelected{box-shadow:inset 0 0 0 2px #f7b52d;background:#fff9e9!important}.gmLiveLoaded{display:grid;gap:6px;margin-top:16px;background:#fff;color:#10233a;border-radius:16px;padding:16px}.gmLiveLoaded strong{color:#9a6805}.gmLiveLoaded .prototypePrimary{margin-top:10px}.gmGroupHero{grid-template-columns:minmax(340px,1fr) minmax(500px,1fr)!important}.gmClassActions button img{width:130px!important;height:130px!important}.gmClassActions button b{font-size:1.1rem!important}

/* Custom list: visually distinct entries, simple reorder, play-order choice, and two final actions. */
.customWordEntry{background:#aebbc7!important;border-color:#74889a!important}.customWordHead{display:grid!important;grid-template-columns:auto auto minmax(180px,1fr)!important;gap:10px!important;align-items:center!important}.customReorder{display:flex;gap:4px}.customReorder button{width:32px;height:32px;border-radius:8px;border:1px solid #64798c;background:#eef3f7;color:#10233a;font-weight:1000}.customPlayOrder{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px 0}.customPlayOrder span{font-weight:950;letter-spacing:.08em;color:#fff;margin-right:4px}.customPlayOrder button{border:1px solid #8da0b1;background:#fff;color:#10233a;border-radius:999px;padding:9px 14px;font-weight:900}.customPlayOrder button.isSelected{background:#f7b52d;border-color:#f7b52d}.customListActions{display:grid!important;grid-template-columns:1fr 1.35fr!important;gap:12px!important}.customListActions button{min-height:48px!important}

@media(max-width:900px){.statsTabViewport{min-height:650px!important}.profileIdentityPanel{grid-template-columns:130px minmax(0,1fr)}.profileIdentityPanel .profileAvatarStage img{width:120px;height:120px}.profileRankBadge{grid-column:2;width:80px;height:80px}.profileStatStrip{grid-template-columns:repeat(2,1fr)}.profileQuickLinks{grid-template-columns:1fr}.challengeListRow{grid-template-columns:190px minmax(0,1fr) 115px!important}.challengeListRow>button:not(.challengeAvatar){grid-column:2/4!important}.challengeAvatar{width:180px!important;height:180px!important}.challengeAvatar>img:first-child{width:178px!important;height:178px!important}.gmGroupHero{grid-template-columns:1fr!important}.gmChoiceGrid{grid-template-columns:1fr}}
@media(max-width:620px){#statsOverlay .statsReport,#dictionaryModal .dictionaryCard{margin-top:14px!important}.statsTabViewport{min-height:560px!important}.trainingLevelRow{gap:4px!important}.trainingLevelRow button{font-size:.62rem!important;padding:9px 3px!important}.trainingDomainIcon{width:36px!important;height:36px!important;flex-basis:36px!important}.challengeListRow{grid-template-columns:130px minmax(0,1fr)!important;min-height:190px!important}.challengeAvatar{width:122px!important;height:122px!important}.challengeAvatar>img:first-child{width:120px!important;height:120px!important}.challengeScore{grid-column:2!important}.challengeListRow>button:not(.challengeAvatar){grid-column:2!important}.gmClassActions button img{width:78px!important;height:78px!important}.gmClassActions button b{font-size:.72rem!important}.customListActions{grid-template-columns:1fr!important}.customWordHead{grid-template-columns:auto auto 1fr!important}.mySliceCardStage{width:min(72vw,460px)!important}}

/* My Cards remove control sits inside the card corner, regardless of flip side. */
.mySliceCardStage{position:relative;z-index:4;width:min(52vw,520px);height:auto}.mySliceCardStage .mySliceFlashcard{width:100%!important}.mySliceCardStage .removeMyCardX{position:absolute!important;right:24px!important;top:20px!important;z-index:25!important;color:#10233a!important;font-size:2rem!important;padding:5px!important;background:transparent!important;border:0!important;line-height:1!important}

/* v0.20.18 — Training level artwork normalization */
.tierToolPreview img[src*="training-basic"],
.tierToolPreview img[src*="training-advanced"],
.tierToolPreview img[src*="training-expert"]{
  width:52px!important;height:52px!important;object-fit:contain!important;object-position:center!important;
}
.workshopShortcut img[src*="training-basic"],
.workshopShortcut img[src*="training-advanced"],
.workshopShortcut img[src*="training-expert"]{
  object-fit:contain!important;object-position:center!important;
}


/* v0.20.19 — tier-specific Training plates + clear player Profile separation */
#unifiedTrainingBtn img[src*="training-basic"],
#unifiedTrainingBtn img[src*="training-advanced"],
#unifiedTrainingBtn img[src*="training-expert"],
.tierToolPreview img[src*="training-basic"],
.tierToolPreview img[src*="training-advanced"],
.tierToolPreview img[src*="training-expert"],
.trainingModeIcon[src*="training-basic"],
.trainingModeIcon[src*="training-advanced"],
.trainingModeIcon[src*="training-expert"]{
  filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 7px 10px rgba(0,0,0,.38))!important;
}
.tierPreviewProfileIcon{
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 5px 8px rgba(0,0,0,.32));
}


/* Launch final: center the single Day-10 SEE RESULTS action. */
#completionPanel.finalDailyResultAction .warmupResultActions{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:100%!important;
}
#completionPanel.finalDailyResultAction #nextBtn{
  position:static!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  margin:0 auto!important;
  width:min(100%,360px)!important;
}


/* v0.20.19 Slice-only launch cleanup — centered Daily results */
#dailyEndPanel .dailyEndCard .resultActions{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:10px!important;
}
#dailyEndPanel .dailyEndCard .resultActions #dailyShareBtn{
  width:100%!important;
  max-width:none!important;
}
#dailyEndPanel .dailyEndCard .resultActions #dailyReviewBtn{
  width:min(58%,320px)!important;
  min-width:220px!important;
  margin-inline:auto!important;
}
#dailyEndPanel .dailyEndCard .resultActions #dailyHomeBtn{
  width:auto!important;
  min-width:0!important;
  margin-inline:auto!important;
}

/* v0.18.1-crossdevice — Android/Samsung touch compatibility.
   The page can use normal tap semantics; only the draggable card surface suppresses browser gestures. */
html,body{touch-action:manipulation!important;}
#cardHolder,#card{touch-action:none!important;}


/* Final 12 Fluidity + Interaction Stability Pass */
button,a,[role="button"]{touch-action:manipulation}
#cardHolder,#card{touch-action:none!important}
#aimCursor{left:0!important;top:0!important;will-change:transform,opacity}
body.interaction-locked header,
body.interaction-locked footer,
body.interaction-locked #arena > #wordWrap,
body.interaction-locked #arena > #guide,
body.interaction-locked #arena > #message,
body.interaction-locked #arena > #aimCursor,
body.interaction-locked #arena > #throwDeck,
body.interaction-locked #arena > #cardHolder,
body.interaction-locked #arena > #rankPanel,
body.interaction-locked #arena > #dailyProgress{
  pointer-events:none!important;
}
body.interaction-locked .resultOverlay:not(.show){pointer-events:none!important}
body.slice-detail-open .resultOverlay{pointer-events:none!important}
body.slice-detail-open #morphemeDetailPanel.show{pointer-events:auto!important}


/* v0.20.3 — Final 12.2: remove legacy white aiming cursor; blue gap indicator remains authoritative */
#aimCursor{display:none!important;}


/* v0.20.5 — Final 13.1 Safari Modal Stability
   Keep the proven fluid throw/deal work, restore modal results, make browser
   viewports scroll safely, and do not force the entire app to 100dvh. */

/* A newly prepared card is visibly dealt only after the gameplay state is ready. */
#card.dealing{
  animation:dealReadyCard .26s cubic-bezier(.2,.82,.25,1) both!important;
  pointer-events:none;
}
@keyframes dealReadyCard{
  0%{opacity:0;transform:translate3d(calc(-50vw + 112px),22px,0) rotate(-22deg) scale(.72)}
  55%{opacity:1}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(-8deg) scale(1)}
}

/* Results stay as centered windows. The overlay owns scrolling and blocks all
   gameplay beneath it; the game stage itself is visually removed while Daily
   result/review windows are open. */
#dailyEndPanel.resultOverlay,#dailyReviewPanel.resultOverlay{
  position:fixed!important;
  inset:0!important;
  z-index:9000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  background:rgba(3,8,16,.96)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
#dailyEndPanel.resultOverlay:not(.show),#dailyReviewPanel.resultOverlay:not(.show){
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
#dailyEndPanel.resultOverlay.show,#dailyReviewPanel.resultOverlay.show{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}
#dailyEndPanel .dailyEndCard,#dailyReviewPanel .dailyReviewCard{
  width:min(92vw,610px)!important;
  max-height:calc(100dvh - 28px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  margin:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}
#dailyReviewPanel .dailyReviewList{
  gap:10px!important;
  margin:16px 0 20px!important;
}
#dailyReviewPanel .sliceReviewRow{
  min-height:58px!important;
  padding:11px 12px!important;
}
#dailyReviewPanel .sliceChunkButton{
  font-size:clamp(17px,4vw,23px)!important;
  padding:5px 3px!important;
  pointer-events:auto!important;
}
#dailyReviewPanel .dailyReviewLogo{
  width:min(32%,130px)!important;
  max-height:70px!important;
  object-fit:contain!important;
}
/* Hide the finished game surface behind Daily result/review windows without
   hiding the windows themselves. This also removes stray gameplay hit/audio
   opportunities after the run has ended. */
body.daily-state-screen header,
body.daily-state-screen footer,
body.daily-state-screen #wordWrap,
body.daily-state-screen #guide,
body.daily-state-screen #message,
body.daily-state-screen #throwDeck,
body.daily-state-screen #cardHolder,
body.daily-state-screen #rankPanel,
body.daily-state-screen #dailyProgress,
body.daily-state-screen #celebrationOverlay{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.daily-state-screen #dailyEndPanel.show,
body.daily-state-screen #dailyReviewPanel.show,
body.daily-state-screen #morphemeDetailPanel.show{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* Morpheme detail must remain above SEE MY SLICES and clickable. */
#morphemeDetailPanel.show{z-index:10050!important;pointer-events:auto!important;}
body.slice-detail-open #dailyReviewPanel{pointer-events:none!important;}

/* Short browser viewports: start from the top only when vertical space is too
   tight to center the window, so every control remains reachable by scroll. */
@media(max-height:700px){
  #dailyEndPanel.resultOverlay,#dailyReviewPanel.resultOverlay{
    align-items:flex-start!important;
  }
  #dailyEndPanel .dailyEndCard,#dailyReviewPanel .dailyReviewCard{
    max-height:calc(100dvh - 20px)!important;
  }
}

/* Home: the decorative cards can never cover the ENTER control. Add a real
   vertical gap and lift the control above decorative layers. */
#homeScreen .startCardFan{
  margin-bottom:clamp(20px,3.5dvh,38px)!important;
  pointer-events:none!important;
}
#homeScreen .entryChoiceRow{
  position:relative!important;
  z-index:8!important;
  margin-top:0!important;
}
#homeScreen .entryChoiceChip{position:relative!important;z-index:9!important;touch-action:manipulation!important;}
@media(max-height:700px){
  #homeScreen .startCardFan{margin-bottom:18px!important;}
}

/* Compact, escape-safe menu for normal mobile browser viewports. */
#gameMenu{
  left:max(8px,env(safe-area-inset-left))!important;
  top:max(8px,env(safe-area-inset-top))!important;
  width:min(88vw,310px)!important;
  max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important;
  overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
  padding:12px!important;border-radius:16px!important;
}
.menuHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;}
#gameMenu .menuHeader h2{margin:0!important;font-size:17px!important;}
#menuCloseBtn{
  width:34px;height:34px;min-width:34px;padding:0!important;border-radius:10px!important;
  display:grid;place-items:center;background:rgba(255,255,255,.08)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.16)!important;font-size:24px!important;line-height:1!important;
}
#gameMenu .menuSection{padding:8px 0!important;}
#gameMenu .menuLabel{margin-bottom:5px!important;font-size:9px!important;letter-spacing:.11em!important;}
#gameMenu .modeButtons{gap:5px!important;}
#gameMenu .modeBtn{padding:7px 6px!important;border-radius:9px!important;font-size:11px!important;line-height:1.1!important;min-height:31px!important;}
#gameMenu .modeHint,#gameMenu .menuHelp{display:none!important;}
#gameMenu .menuAction{margin-top:0!important;padding:8px 10px!important;border-radius:9px!important;font-size:10px!important;letter-spacing:.03em!important;}
#gameMenu .menuAboutSection{padding-bottom:2px!important;}
#gameMenu .aboutBlock{font-size:9px!important;line-height:1.35!important;color:var(--muted)!important;}
#gameMenu .aboutBlock strong{color:#fff!important;}
#gameMenu .reportIssueBtn{display:inline-block!important;margin-top:6px!important;font-size:9px!important;}
@media(max-height:650px){
  #gameMenu{width:min(86vw,292px)!important;padding:10px!important;}
  #gameMenu .menuSection{padding:6px 0!important;}
  #gameMenu .modeBtn{min-height:28px!important;padding:6px 5px!important;}
  #gameMenu .menuTutorialSection{padding-top:6px!important;}
}

/* Safari/WebKit: keep celebration geometry explicit and animation-owned. */
.celebrationBurst{
  height:min(52vw,470px);
  -webkit-transform:translate(-50%,-50%) scale(.18) rotate(0deg);
  -webkit-transform-origin:center center;
}
.celebrationOverlay.show .celebrationBurst{
  -webkit-animation:celebrationBurstSpin 1.65s cubic-bezier(.12,.72,.18,1) both;
}
.celebrationOverlay.finale .celebrationBurst{height:min(70vw,660px);}
.celebrationOverlay.finale.show .celebrationBurst{-webkit-animation-duration:3.8s;}
@media(max-width:720px){
  .celebrationBurst{height:min(78vw,430px);}
  .celebrationOverlay.finale .celebrationBurst{height:min(95vw,590px);}
}

/* v0.20.6 — Final 13.2: compact SEE MY SLICES definition popup only.
   Do not alter the review list, modal scrolling, or gameplay. */
#morphemeDetailPanel .sliceTileScene{
  width:min(86vw,520px)!important;
  height:clamp(108px,18vh,132px)!important;
  aspect-ratio:auto!important;
}
#morphemeDetailPanel .sliceTileFlipper{
  width:100%!important;
  height:100%!important;
}
#morphemeDetailPanel .sliceTileBackFace,
#morphemeDetailPanel .sliceTileFrontFace{
  border-radius:20px!important;
  padding:18px 24px!important;
}
#morphemeDetailPanel .sliceTileBackFace::after{
  inset:7px!important;
  border-radius:14px!important;
}
#morphemeDetailPanel .sliceTileTerm{
  font-size:clamp(30px,7vw,48px)!important;
  line-height:1!important;
}
#morphemeDetailPanel .sliceTileMeaning{
  font-size:clamp(20px,4.5vw,30px)!important;
  line-height:1.15!important;
}
#morphemeDetailPanel .sliceCardHint{
  margin:8px 0 0!important;
  font-size:11px!important;
}
@media(max-width:620px){
  #morphemeDetailPanel .sliceTileScene{
    width:min(88vw,430px)!important;
    height:clamp(104px,16vh,124px)!important;
  }
  #morphemeDetailPanel .sliceTileBackFace,
  #morphemeDetailPanel .sliceTileFrontFace{
    padding:14px 18px!important;
  }
}

/* v0.20.7 — Final 14: browser consistency + training-round UI */
/* Safari home spacing: keep the fan visually separated from the primary CTA. */
@supports (-webkit-touch-callout:none){
  #homeScreen .startCardFan{
    margin-bottom:clamp(38px,6vh,68px)!important;
  }
  #homeScreen .entryChoiceRow{
    margin-top:0!important;
  }
  @media(max-height:760px){
    #homeScreen .startCardFan{margin-bottom:32px!important;}
  }
}

/* SEE MY SLICES: restore a true card-like aspect while preserving list spacing. */
#morphemeDetailPanel .sliceTileScene{
  width:min(86vw,520px)!important;
  height:clamp(228px,34vh,278px)!important;
  aspect-ratio:auto!important;
}
#morphemeDetailPanel .sliceTileFlipper{width:100%!important;height:100%!important;}
#morphemeDetailPanel .sliceTileBackFace,
#morphemeDetailPanel .sliceTileFrontFace{
  border-radius:22px!important;
  padding:30px 34px!important;
}
#morphemeDetailPanel .sliceTileBackFace::after{inset:9px!important;border-radius:15px!important;}
#morphemeDetailPanel .sliceTileTerm{font-size:clamp(34px,7vw,54px)!important;}
#morphemeDetailPanel .sliceTileMeaning{font-size:clamp(22px,4.6vw,32px)!important;line-height:1.18!important;}
#morphemeDetailPanel .sliceCardFavorite{
  display:grid!important;place-items:center!important;
  right:18px!important;bottom:16px!important;top:auto!important;
  width:48px!important;height:48px!important;padding:0!important;
  font-size:2.4rem!important;color:#d43f63!important;
  z-index:30!important;
}
#morphemeDetailPanel .sliceCardHint{margin:10px 0 0!important;font-size:12px!important;}
@media(max-width:620px){
  #morphemeDetailPanel .sliceTileScene{width:min(90vw,430px)!important;height:clamp(214px,31vh,254px)!important;}
  #morphemeDetailPanel .sliceTileBackFace,
  #morphemeDetailPanel .sliceTileFrontFace{padding:26px 28px!important;}
}

/* Safari: badges remain fully visible and stable; avoid 3D/compound animations. */
@supports (-webkit-touch-callout:none){
  .trophyBadge.earned img,.trophyBadge.current img,
  .trophyBadge[data-rank="engineer"] img,
  .trophyBadge[data-rank="smith"] .smithLightLayer,
  .trophyBadge::before,.trophyBadge::after{
    animation:none!important;
    -webkit-animation:none!important;
    transform:none!important;
    -webkit-transform:none!important;
  }
  .trophyBadge img{opacity:1!important;visibility:visible!important;}
}

/* Leaderboard: rank is a non-collapsing field, especially on the YOU row. */
.playerRankRow>b{
  display:block!important;min-width:44px!important;width:44px!important;
  text-align:center!important;font-variant-numeric:tabular-nums!important;
  white-space:nowrap!important;overflow:visible!important;color:#fff!important;
}
.playerRankRow.isYou>b{color:#f7b52d!important;font-weight:1000!important;}
@media(max-width:760px){
  .playerRankRow{grid-template-columns:46px 12px minmax(0,1fr) 72px 76px!important;}
  .playerRankRow>b{min-width:40px!important;width:40px!important;font-size:.78rem!important;}
}

/* Celebration copy uses an explicit center, independent of Safari grid behavior. */
.celebrationCopy{
  position:absolute!important;left:50%!important;top:47%!important;
  width:min(94%,980px)!important;
  transform:translate(-50%,-50%)!important;
  -webkit-transform:translate(-50%,-50%)!important;
  z-index:4!important;text-align:center!important;pointer-events:none!important;
}

/* Training rounds: three equally weighted actions can wrap cleanly in browsers. */
.trainingEndActions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;}
.trainingEndActions button{min-width:0!important;width:100%!important;}
@media(max-width:620px){
  .trainingEndActions{grid-template-columns:1fr!important;}
}


/* v0.20.8 — Final 14.1: browser polish + favorites */
/* Training: the currently selected catalog title is gold, not navy. */
.trainingCatalogCard.isSelectedTraining h4,
.trainingCatalogCard.isSelectedTraining h3{color:#b87800!important;}

/* SEE MY SLICES: favorite control exists only while the definition face is visible. */
#morphemeDetailPanel .sliceCardFavorite{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .16s ease!important;}
#morphemeDetailPanel .sliceCardFavorite.isVisible{opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
.wordFavoriteHeart{
  flex:0 0 auto!important;margin-left:auto!important;width:42px!important;height:42px!important;
  display:grid!important;place-items:center!important;border:0!important;background:transparent!important;
  color:#d43f63!important;font-size:2rem!important;line-height:1!important;cursor:pointer!important;
}

/* My Cards: the flashcard must fit inside its carousel in both Safari and Chrome. */
.mySlicesCarousel{grid-template-columns:38px 64px minmax(0,440px) 64px 38px!important;max-width:100%!important;overflow:hidden!important;}
.mySliceCardStage{width:100%!important;max-width:440px!important;min-width:0!important;}
.mySliceCardStage .mySliceFlashcard{box-sizing:border-box!important;max-width:100%!important;}
@media(max-width:900px){
  .mySlicesCarousel{grid-template-columns:38px minmax(0,1fr) 38px!important;gap:8px!important;}
  .mySlicesPeek{display:none!important;}
  .mySliceCardStage{width:min(100%,460px)!important;justify-self:center!important;}
}

/* Real Safari detection is applied in index.html. This works on desktop Safari too,
   unlike the earlier iOS-only feature query. */
html.is-safari #homeScreen .startCardFan{margin-bottom:clamp(38px,6vh,68px)!important;}
html.is-safari .trophyBadge{overflow:hidden!important;}
html.is-safari .trophyBadge > img:not(.smithLightLayer){
  display:block!important;opacity:1!important;visibility:visible!important;
  animation:none!important;-webkit-animation:none!important;
  transform:none!important;-webkit-transform:none!important;
  transform-style:flat!important;-webkit-transform-style:flat!important;
  backface-visibility:visible!important;-webkit-backface-visibility:visible!important;
  filter:none!important;position:relative!important;z-index:2!important;
}
html.is-safari .trophyBadge.locked > img:not(.smithLightLayer){opacity:.72!important;}
html.is-safari .trophyBadge[data-rank="engineer"] > img:not(.smithLightLayer){opacity:.72!important;}
html.is-safari .trophyBadge .smithLightLayer,
html.is-safari .trophyBadge::before,
html.is-safari .trophyBadge::after{display:none!important;animation:none!important;-webkit-animation:none!important;}
html.is-safari .trophyBadge span{position:relative!important;z-index:3!important;max-width:100%!important;text-align:center!important;}

/* Stats history: result is navy; detail carries cleared / perfect / missed. */
.statsHistoryRow b{color:#17314b!important;background:#f4f7fa!important;border-radius:999px!important;padding:6px 9px!important;min-width:76px!important;text-align:center!important;}


/* v0.20.9 — Final 14.2 Workshop + Guildmaster Tools */
/* Training plate white outline reduced by ~50%. */
#unifiedTrainingBtn img[src*="training-basic"],#unifiedTrainingBtn img[src*="training-advanced"],#unifiedTrainingBtn img[src*="training-expert"],
.tierToolPreview img[src*="training-basic"],.tierToolPreview img[src*="training-advanced"],.tierToolPreview img[src*="training-expert"],
.trainingModeIcon[src*="training-basic"],.trainingModeIcon[src*="training-advanced"],.trainingModeIcon[src*="training-expert"]{
 filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 7px 10px rgba(0,0,0,.38))!important;
}
.dictionaryExamples button{border:0;background:#edf3f8;border-radius:999px;padding:8px 13px;color:#10233a;font:inherit;cursor:pointer}.dictionaryExamples button:hover,.dictionaryExamples button:focus-visible{outline:2px solid #f7b52d}.dictionaryExamples button b{color:#b47708}
.profileStatStripCompact{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:520px;margin:0 auto;width:100%}
.guildInviteActions{display:flex;gap:10px;flex-wrap:wrap}.guildInviteActions button{border:1px solid #a87820;background:#10233a;color:#f7b52d;border-radius:999px;padding:10px 18px;font-weight:900}.guildListItem.isInvitation{border-color:#f7b52d!important}.guildListItem.isInvitation .guildListInfo>small{color:#f7b52d!important}
.guildmasterWidgets{grid-template-columns:repeat(2,minmax(0,1fr))!important}.gmStudentStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.gmStudentStats article{background:#fff;color:#10233a;border-radius:14px;padding:14px;text-align:center}.gmStudentStats b{display:block;font-size:1.5rem}.gmStudentStats span{font-size:.7rem;font-weight:900}.gmWeakList,.gmStudentAchievements{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 20px}.gmWeakList span,.gmStudentAchievements span{border:1px solid #405a72;border-radius:999px;padding:8px 12px;color:#d6e0ea}.gmStudentAchievements span{border-color:#a87820;color:#f7b52d}.gmGroupOptions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}.gmGroupOptions label{color:#cbd5e2;font-weight:800}.gmGroupOptions button{border:1px solid #a87820;background:#10233a;color:#f7b52d;border-radius:999px;padding:10px 18px;font-weight:900}.gmGroupOptions .prototypePrimary{display:inline-block!important;margin:0!important}
/* Safari-safe badge motion: simple 2D float, no 3D transforms or animated filters. */
@keyframes safariBadgeFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.018)}}
html.is-safari .trophyBadge.earned > img:not(.smithLightLayer),html.is-safari .trophyBadge.current > img:not(.smithLightLayer){animation:safariBadgeFloat 3.6s ease-in-out infinite!important;-webkit-animation:safariBadgeFloat 3.6s ease-in-out infinite!important;transform-origin:center!important}
@media(max-width:700px){.gmStudentStats{grid-template-columns:repeat(2,minmax(0,1fr))}.guildmasterWidgets{grid-template-columns:1fr!important}}

/* v0.20.11 — Final 14.2.2 challenge session flow */
.gmActionCloseIcon{position:absolute!important;top:14px!important;right:14px!important;left:auto!important;width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.24)!important;background:#102b47!important;color:#fff!important;font-size:1.8rem!important;line-height:1!important;text-align:center!important;z-index:2!important}
.gmAssignedTool{position:relative!important;padding-top:28px!important}
.gmChallengeBuilder h4{margin:24px 0 10px;color:#f7b52d;letter-spacing:.08em;font-size:.92rem}
.gmChallengeModes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.gmChallengeModes button{display:grid;gap:5px;text-align:left;padding:14px;border-radius:14px;border:1px solid #c6d4df;background:#fff;color:#10233a}
.gmChallengeModes button b{font-size:.9rem;letter-spacing:.035em}.gmChallengeModes button span{font-size:.78rem;color:#60758a}
.gmChallengeModes button.isSelected{box-shadow:inset 0 0 0 2px #f7b52d;background:#fff9e9}
.gmStudentPicker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 16px}
.gmStudentPicker button{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:12px;border:1px solid #c6d4df;background:#fff;color:#10233a;font-weight:800;text-align:left}
.gmStudentCheck{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e9eef2;color:transparent;flex:none}.gmStudentPicker button.isSelected .gmStudentCheck{background:#f7b52d;color:#10233a}
.gmChallengeStudents h5{margin:10px 0 6px;color:#d8e4ef;font-size:.8rem;letter-spacing:.08em}
.gmChallengeOpen{display:grid;justify-items:center;gap:5px;margin:10px 0 16px;padding:16px;border:1px dashed #f7b52d;border-radius:14px;background:rgba(247,181,45,.08)}
.gmChallengeOpen span{font-size:.75rem;letter-spacing:.12em;color:#9eb0c2}.gmChallengeOpen strong{font-size:1.65rem;letter-spacing:.14em;color:#f7b52d}.gmChallengeOpen small{color:#c5d3e0}
.gmChallengeSummary{display:grid;gap:4px;margin:16px 0;padding:13px 15px;border-radius:13px;background:#102b47;border:1px solid rgba(255,255,255,.12)}
.gmChallengeSummary span{font-size:.7rem;letter-spacing:.12em;color:#8fa4b8}.gmChallengeSummary strong{color:#fff;font-size:.95rem}
@media(max-width:700px){.gmChallengeModes{grid-template-columns:1fr}.gmStudentPicker{grid-template-columns:1fr}}

/* v0.20.12 — Final 14.3 Guild Creation + Group Modal Tools */
.playerIdLine{display:block;color:#8fa4b8!important;font-size:.72rem!important;font-weight:900!important;letter-spacing:.12em!important;margin:4px 0 10px!important}
.guildSetupModal,.gmClassActionModal,.certificatePreviewModal{position:fixed;inset:0;z-index:10040;display:flex;align-items:center;justify-content:center;padding:24px}.guildSetupModal[hidden],.gmClassActionModal[hidden]{display:none!important}.guildSetupBackdrop,.gmClassActionBackdrop,.certificateBackdrop{position:absolute;inset:0;background:rgba(1,8,17,.78);backdrop-filter:blur(5px)}.guildSetupCard,.gmClassActionPanel,.certificateSheet{position:relative;z-index:1;width:min(760px,94vw);max-height:88vh;overflow:auto;background:#102c49;color:#fff;border:1px solid #b47b16;border-radius:24px;padding:30px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.guildSetupClose,.certificateClose{position:absolute;right:18px;top:12px;border:0;background:transparent;color:#fff;font-size:2rem;font-weight:900}.guildSetupCard label,.gmSearchField{display:grid;gap:8px;color:#f7b52d;font-size:.75rem;font-weight:900;letter-spacing:.12em}.guildSetupCard input,.gmSearchField input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #5f7890;background:#071a2d;color:#fff;font-size:1rem}.guildCrestPicker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:10px 0 22px}.guildCrestPicker button{border:1px solid #47617a;background:#0a2035;border-radius:14px;padding:8px}.guildCrestPicker button.isSelected{border-color:#f7b52d;box-shadow:0 0 0 2px rgba(247,181,45,.24)}.guildCrestPicker img{width:100%;height:86px;object-fit:contain}.guildMemberSources,.gmTrainingTabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}.guildMemberSources button,.gmTrainingTabs button{border:1px solid #587087;background:#091d31;color:#cbd8e4;border-radius:999px;padding:9px 14px;font-weight:900}.guildMemberSources button.isSelected,.gmTrainingTabs button.isSelected{background:#f7b52d;color:#10233a;border-color:#f7b52d}.guildMemberSourceBody{display:grid;gap:8px;margin-bottom:18px}.guildMemberSourceBody>button{background:#fff;color:#10233a;border:0;border-radius:12px;padding:12px;text-align:left;font-weight:850}
.gmGroupRow{grid-template-columns:64px minmax(0,1fr) auto!important}.gmGroupRowCrest{width:58px;height:68px;object-fit:contain}.gmGroupTitle{display:flex;align-items:center;gap:16px}.gmGroupTitle img{width:90px;height:105px;object-fit:contain}.gmGroupTitle h3{margin:0!important}.gmGroupTitle p{margin:4px 0 0!important;font-weight:850!important}.gmGroupAnalyticsCompact{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:520px}
.gmToolModalCard{background:#102c49!important;color:#fff!important;box-shadow:none!important;border:0!important;padding:4px!important}.gmActionCloseIcon{position:sticky!important;float:right;top:0;z-index:3}.gmTrainingTabBody{margin:12px 0 18px}.gmModalHint{color:#cbd8e4}.gmChallengeRandom{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;color:#10233a;border-radius:14px;padding:14px 16px;margin-bottom:18px}.gmChallengeRandom strong{color:#10233a}.gmChallengeRandom button{border:1px solid #a87820;background:#10233a;color:#f7b52d;border-radius:999px;padding:9px 13px;font-weight:900}.gmAssessPreview{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0}.gmAssessTiles,.gmAssessMeanings{display:grid;gap:9px}.gmAssessTiles span,.gmAssessMeanings button{border-radius:12px;padding:14px;font-weight:900}.gmAssessTiles span{background:#f7b52d;color:#10233a;text-align:center}.gmAssessMeanings button{background:#fff;color:#10233a;border:1px solid #9aabba}
.gmCertificateBtn{margin-top:14px!important}.certificateSheet{text-align:center;background:#fff;color:#10233a;border:10px double #d49a22;border-radius:8px;padding:48px 36px}.certificateSheet .certificateClose{color:#10233a}.certificateSheet>small{letter-spacing:.2em;color:#a06c08;font-weight:900}.certificateSheet h2{font-size:2rem;margin:18px 0}.certificateSheet h3{font-size:2.4rem;color:#10233a}.certificateAchievements{margin:24px 0;padding:16px;border-top:1px solid #d8c28a;border-bottom:1px solid #d8c28a;font-weight:850;color:#7d5a12}
.guildmasterWidgets{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:700px){.guildCrestPicker{grid-template-columns:repeat(3,minmax(0,1fr))}.gmAssessPreview{grid-template-columns:1fr}.guildmasterWidgets{grid-template-columns:1fr!important}.gmGroupRow{grid-template-columns:52px minmax(0,1fr)!important}.gmGroupRow>strong{grid-column:2}.gmGroupRowCrest{width:48px;height:58px}}
@media print{body>*{display:none!important}.certificatePreviewModal,.certificatePreviewModal *{display:block!important}.certificateBackdrop,.certificateClose,.certificatePrint{display:none!important}.certificatePreviewModal{position:static!important;padding:0!important}.certificateSheet{max-height:none!important;width:100%!important;border:10px double #d49a22!important;box-shadow:none!important}}


/* Final 14.4 — profile, certificate, controlled challenge, group creation */
.gmCreateGroupBtn{margin:6px 0 18px!important}
.profileScreenNameEditor{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin:4px 0 8px;max-width:430px}
.profileScreenNameEditor>span{grid-column:1/-1;color:#8fa4b8;font-size:.68rem;font-weight:900;letter-spacing:.12em}
.profileScreenNameEditor input{min-width:0;background:#071a2d;color:#fff;border:1px solid #536b81;border-radius:11px;padding:10px 12px;font-size:1.15rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.profileScreenNameEditor button{border:1px solid #a87820;background:#10233a;color:#f7b52d;border-radius:999px;padding:9px 14px;font-weight:900}
.profileOwnerLinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.profileOwnerLinks button{background:#fff;color:#10233a;border:1px solid #cbd7e1;border-radius:14px;padding:14px 16px;text-align:left}
.profileOwnerLinks b,.profileOwnerLinks span{display:block}.profileOwnerLinks span{color:#61758a;font-size:.78rem;margin-top:4px}
.profileAvatarPicker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:18px}.profileAvatarPicker button{background:#071a2d;border:1px solid #536b81;border-radius:16px;padding:8px}.profileAvatarPicker img{width:100%;aspect-ratio:1/1;object-fit:contain}.profileAvatarPicker button:hover{border-color:#f7b52d}
.certificateLogo{display:block;width:min(260px,62%);max-height:90px;object-fit:contain;margin:0 auto 8px}.certificateMedal{font-size:4rem;line-height:1;margin:5px auto 10px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.18))}.certificateSheet>small{display:block}
.gmChallengeListPicker button{min-height:54px}.gmChallengeSummary small{display:block;color:#aebfd1;margin-top:4px}.groupSetupModal{z-index:10050}
@media(max-width:700px){.profileOwnerLinks{grid-template-columns:1fr}.profileAvatarPicker{grid-template-columns:repeat(3,minmax(0,1fr))}.profileScreenNameEditor{grid-template-columns:1fr}.profileScreenNameEditor button{justify-self:start}}
@media print{.certificateLogo{display:block!important}.certificateMedal{display:block!important}}


/* Final 14.5 — identity persistence, Safari consistency, challenge stability */
#rankBadge.rankAvatarGraphic{background-size:cover!important;background-position:center!important;border-radius:18px!important;background-color:#02060b!important}
.challengeAvatarCrest{display:none!important}
.playerGuildSummary{display:flex!important;align-items:center!important;gap:10px!important;margin:10px auto 16px!important;padding:9px 12px!important;border:1px solid #566f86!important;border-radius:14px!important;background:#0b2239!important;color:#fff!important;max-width:320px!important}
.playerGuildSummary img{width:48px!important;height:56px!important;object-fit:contain!important}.playerGuildSummary span,.playerGuildSummary b,.playerGuildSummary small{display:block!important}.playerGuildSummary small{color:#f7b52d!important}
.guildInfoCard{text-align:center!important}.guildInfoCrest{display:block;width:150px;height:175px;object-fit:contain;margin:0 auto 8px}.guildQuote{font-style:italic;color:#d3deea;font-size:1.05rem}.guildInfoStats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.guildInfoStats span{padding:14px;border-radius:14px;background:#071a2d}.guildInfoStats b,.guildInfoStats small{display:block}.guildInfoStats b{font-size:1.45rem;color:#f7b52d}.guildInfoStats small{color:#9eb0c2;letter-spacing:.08em}
.groupMemberDrafts{display:grid;gap:10px;margin:12px 0}.groupGeneratePlayerId,.groupAddMemberDraft{border:1px solid #6f8498;background:#0a2035;color:#f7b52d;border-radius:12px;padding:11px 13px;font-weight:900}.generatedPlayerId,.groupMemberDraftList span{display:block;padding:10px 12px;border-radius:10px;background:#071a2d;color:#fff;margin:5px 0;font-weight:850}.groupMemberDraftList{display:grid;gap:6px;margin-bottom:14px}
.certificateSheet{padding-top:0!important;overflow:hidden!important}.certificateBrandBanner{margin:0 -36px 18px!important;padding:18px 36px 14px!important;background:#0b2239!important}.certificateBrandBanner .certificateLogo{margin:0 auto!important;max-height:105px!important;filter:none!important}.certificateMedal{display:block!important;width:120px!important;height:120px!important;object-fit:contain!important;margin:4px auto 8px!important;filter:drop-shadow(0 4px 5px rgba(0,0,0,.18))!important}
html.is-safari .trainingCatalogCard.isSelectedTraining h4,html.is-safari .trainingCatalogCard.isSelectedTraining h3{color:#b87800!important;-webkit-text-fill-color:#b87800!important}
.directChallengeLists button{min-height:52px}.directChallengeLists button.isSelected{outline:3px solid #f7b52d}
@media(max-width:700px){.certificateBrandBanner{margin:0 -20px 16px!important;padding:16px 20px 12px!important}.guildInfoStats{grid-template-columns:1fr}}

.certificateSliceWord{display:block!important;color:#fff!important;font-size:2rem!important;line-height:.9!important;letter-spacing:.04em!important;font-weight:950!important;font-style:italic!important;margin-top:-8px!important}


/* v0.20.15 — Guildmaster Expert training + identity consistency + 10-word match review */
/* Profile Workshop shortcut: half-strength white silhouette edge. */
#unifiedProfileBtn img,#toolPreviewIcon[src*="avatar-09.png"]{
  filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 5px 8px rgba(0,0,0,.35))!important;
}
/* Never place a guild crest on top of a challenge avatar. */
.challengeAvatarCrest{display:none!important}
.matchReviewModal{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;padding:18px}.matchReviewCard{position:relative;width:min(960px,96vw);max-height:min(88vh,900px);overflow:auto;background:#102d49;color:#fff;border:1px solid #d79b25;border-radius:24px;padding:34px 34px 30px;box-shadow:0 28px 70px rgba(0,0,0,.48)}.matchReviewCard h3{text-align:center;font-size:1.6rem;margin:4px 0 22px}.matchReviewPlayers{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin:0 auto 22px;max-width:680px}.matchReviewPlayers article{text-align:center}.matchReviewPlayers img{display:block;width:132px;height:132px;object-fit:contain;margin:0 auto 8px}.matchReviewPlayers b{display:block;font-size:1rem}.matchReviewPlayers strong{display:block;color:#f7b52d;font-size:2.4rem;line-height:1.05;margin-top:5px}.matchReviewPlayers small{font-weight:900;letter-spacing:.12em;color:#aebfd1}.matchReviewPlayers>span{font-weight:1000;color:#aebfd1}.matchReviewRule{text-align:center;color:#c9d5e1;margin:0 0 18px}.matchReviewTableWrap{overflow:auto;border-radius:16px;border:1px solid #405b75}.matchReviewTable{width:100%;border-collapse:collapse;background:#fff;color:#10233a;min-width:680px}.matchReviewTable th{background:#e8eef4;padding:12px 14px;font-size:.75rem;letter-spacing:.08em;text-align:left}.matchReviewTable td{padding:12px 14px;border-top:1px solid #d8e1e8}.matchReviewTable td:last-child b{color:#bd7a00}
@media(max-width:620px){.matchReviewCard{padding:28px 16px 22px}.matchReviewPlayers{gap:10px}.matchReviewPlayers img{width:96px;height:96px}.matchReviewPlayers strong{font-size:2rem}}

/* v0.20.16 — Final 14.7 profile, stats, guild and assessment polish */
.profileIdentityRecords{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px}.profileIdentityRecords>span{display:grid;gap:2px;min-width:110px}.profileIdentityRecords b{font-size:1.35rem;color:#fff}.profileIdentityRecords small{font-size:.65rem;letter-spacing:.11em;color:#9fb2c5;font-weight:900}
.guildPlayerMatchGrid article,.guildPlayerMatchGrid article *{color:#fff!important}.guildPlayerMatchGrid article small{color:#fff!important}.guildPlayerMatchGrid.isSelf{grid-template-columns:1fr!important}
.challengeListRow{column-gap:14px!important}.challengeScore{padding:0 6px!important;min-width:70px!important}.challengeScore strong{font-size:1.35rem!important;line-height:1!important}.challengeScore small{font-size:.65rem!important}.challengePlayer h3{margin-bottom:4px!important}
.matchReviewTableWrap{overflow:hidden!important}.matchReviewTable{min-width:0!important;table-layout:fixed!important}.matchReviewTable th,.matchReviewTable td{padding:10px 8px!important;font-size:.82rem!important}.matchReviewTable th:first-child,.matchReviewTable td:first-child{width:42%}.matchReviewTable th:not(:first-child),.matchReviewTable td:not(:first-child){width:19.33%;text-align:center}.matchReviewTable td:first-child{overflow-wrap:anywhere}.matchReviewTable td:last-child b{white-space:nowrap}
.analyticsTrendSummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.analyticsTrendSummary article,.analyticsCompareGrid article,.analyticsPatternGrid article{background:#fff;border:1px solid #d7e0e8;border-radius:15px;padding:15px;color:#10233a}.analyticsTrendSummary small,.analyticsCompareGrid small,.analyticsPatternGrid small{display:block;font-size:.65rem;letter-spacing:.1em;font-weight:900;color:#667c90}.analyticsTrendSummary strong{display:block;font-size:1.25rem;margin:5px 0}.analyticsTrendSummary span{color:#2f6f55;font-weight:850;font-size:.78rem}.analyticsSubhead{margin:22px 0 8px;color:#10233a;font-size:.9rem;letter-spacing:.1em}.analyticsMiniGraphDetailed i{position:relative}.analyticsMiniGraphDetailed i:after{content:attr(data-v);position:absolute;bottom:calc(var(--h) + 5px);left:50%;transform:translateX(-50%);font-size:.58rem;color:#62788c;font-weight:900}.analyticsCompareGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.analyticsCompareGrid b,.analyticsCompareGrid span,.analyticsPatternGrid b,.analyticsPatternGrid span{display:block}.analyticsCompareGrid span,.analyticsPatternGrid span{margin-top:4px;color:#657a8e;font-size:.8rem}.analyticsPatternGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.gmAssessModes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.gmAssessModes button{border:1px solid #60778d;background:#071c2e;color:#fff;border-radius:14px;padding:14px;text-align:left}.gmAssessModes button b,.gmAssessModes button span{display:block}.gmAssessModes button span{font-size:.74rem;color:#b8c7d6;margin-top:5px}.gmAssessModes button.isSelected{border-color:#f7b52d;box-shadow:inset 4px 0 0 #f7b52d}.gmAssessFamilySelect{background:#071c2e;border-radius:14px;padding:14px;margin-bottom:12px}.gmAssessFamilySelect label{display:grid;gap:7px;font-size:.7rem;letter-spacing:.1em;font-weight:900}.gmAssessFamilySelect select{padding:11px;border-radius:10px;background:#fff;color:#10233a;font-weight:900}.gmAssessFamilySelect p{margin:8px 0 0;color:#b8c7d6}
@media(max-width:760px){.analyticsTrendSummary{grid-template-columns:repeat(2,minmax(0,1fr))}.analyticsPatternGrid,.gmAssessModes{grid-template-columns:1fr}.matchReviewTable th,.matchReviewTable td{font-size:.74rem!important;padding:9px 5px!important}.matchReviewTable th:first-child,.matchReviewTable td:first-child{width:40%}.profileIdentityRecords{gap:14px}}


/* v14.9.2 — static heraldic result banners; animated celebration held for performance */
#celebrationOverlay{display:none!important;}
.resultTierBanner{
  display:block;
  width:min(92%,620px);
  height:auto;
  margin:clamp(-12px,-1.8vw,-4px) auto clamp(-10px,-1.2vw,-2px);
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
#completionPanel .resultCard,#lossPanel .resultCard{
  padding-top:clamp(16px,3vw,26px);
}
#completionPanel[data-result-tier="perfect"] .bonusTitle{color:#ffc44d;}
#completionPanel[data-result-tier="well-done"] .bonusTitle{color:#dcecff;}
#lossPanel[data-result-tier="nice-try"] .lossTitle{color:#ff6b6b;}
#completionPanel .bonusTitle,#lossPanel .lossTitle{
  margin-top:0;
  position:relative;
  z-index:2;
}
@media (max-width:620px){
  .resultTierBanner{width:min(96%,560px);margin-top:-8px;margin-bottom:-5px;}
}


/* v14.9.3 — result heraldry rides the modal frame; stronger tier hierarchy */
#completionPanel .resultCardFrame,
#lossPanel .resultCardFrame{
  position:relative;
  width:min(92vw,1040px);
  padding-top:clamp(74px,10vw,126px);
  margin:auto;
}
#completionPanel .resultCard,
#lossPanel .resultCard{
  width:100%!important;
  max-height:calc(100dvh - clamp(118px,16vw,190px))!important;
  padding-top:clamp(88px,11vw,142px)!important;
}
#completionPanel .resultTierBanner,
#lossPanel .resultTierBanner{
  position:absolute;
  z-index:5;
  top:clamp(74px,10vw,126px);
  left:50%;
  transform:translate(-50%,-50%);
  width:min(88%,760px);
  max-height:clamp(150px,24vw,270px);
  margin:0!important;
  object-fit:contain;
  pointer-events:none;
}
#completionPanel .bonusTitle,
#lossPanel .lossTitle{
  font-size:clamp(44px,7.5vw,84px)!important;
  line-height:.94!important;
  letter-spacing:.035em!important;
  margin:0 0 clamp(14px,2vw,24px)!important;
}
#completionPanel[data-result-tier="perfect"] .resultCard{
  border-color:rgba(255,196,77,.95)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.66),0 0 50px rgba(255,196,77,.12)!important;
}
#completionPanel[data-result-tier="well-done"] .resultCard{
  border-color:rgba(205,218,232,.88)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.66),0 0 44px rgba(205,218,232,.09)!important;
}
#lossPanel[data-result-tier="nice-try"] .resultCard{
  border-color:rgba(255,107,107,.72)!important;
}
@media(max-width:620px){
  #completionPanel .resultCardFrame,
  #lossPanel .resultCardFrame{
    width:94vw;
    padding-top:68px;
  }
  #completionPanel .resultTierBanner,
  #lossPanel .resultTierBanner{
    top:68px;
    width:94%;
    max-height:180px;
  }
  #completionPanel .resultCard,
  #lossPanel .resultCard{
    max-height:calc(100dvh - 92px)!important;
    padding-top:86px!important;
  }
  #completionPanel .bonusTitle,
  #lossPanel .lossTitle{
    font-size:clamp(40px,11vw,58px)!important;
  }
}


/* v14.9.4 — stronger result hierarchy + compact training summary */
/* Result message is the reward headline; the vocabulary target stays neutral white. */
#completionPanel .bonusTitle,
#lossPanel .lossTitle{
  font-size:clamp(68px,9.5vw,124px)!important;
  line-height:.9!important;
  font-weight:1000!important;
  letter-spacing:.025em!important;
  margin-bottom:clamp(16px,2.3vw,28px)!important;
}
#completionPanel[data-result-tier="perfect"] .bonusTitle{color:#ffc044!important;}
#completionPanel[data-result-tier="well-done"] .bonusTitle{color:#268cff!important;}
#lossPanel[data-result-tier="nice-try"] .lossTitle{color:#ff5d63!important;}
#completionPanel .result-word,
#lossPanel .result-word{color:#fff!important;}

/* A missed training word ends with one centered, quieter route to the round summary. */
#lossPanel.trainingRoundEnd .resultActions{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:100%!important;
}
#lossPanel.trainingRoundEnd #lossNextBtn{
  width:min(54%,340px)!important;
  min-width:220px!important;
  margin:0 auto!important;
  padding:12px 18px!important;
  min-height:50px!important;
  font-size:clamp(13px,1.8vw,18px)!important;
  line-height:1.05!important;
  text-align:center!important;
}

/* Training summary: smaller brand mark, one-row stats, two primary actions, text exit. */
#trainingEndPanel .trainingEndLogo{
  width:min(35%,150px)!important;
  margin:0 auto 4px!important;
}
#trainingEndPanel .trainingSummaryGrid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin:16px 0 22px!important;
}
#trainingEndPanel .trainingSummaryGrid > div{
  padding:15px 7px!important;
}
#trainingEndPanel .trainingSummaryGrid strong{
  font-size:clamp(22px,4.4vw,34px)!important;
}
#trainingEndPanel .trainingSummaryGrid span{
  font-size:clamp(8px,1.25vw,11px)!important;
}
#trainingEndPanel .trainingEndActions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  align-items:center!important;
}
#trainingEndPanel #trainingReviewBtn,
#trainingEndPanel #trainingContinueBtn{
  width:100%!important;
  min-width:0!important;
  min-height:58px!important;
  border-radius:999px!important;
}
#trainingEndPanel #trainingHomeBtn{
  grid-column:1 / -1!important;
  width:auto!important;
  min-height:0!important;
  justify-self:center!important;
  margin:8px auto 0!important;
  padding:6px 12px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#c8d2df!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}
#trainingEndPanel #trainingHomeBtn:hover,
#trainingEndPanel #trainingHomeBtn:focus{color:#fff!important;}

@media(max-width:620px){
  #completionPanel .bonusTitle,
  #lossPanel .lossTitle{font-size:clamp(58px,14vw,82px)!important;}
  #lossPanel.trainingRoundEnd #lossNextBtn{width:min(70%,320px)!important;min-width:0!important;}
  #trainingEndPanel .trainingEndLogo{width:min(34%,128px)!important;}
  #trainingEndPanel .trainingSummaryGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;}
  #trainingEndPanel .trainingSummaryGrid > div{padding:12px 4px!important;}
  #trainingEndPanel .trainingEndActions{grid-template-columns:1fr 1fr!important;}
  #trainingEndPanel #trainingReviewBtn,
  #trainingEndPanel #trainingContinueBtn{font-size:10px!important;padding:10px 7px!important;}
}

/* v0.20.21 — true static four-card opening fan. */
#homeScreen .startCardFan{
  position:relative!important;
  width:min(430px,78vw)!important;
  height:225px!important;
  margin:0 auto -4px!important;
  pointer-events:none!important;
}
#homeScreen .startCardFan .startFanCard{
  position:absolute!important;
  left:50%!important;
  top:4px!important;
  width:145px!important;
  height:auto!important;
  opacity:1!important;
  animation:none!important;
  transition:none!important;
  will-change:auto!important;
  transform-origin:50% 92%!important;
}
#homeScreen .startCardFan .startFanFarLeft{transform:translateX(-128%) translateY(22px) rotate(-25deg)!important;z-index:1!important}
#homeScreen .startCardFan .startFanLeft{transform:translateX(-84%) translateY(3px) rotate(-9deg)!important;z-index:2!important}
#homeScreen .startCardFan .startFanRight{transform:translateX(-16%) translateY(3px) rotate(9deg)!important;z-index:3!important}
#homeScreen .startCardFan .startFanFarRight{transform:translateX(28%) translateY(22px) rotate(25deg)!important;z-index:1!important}
#homeScreen .startCardFan.dealAgain .startFanCard{animation:none!important}
@media(max-width:680px){
  #homeScreen .startCardFan{width:min(390px,84vw)!important;height:200px!important}
  #homeScreen .startCardFan .startFanCard{width:128px!important}
}
@media(max-width:420px){
  #homeScreen .startCardFan{width:min(350px,88vw)!important;height:180px!important}
  #homeScreen .startCardFan .startFanCard{width:114px!important}
}


/* v0.20.22 — 14.9.7 Workshop/Profile/Archive/Stats polish */
/* Opening four-card fan: tighter hand-held spacing; far-right card is on top. */
#homeScreen .startCardFan{width:min(380px,72vw)!important}
#homeScreen .startCardFan .startFanFarLeft{transform:translateX(-112%) translateY(20px) rotate(-22deg)!important;z-index:1!important}
#homeScreen .startCardFan .startFanLeft{transform:translateX(-76%) translateY(4px) rotate(-8deg)!important;z-index:2!important}
#homeScreen .startCardFan .startFanRight{transform:translateX(-26%) translateY(4px) rotate(8deg)!important;z-index:3!important}
#homeScreen .startCardFan .startFanFarRight{transform:translateX(10%) translateY(20px) rotate(22deg)!important;z-index:4!important}

/* Workshop Profile tile is intentionally a stable/default icon. */
#unifiedProfileBtn img{content:url('../assets/avatars/avatar-09.png')!important}

/* Profile private sub-screens */
.profileSubscreen{text-align:left;color:#10233a;padding:4px 2px 12px}
.profileSubscreen h3{font-size:1.45rem;letter-spacing:.08em;margin:14px 0;color:#10233a}
.profileSubBack{border:0;background:transparent;color:#365a79;font-weight:950;letter-spacing:.08em;padding:4px 0;cursor:pointer}
.profileSettingRows,.accountActionList,.supportCards{display:grid;gap:10px}
.profileSettingRows label,.accountActionList button,.supportCards>a,.supportCards>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid #d4dee7;border-radius:14px;background:#fff;color:#10233a;text-decoration:none}
.profileSettingRows span,.accountActionList b,.supportCards b{font-weight:950;letter-spacing:.05em}.accountActionList span,.supportCards span{font-size:.78rem;color:#657a8f}.accountActionList button{text-align:left;cursor:pointer}.accountActionList button b,.accountActionList button span{display:block}
.membershipCurrent{padding:16px;border-radius:16px;background:#0b2238;color:#fff;margin-bottom:12px}.membershipCurrent small,.membershipCurrent strong{display:block}.membershipCurrent strong{font-size:1.4rem;color:#f4b52f;margin-top:4px}
.membershipTierCards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.membershipTierCards article{padding:14px;border:1px solid #d4dee7;border-radius:14px;background:#fff}.membershipTierCards b,.membershipTierCards span{display:block}.membershipTierCards span{font-size:.78rem;color:#657a8f;margin-top:5px;line-height:1.35}.profileSubNote{font-size:.75rem;color:#718599;margin-top:12px}
@media(max-width:680px){.membershipTierCards{grid-template-columns:1fr}.profileSettingRows label{align-items:flex-start;flex-direction:column}}

/* Archive: actual per-word colors and pulsing missed days. */
.archiveDayDots,.archiveResultStrip{display:flex;justify-content:center;gap:3px;margin:7px 0 2px}.archiveResultDot,.archiveLegend i{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.18)}
.archiveResultDot.perfect,.archiveLegend i.perfect{background:#39d98a}.archiveResultDot.complete,.archiveLegend i.complete{background:#f4b52f}.archiveResultDot.failed,.archiveLegend i.failed{background:#ff5e63}.archiveResultDot.unplayed,.archiveLegend i.unplayed{background:#111a23}
.archiveLegend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;margin:14px 0 4px;color:#62778b;font-size:.7rem;font-weight:800}.archiveLegend span{display:flex;align-items:center;gap:5px}
.archiveDay.isMissed{animation:archiveMissedPulse 1.65s ease-in-out infinite}@keyframes archiveMissedPulse{0%,100%{box-shadow:0 0 0 0 rgba(244,181,47,0)}50%{box-shadow:0 0 0 5px rgba(244,181,47,.24)}}
.archiveResultView .archiveResultStrip{gap:8px;margin:18px 0}.archiveResultView .archiveResultDot{width:18px;height:18px}

/* Leaderboard player detail: rank badge above battle record, crest above guild record. */
.playerPopupBadge{position:static!important;width:66px!important;height:66px!important}.playerPopupCrest{width:66px;height:66px;object-fit:contain}.playerRecordGrid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px;margin:16px 0!important}.playerRecordItem{display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;margin:0!important;padding:12px!important;background:rgba(255,255,255,.035);border-radius:14px}.playerRecordItem.versus{grid-column:1/-1}.playerRecordIcon{display:block;margin-bottom:3px}.playerGuildSummary>img{display:none!important}

/* Analytics: detail text stays visible and each metric can independently drive the trend. */
.analyticsInsightGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.analyticsInsightGrid>button{appearance:none;text-align:left;padding:12px 10px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.035);cursor:pointer;color:inherit}.analyticsInsightGrid>button strong,.analyticsInsightGrid>button span{display:block}.analyticsInsightGrid>button strong{color:#f4b52f;font-size:11px;letter-spacing:.06em}.analyticsInsightGrid>button span{margin-top:6px;color:#d9e3ef!important;font-size:11px!important;line-height:1.35!important;opacity:1!important;visibility:visible!important}.analyticsInsightGrid>button.isActive{outline:2px solid #f4b52f;background:rgba(244,181,47,.08)}
@media(max-width:760px){.analyticsInsightGrid{grid-template-columns:1fr 1fr!important}}

.profileAccountForm{display:grid;gap:12px}.profileAccountForm label{display:grid;gap:6px;font-size:.72rem;font-weight:900;letter-spacing:.06em;color:#50677d}.profileAccountForm input{width:100%;box-sizing:border-box;padding:12px;border:1px solid #cbd7e1;border-radius:10px;font:inherit}.accountInfoCard{padding:16px;border:1px solid #d4dee7;border-radius:14px;background:#fff}.accountInfoCard b,.accountInfoCard span{display:block}.accountInfoCard span{margin-top:6px;color:#657a8f;line-height:1.4}.profileAccountBack{border:0;background:transparent;color:#365a79;font-weight:950;letter-spacing:.08em;padding:4px 0;cursor:pointer}

/* v0.20.23 — 14.9.8 Profile settings/membership polish */
.profileSettingsScreen,.profileMembershipScreen{color:#10233a}
.profileSettingsScreen h3,.profileMembershipScreen h3{margin-bottom:14px}
.accountStyleRows{display:grid;gap:10px}
.profileSettingToggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 16px;border:1px solid #d4dee7;border-radius:14px;background:#fff;color:#10233a;
  text-align:left;cursor:pointer;font:inherit
}
.profileSettingCopy{display:grid;gap:4px;min-width:0}.profileSettingCopy b{font-size:.9rem;letter-spacing:.05em}.profileSettingCopy small{font-size:.76rem;color:#657a8f;line-height:1.3;font-weight:600}
.profileSwitchLabels{display:flex;align-items:center;gap:7px;flex:0 0 auto}.profileSwitchLabels em{font-size:.66rem;font-style:normal;font-weight:900;letter-spacing:.05em;color:#8797a7}.profileSwitch{position:relative;width:44px;height:24px;border-radius:999px;background:#9aa9b7;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}.profileSwitch u{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);transition:transform .14s ease}.profileSettingToggle[aria-pressed="true"] .profileSwitch{background:#1d78bb}.profileSettingToggle[aria-pressed="true"] .profileSwitch u{transform:translateX(20px)}.profileSettingToggle[aria-pressed="true"] [data-toggle-right],.profileSettingToggle[aria-pressed="false"] [data-toggle-left]{color:#10233a}

.membershipTierCards{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
.membershipTierCard{padding:0!important;border:1px solid #d4dee7!important;border-radius:14px!important;background:#fff!important;overflow:hidden}
.membershipTierCard.isCurrent{border-color:#f4b52f!important;box-shadow:0 0 0 1px rgba(244,181,47,.2)}
.membershipTierToggle{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 22px;gap:12px;align-items:center;padding:14px 16px;border:0;background:#fff;color:#10233a;text-align:left;cursor:pointer;font:inherit}
.membershipTierToggle>span{display:grid;gap:4px}.membershipTierToggle b{font-size:.92rem;letter-spacing:.05em}.membershipTierToggle b small{font-size:.62rem;color:#a56d08;white-space:nowrap}.membershipTierToggle em{font-size:.76rem;font-style:normal;color:#657a8f;line-height:1.32}.membershipTierToggle>strong{font-size:.78rem;color:#1b5c8c;white-space:nowrap}.membershipTierToggle>i{font-style:normal;font-size:1.15rem;font-weight:900;color:#6d8091;transition:transform .15s ease}.membershipTierToggle[aria-expanded="true"]>i{transform:rotate(45deg)}
.membershipTierDetail{padding:0 16px 15px;border-top:1px solid #edf1f5;background:#fbfcfd}.membershipTierDetail p{margin:12px 0 0;font-size:.8rem;line-height:1.45;color:#50677d}.membershipTierCard.isExpanded{box-shadow:0 7px 20px rgba(13,41,68,.08)}

.profileScreenNameEditor input[disabled]{cursor:default;opacity:.94}.profileScreenNameEditor input.isEditing{border-color:#f4b52f;box-shadow:0 0 0 2px rgba(244,181,47,.16);cursor:text}.profileScreenNameEditor button{min-width:64px}
@media(max-width:680px){.profileSettingToggle{align-items:flex-start}.profileSwitchLabels{padding-top:2px}.membershipTierToggle{grid-template-columns:minmax(0,1fr) auto}.membershipTierToggle>i{display:none}.membershipTierToggle>strong{font-size:.72rem}}

/* v0.20.24 — 14.9.9 Safari identity layout + entry fan spacing */
/* Equalize the four-card hand: bring the two center cards slightly together. */
#homeScreen .startCardFan .startFanLeft{transform:translateX(-72%) translateY(4px) rotate(-8deg)!important}
#homeScreen .startCardFan .startFanRight{transform:translateX(-30%) translateY(4px) rotate(8deg)!important}
#homeScreen .startCardFan .startFanFarRight{z-index:4!important}

/* Make Workshop badge/title geometry explicit instead of relying on browser-specific intrinsic sizing. */
#workshopPreviewScreen .workshopIdentityCard.workshopClean{
  position:relative!important;
  padding-top:82px!important;
}
#workshopPreviewScreen #workshopIdentityBadge.rankBadgeButton{
  position:absolute!important;
  left:50%!important;right:auto!important;top:-66px!important;
  width:132px!important;height:132px!important;min-width:132px!important;min-height:132px!important;
  max-width:132px!important;max-height:132px!important;
  transform:translateX(-50%)!important;
}
#workshopPreviewScreen #workshopIdentityBadge.rankBadgeButton .workshopBadgeImage{
  width:100%!important;height:100%!important;object-fit:contain!important;
}
#workshopPreviewScreen .workshopTitle{margin-top:0!important}

/* Safari: lock the same badge/title spacing used by Chromium and avoid intrinsic-image expansion. */
@supports (-webkit-touch-callout:none){
  #workshopPreviewScreen .workshopIdentityCard.workshopClean{padding-top:82px!important}
  #workshopPreviewScreen #workshopIdentityBadge.rankBadgeButton{top:-66px!important;width:132px!important;height:132px!important;min-width:132px!important;min-height:132px!important;max-width:132px!important;max-height:132px!important}
  #workshopPreviewScreen #workshopIdentityBadge.rankBadgeButton .workshopBadgeImage{display:block!important;width:132px!important;height:132px!important;max-width:132px!important;max-height:132px!important}
  .profileScreenNameEditor input{-webkit-appearance:none!important;appearance:none!important}
}
@media(max-width:680px){
  #workshopPreviewScreen .workshopIdentityCard.workshopClean{padding-top:72px!important}
  #workshopPreviewScreen #workshopIdentityBadge.rankBadgeButton{top:-58px!important;width:116px!important;height:116px!important;min-width:116px!important;min-height:116px!important;max-width:116px!important;max-height:116px!important}
}

/* v14.9.10 — persistent player-status stroke language
   The Workshop establishes the player's identity color. That same stroke now
   follows the player through tools and modal surfaces. Per-word Daily Slice
   result cards remain outcome-colored because gold / blue / red communicates
   result quality there, not player progression. */
html,body{
  --player-edge:#efaa2d;
  --player-edge-soft:rgba(239,170,45,.18);
  --player-stroke:6px;
}
html[data-player-theme="guest"],body[data-player-theme="guest"]{--player-edge:#d8cfb9;--player-edge-soft:rgba(216,207,185,.16)}
html[data-player-theme="freelance"],body[data-player-theme="freelance"]{--player-edge:#efaa2d;--player-edge-soft:rgba(239,170,45,.18)}
html[data-player-theme="apprentice"],body[data-player-theme="apprentice"]{--player-edge:#e8e1d3;--player-edge-soft:rgba(232,225,211,.16)}
html[data-player-theme="carpenter"],body[data-player-theme="carpenter"]{--player-edge:#b87532;--player-edge-soft:rgba(184,117,50,.18)}
html[data-player-theme="mason"],body[data-player-theme="mason"]{--player-edge:#a9aaab;--player-edge-soft:rgba(169,170,171,.17)}
html[data-player-theme="smith"],body[data-player-theme="smith"]{--player-edge:#76828b;--player-edge-soft:rgba(118,130,139,.18)}
html[data-player-theme="jeweler"],body[data-player-theme="jeweler"]{--player-edge:#7551a6;--player-edge-soft:rgba(117,81,166,.20)}
html[data-player-theme="engineer"],body[data-player-theme="engineer"]{--player-edge:#2a9be8;--player-edge-soft:rgba(42,155,232,.20)}

/* Major Workshop/tool/modal shells share one stroke weight and current status color. */
body[data-player-theme] #workshopPreviewScreen .workshopPreviewCard,
body[data-player-theme] .identityModalCard,
body[data-player-theme] .workshopToolShell,
body[data-player-theme] .trainingModeCard,
body[data-player-theme] .statsReport,
body[data-player-theme] .partnerPracticeCard,
body[data-player-theme] .guildSetupCard,
body[data-player-theme] .playerPopup,
body[data-player-theme] .matchReviewCard,
body[data-player-theme] .trainingEndCard,
body[data-player-theme] .dailyEndCard,
body[data-player-theme] .dailyReviewCard,
body[data-player-theme] .warmupIntroCard{
  border-width:var(--player-stroke)!important;
  border-style:solid!important;
  border-color:var(--player-edge)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 24px var(--player-edge-soft)!important;
}

/* The in-game lower-right identity tile also carries the player's persistent
   status color, including during Daily Slice. */
body[data-player-theme] #rankPanel{
  --identity-edge:var(--player-edge)!important;
  border-width:var(--player-stroke)!important;
  border-color:var(--player-edge)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.32),0 0 16px var(--player-edge-soft),inset 0 0 0 1px rgba(255,255,255,.025)!important;
}
body[data-player-theme] #rankBadge{
  border-color:var(--player-edge)!important;
}

/* IMPORTANT: word-by-word Daily Slice result colors are outcome semantics and
   intentionally override the persistent player-status stroke. */
body[data-player-theme] #completionPanel .resultCardSuccess{
  border-width:6px!important;
}
body[data-player-theme] #lossPanel .resultCardLoss{
  border-width:6px!important;
}

/* Guildmaster visual tool tiles + lesson resources */
.guildmasterWidgets button{overflow:hidden!important;padding:0 0 20px!important;align-items:stretch!important}
.guildmasterWidgets .gmToolGraphic{display:block!important;width:100%!important;aspect-ratio:1/1!important;object-fit:cover!important;border-radius:16px 16px 0 0!important;margin:0 0 18px!important}
.guildmasterWidgets button b,.guildmasterWidgets button span{margin-left:20px!important;margin-right:20px!important}
.guildmasterWidgets button b{align-self:flex-start!important}
.guildmasterWidgets button span{align-self:flex-start!important;text-align:left!important}
.gmLessonResources{display:grid;gap:12px;margin-top:18px}
.gmLessonResources a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 18px;align-items:center;background:#fff;color:#10233a!important;border:1px solid #c6d4df;border-radius:14px;padding:16px 18px;text-decoration:none!important}
.gmLessonResources a b{grid-column:1;color:#17314b;letter-spacing:.03em}
.gmLessonResources a span{grid-column:1;color:#60758a}
.gmLessonResources a strong{grid-column:2;grid-row:1/3;color:#a66c03;white-space:nowrap}
@media(max-width:700px){.gmLessonResources a{grid-template-columns:1fr}.gmLessonResources a strong{grid-column:1;grid-row:auto;margin-top:8px}}

/* v14.9.12 — Guildmaster icon-driven tools + unified lighter stroke */
/* Platform modal stroke reduced by 50% from the prior 6px standard. */
html,body{--player-stroke:3px!important}
body[data-player-theme] #completionPanel .resultCardSuccess,
body[data-player-theme] #lossPanel .resultCardLoss{border-width:3px!important}

/* Guildmaster home now uses the same dark/icon-driven visual language as Workshop. */
.guildmasterProto{
  background:transparent!important;
  background-image:none!important;
  padding:10px 4px!important;
}
.guildmasterWidgets{
  gap:22px!important;
  align-items:start!important;
}
.guildmasterWidgets button,
.guildmasterWidgets button:nth-child(even){
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  padding:16px 12px 18px!important;
  background:rgba(4,20,35,.38)!important;
  background-image:none!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:20px!important;
  box-shadow:none!important;
  color:#fff!important;
  overflow:visible!important;
}
.guildmasterWidgets button:hover,
.guildmasterWidgets button:focus-visible{
  border-color:var(--player-edge)!important;
  box-shadow:0 0 0 1px var(--player-edge-soft),0 10px 24px rgba(0,0,0,.22)!important;
}
.guildmasterWidgets .gmToolGraphic{
  display:block!important;
  width:88%!important;
  height:170px!important;
  max-width:250px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  border-radius:0!important;
  margin:0 auto 12px!important;
  /* A restrained ~1px light edge keeps transparent artwork readable on navy. */
  filter:
    drop-shadow(1px 0 0 rgba(238,245,252,.66))
    drop-shadow(-1px 0 0 rgba(238,245,252,.66))
    drop-shadow(0 1px 0 rgba(238,245,252,.66))
    drop-shadow(0 -1px 0 rgba(238,245,252,.66))
    drop-shadow(0 7px 10px rgba(0,0,0,.34))!important;
}
.guildmasterWidgets button b,
.guildmasterWidgets button span{
  margin-left:8px!important;
  margin-right:8px!important;
  align-self:center!important;
  text-align:center!important;
}
.guildmasterWidgets button b{
  color:#fff!important;
  margin-bottom:6px!important;
  font-size:1.08rem!important;
  letter-spacing:.08em!important;
}
.guildmasterWidgets button span{
  color:#9fb0c4!important;
  font-size:.82rem!important;
  line-height:1.4!important;
}

/* Guildmaster sub-tools stay in the same navy environment rather than changing to a white card. */
.guildmasterSubpanel{
  background:rgba(4,20,35,.52)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:18px!important;
  padding:20px!important;
}
.guildmasterCompactPanel>h3,
.guildmasterCompactPanel>p{color:#fff!important}

/* Lessons are a clean downloadable list, not a stack of white cards. */
.gmLessonResources{
  display:block!important;
  margin-top:18px!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
}
.gmLessonResources a{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:4px 18px!important;
  align-items:center!important;
  background:transparent!important;
  color:#fff!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  border-radius:0!important;
  padding:17px 4px!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
.gmLessonResources a:hover,
.gmLessonResources a:focus-visible{background:rgba(255,255,255,.035)!important}
.gmLessonResources a b{grid-column:1!important;color:#fff!important;letter-spacing:.035em!important}
.gmLessonResources a span{grid-column:1!important;color:#9fb0c4!important}
.gmLessonResources a strong{
  grid-column:2!important;
  grid-row:1/3!important;
  color:var(--player-edge)!important;
  white-space:nowrap!important;
  font-size:.78rem!important;
}

/* Pending Challenge polish: game/player rows use the compact scale of the identity tile above. */
.challengeListRow{
  grid-template-columns:128px minmax(0,1fr) 110px 120px!important;
  min-height:144px!important;
  padding:14px 16px!important;
  column-gap:14px!important;
}
.challengeAvatar{
  width:112px!important;
  height:112px!important;
  margin-left:0!important;
  border-width:2px!important;
}
.challengeAvatar>img:first-child{
  width:108px!important;
  height:108px!important;
  transform:scale(1.08)!important;
}
.challengeAvatarCrest{width:44px!important;height:52px!important;right:-5px!important;bottom:-5px!important}
.challengeAvatar .presenceDot{width:14px!important;height:14px!important;border-width:2px!important;right:3px!important;top:5px!important}
.challengePlayer b{font-size:1.05rem!important}
.challengePlayer p{font-size:.82rem!important}
.challengeScore strong{font-size:1.45rem!important}
.challengeScore small{font-size:.58rem!important}
.challengeListRow>button:not(.challengeAvatar){padding:9px 14px!important;font-size:.72rem!important}

@media(max-width:900px){
  .guildmasterWidgets{gap:14px!important}
  .guildmasterWidgets .gmToolGraphic{height:140px!important}
  .challengeListRow{grid-template-columns:104px minmax(0,1fr) 90px!important;min-height:130px!important}
  .challengeAvatar{width:94px!important;height:94px!important}
  .challengeAvatar>img:first-child{width:90px!important;height:90px!important}
  .challengeListRow>button:not(.challengeAvatar){grid-column:2/4!important;justify-self:start!important}
}
@media(max-width:700px){
  .guildmasterWidgets{grid-template-columns:1fr!important}
  .guildmasterWidgets button{max-width:360px!important;width:100%!important;margin:0 auto!important}
  .guildmasterWidgets .gmToolGraphic{height:150px!important;width:76%!important}
  .gmLessonResources a{grid-template-columns:1fr!important}
  .gmLessonResources a strong{grid-column:1!important;grid-row:auto!important;margin-top:7px!important}
}
\n\n/* Final 14.9.13 — custom lists, responsive challenge rows, uniform training chips */\n.customListActions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}\n.customListActions button{width:100%!important;min-height:50px!important;height:50px!important;padding:0 16px!important;display:flex!important;align-items:center!important;justify-content:center!important}\n.trainingCatalogCard.isProfessional{width:100%!important;max-width:none!important}\n.trainingCatalogCard.isProfessional .professionalLevels{grid-template-columns:repeat(3,minmax(0,1fr))!important}\n.trainingCatalogCard.isProfessional .trainingLevelRow button{width:100%!important;min-width:0!important}\n/* Opponent/history rows follow the same fluid identity-chip behavior as the self chip. */\n.challengeListRow{grid-template-columns:112px minmax(0,1fr) auto!important;grid-template-areas:"avatar player score" "avatar action action"!important;min-height:0!important;height:auto!important;align-items:center!important}\n.challengeAvatar{grid-area:avatar!important;max-width:100%!important}\n.challengePlayer{grid-area:player!important;min-width:0!important}\n.challengePlayer h3,.challengePlayer b,.challengePlayer p{overflow-wrap:anywhere!important}\n.challengeScore{grid-area:score!important;min-width:72px!important}\n.challengeListRow>button:not(.challengeAvatar){grid-area:action!important;justify-self:start!important;width:auto!important;min-width:96px!important}\n@media(max-width:620px){\n .challengeListRow{grid-template-columns:86px minmax(0,1fr)!important;grid-template-areas:"avatar player" "avatar score" "avatar action"!important;padding:12px!important;gap:7px 12px!important}\n .challengeAvatar{width:80px!important;height:80px!important}.challengeAvatar>img:first-child{width:76px!important;height:76px!important}\n .challengeScore{text-align:left!important}.challengeListRow>button:not(.challengeAvatar){justify-self:start!important}\n .customListActions{grid-template-columns:1fr!important}\n}\n
/* v14.9.14 — title-screen artwork + three-card fan */
body.entry-active:has(#homeScreen:not([hidden])) #entryFlow.show{
  background:
    linear-gradient(rgba(3,12,26,.16),rgba(3,12,26,.30)),
    url("../assets/title-screen-background.png") center center/cover no-repeat!important;
}
#homeScreen .homeShell{
  background:transparent!important;
}
#homeScreen .homeHeroLogo{
  width:min(88vw,560px)!important;
  max-height:min(25dvh,250px)!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.42));
}
#homeScreen .startCardFan{
  width:min(330px,68vw)!important;
  height:205px!important;
}
#homeScreen .startCardFan .startFanCard{
  left:50%!important;
  top:5px!important;
  width:140px!important;
  transform-origin:50% 92%!important;
}
#homeScreen .startCardFan .startFanLeft{
  transform:translateX(-88%) translateY(16px) rotate(-18deg)!important;
  z-index:1!important;
}
#homeScreen .startCardFan .startFanCenter{
  transform:translateX(-50%) translateY(0) rotate(0deg)!important;
  z-index:2!important;
}
#homeScreen .startCardFan .startFanRight{
  transform:translateX(-12%) translateY(16px) rotate(18deg)!important;
  z-index:3!important;
}
@media(max-width:680px){
  #homeScreen .homeHeroLogo{width:min(88vw,470px)!important;max-height:23dvh!important}
  #homeScreen .startCardFan{width:min(300px,76vw)!important;height:185px!important}
  #homeScreen .startCardFan .startFanCard{width:124px!important}
}
@media(max-width:420px){
  #homeScreen .startCardFan{width:min(280px,80vw)!important;height:168px!important}
  #homeScreen .startCardFan .startFanCard{width:112px!important}
}


/* v14.9.15 — reliable title artwork selector (no :has dependency) */
body.home-screen-active #entryFlow.show{
  background-image:
    linear-gradient(rgba(3,12,26,.16),rgba(3,12,26,.30)),
    url("../assets/title-screen-background.png?v=14915")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}


/* Final 14.9.17 — canonical Slice identity + hall/court gameplay environment */
.app{
  background:
    linear-gradient(rgba(5,14,28,.70),rgba(4,12,24,.84)),
    url("../assets/title-screen-background.png?v=14917") center center/cover no-repeat!important;
}
/* Keep gameplay controls readable while allowing the court to remain visible. */
header{background:rgba(8,17,31,.72)!important;}


/* v0.20.22 — Daily results conversion + entitlement cleanup */
#dailyEndPanel .dailyEndCard{max-height:92dvh!important;overflow-y:auto!important;}
#dailyEndPanel #dailyEndKicker{display:none!important;}
#dailyEndPanel #dailyEndTitle{margin:2px 0 10px!important;font-size:clamp(20px,5vw,30px)!important;}
#dailyEndPanel #dailyEndSummary{display:none!important;}
#dailyEndPanel .dailyEndDots{margin:8px auto 16px!important;}
#dailyEndPanel .dailyPrimaryActions{margin:0 0 18px!important;}
#dailyEndPanel .dailyInlineSlices{border-top:1px solid rgba(255,255,255,.14);padding-top:14px;margin-top:2px;text-align:center;}
#dailyEndPanel .dailyInlineSlices h3{margin:0 0 3px;font-size:16px;letter-spacing:.12em;}
#dailyEndPanel .dailyInlineInstruction{margin:0 0 10px;color:#9caec3;font-size:11px;}
#dailyEndPanel #dailyEndReviewList{margin:8px 0 16px!important;gap:7px!important;}
#dailyEndPanel #dailyEndReviewList .sliceReviewRow{min-height:44px;}
#dailyEndPanel .dailyExitActions{border-top:1px solid rgba(255,255,255,.14);padding-top:14px!important;margin-top:4px!important;}
#dailyEndPanel #dailyKeepSlicingBtn{width:100%!important;max-width:none!important;}
#dailyEndPanel #dailyHomeBtn{background:transparent!important;border:0!important;box-shadow:none!important;font-size:12px!important;opacity:.78;}
@media(max-width:680px){#dailyEndPanel .dailyEndCard{max-height:96dvh!important;padding:14px 16px 16px!important;}#dailyEndPanel .dailyEndLogo{width:min(54%,220px)!important;}#dailyEndPanel #dailyEndReviewList{gap:5px!important;}}
\n\n/* v0.20.23 — fixed Daily results shell; only slice history scrolls */\n#dailyEndPanel .dailyEndCard{\n  max-height:92dvh!important;\n  overflow:hidden!important;\n}\n#dailyEndPanel .dailyInlineSlices{\n  min-height:0;\n  display:flex;\n  flex-direction:column;\n}\n#dailyEndPanel #dailyEndReviewList{\n  max-height:clamp(170px,30dvh,330px);\n  overflow-y:auto!important;\n  overscroll-behavior:contain;\n  -webkit-overflow-scrolling:touch;\n  padding-right:4px;\n}\n#dailyEndPanel #dailyShareBtn,\n#dailyEndPanel #dailyKeepSlicingBtn{\n  width:min(68%,520px)!important;\n  max-width:520px!important;\n  min-width:220px;\n  margin-left:auto!important;\n  margin-right:auto!important;\n}\n@media(max-width:680px){\n  #dailyEndPanel .dailyEndCard{max-height:96dvh!important;}\n  #dailyEndPanel #dailyEndReviewList{max-height:clamp(150px,28dvh,260px);}\n  #dailyEndPanel #dailyShareBtn,\n  #dailyEndPanel #dailyKeepSlicingBtn{width:min(76%,360px)!important;min-width:0;}\n}\n

/* Final 14.9.20 — cohesion pass; Daily Slice gameplay environment intentionally unchanged. */
/* Private owner sign-in: only exposed after ?sayword-owner=1 has been visited on this browser. */
.ownerSignInBtn{display:block;margin:12px auto 0;border:1px solid rgba(255,255,255,.28);background:rgba(5,18,34,.72);color:#dce8f5;border-radius:999px;padding:8px 18px;font-weight:900;letter-spacing:.08em}
.ownerSignInBtn[hidden]{display:none!important}
.guideProgression{margin:14px 0 4px;padding:12px 14px;border-left:3px solid #f7b52d;background:rgba(247,181,45,.08);color:#eaf2fb;line-height:1.4;text-align:left}
.guideProgression strong{color:#f7b52d}

/* Favorite hearts use one SVG silhouette in both states; only fill changes. */
.wordFavoriteHeart,.sliceCardFavorite{display:grid!important;place-items:center!important}
.wordFavoriteHeart svg,.sliceCardFavorite svg{width:1em;height:1em;overflow:visible}
.wordFavoriteHeart svg path,.sliceCardFavorite svg path{fill:transparent;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .15s ease}
.wordFavoriteHeart.isFavorited svg path,.sliceCardFavorite.isFavorited svg path{fill:currentColor}

/* Membership overview is intentionally terse; details reveal on tap. */
.profileMembershipScreen .membershipTierToggle em{display:none!important}
.profileMembershipScreen .membershipTierToggle strong{white-space:nowrap}
.profileMembershipScreen .membershipTierCard.isCurrent{box-shadow:inset 0 0 0 1px rgba(247,181,45,.75)}

/* Challenge opponents mirror the self card's bounded, fluid identity treatment. */
.challengeListRow{grid-template-columns:118px minmax(0,1fr) 86px!important;grid-template-areas:"avatar player score" "avatar action action"!important;overflow:hidden!important;width:100%!important;max-width:100%!important}
.challengeAvatar{grid-area:avatar!important;width:108px!important;height:108px!important;margin:0!important;min-width:0!important}
.challengeAvatar>img:first-child{width:104px!important;height:104px!important;transform:none!important}
.challengeAvatarCrest{width:44px!important;height:52px!important;right:-2px!important;bottom:-3px!important}
.challengePlayer{grid-area:player!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}
.challengePlayer h3{max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.challengePlayer b,.challengePlayer p{white-space:normal!important;overflow-wrap:anywhere!important}
.challengeScore{grid-area:score!important;min-width:0!important;width:auto!important;text-align:center!important}
.challengeListRow>button:not(.challengeAvatar){grid-area:action!important;justify-self:start!important;min-width:96px!important;width:auto!important}
@media(max-width:620px){.challengeListRow{grid-template-columns:86px minmax(0,1fr)!important;grid-template-areas:"avatar player" "avatar score" "avatar action"!important}.challengeAvatar{width:80px!important;height:80px!important}.challengeAvatar>img:first-child{width:78px!important;height:78px!important}.challengeScore{text-align:left!important}}

/* Guild surfaces return to the core dark Slice visual language. */
.guildListItem,.guildDetailDemo,.guildMemberDemo,.guildPlayerProfile,.guildPlayerHero,.guildPlayerMatchGrid article{background:#07192b!important;color:#fff!important;border-color:#30485f!important}
.guildListInfo h3,.guildDetailDemo h3,.guildDetailDemo h4,.guildMemberDemo b,.guildPlayerHero h3,.guildPlayerHero b{color:#fff!important}
.guildListInfo p,.guildDetailDemo p,.guildMemberDemo small,.guildPlayerHero p,.guildPlayerHero span{color:#aebfd1!important}
.guildMemberDemo>em b{color:#f7b52d!important}

/* Gold-filled action chips always use navy text for contrast. */
.prototypePrimary,.archiveStartBtn,.membershipAction,.trainingLevelRow button:not([disabled]),.segmented button.active,.filterChips button.active,.achievementTabs button.active,.guildMemberSources button.isSelected,.gmTrainingTabs button.isSelected,.gmAssessTiles span,.customPlayOrder button.isSelected,.gmStudentPicker button.isSelected,.guildPlayerMatchGrid article button,.guildDetailDemo button[style*="background"]{color:#071425!important}
.guildPlayerMatchGrid article button{background:#f7b52d!important;border-color:#f7b52d!important}


/* Final 14.9.21 — static opening fan, explicit owner access, cache-proof title artwork. */
body.home-screen-active #entryFlow.show,
body.entry-active:has(#homeScreen:not([hidden])) #entryFlow.show{
  background-image:
    linear-gradient(rgba(3,12,26,.16),rgba(3,12,26,.30)),
    url("../assets/title-screen-background-14922.png")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
/* Opening cards are already in place. No deal/fly/spin entrance animation. */
#homeScreen .startCardFan .startFanCard,
#homeScreen .startCardFan.dealAgain .startFanCard{
  animation:none!important;
  transition:none!important;
  opacity:1!important;
  will-change:auto!important;
}
/* Owner mode is intentionally browser-local and invisible to ordinary visitors. */
html.sayword-owner-mode #ownerSignInBtn{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}


/* Final 14.9.22 — word-only celebration + unmistakable private owner access. */
#celebrationOverlay .celebrationBurst,#celebrationOverlay .celebrationParticles{display:none!important;}
#celebrationOverlay .celebrationHint{display:none!important;}
#celebrationOverlay .celebrationWord{display:block!important;}
html.sayword-owner-mode #ownerSignInBtn{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;background:#f7b52d!important;color:#071425!important;border-color:#f7b52d!important;padding:11px 24px!important;position:relative!important;z-index:50!important;}

/* 14.9.26 — stable results shell: only the completed-word list scrolls. */
#dailyEndPanel .dailyEndCard{display:flex!important;flex-direction:column!important;overflow:hidden!important;max-height:min(94dvh,900px)!important;min-height:0!important;}
#dailyEndPanel .dailyEndLogo,#dailyEndPanel #dailyEndTitle,#dailyEndPanel #dailyEndDots,#dailyEndPanel .dailyEndTime,#dailyEndPanel .dailyPrimaryActions,#dailyEndPanel .dailyExitActions{flex:0 0 auto!important;}
#dailyEndPanel .dailyInlineSlices{display:flex!important;flex-direction:column!important;min-height:0!important;flex:1 1 auto!important;overflow:hidden!important;}
#dailyEndPanel #dailyEndReviewList{min-height:0!important;max-height:none!important;flex:1 1 auto!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch;}
#dailyEndPanel .dailyEndTime[hidden]{display:none!important;}
#dailyEndPanel .dailyEndTime{display:flex;flex-direction:column;align-items:center;gap:1px;margin:0 auto 10px;text-align:center;}
#dailyEndPanel .dailyEndTime span{font-size:11px;letter-spacing:.13em;color:#b9cbe0;font-weight:800;}
#dailyEndPanel .dailyEndTime strong{font-size:clamp(23px,5vw,34px);line-height:1.15;color:#fff;font-variant-numeric:tabular-nums;}
#gameTimer{display:none!important;} /* Timing is measured quietly; shown at Daily completion only. */
#completionPanel .resultTierBanner,#lossPanel .resultTierBanner{margin-bottom:0!important;}
#completionPanel .bonusTitle,#lossPanel .lossTitle{margin-top:0!important;}
@media(max-width:680px){#dailyEndPanel .dailyEndCard{max-height:96dvh!important;}}

/* 14.9.27 — Keep Slicing promotional preview; registration remains disabled. */
.sliceComingSoonOverlay[hidden]{display:none!important}
.sliceComingSoonOverlay{position:fixed;inset:0;z-index:1800;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:rgba(3,9,22,.92);backdrop-filter:blur(9px);overflow-y:auto}
.sliceComingSoonCard{position:relative;width:min(100%,450px);max-height:calc(100dvh - 32px);overflow-y:auto;background:linear-gradient(155deg,#1a3452,#0e1a30 65%);border:2px solid #b99a61;border-radius:22px;padding:clamp(22px,5vw,34px);box-shadow:0 16px 65px rgba(0,0,0,.65);color:#f5f7fc;text-align:center}
.sliceComingSoonClose{position:absolute;top:10px;right:14px;border:0;background:transparent;color:#d8e5f5;font-size:29px;line-height:1;cursor:pointer;padding:7px}
.sliceComingSoonKicker{font-size:11px;font-weight:900;letter-spacing:.17em;color:#f2c878;margin:4px 0 12px}
.sliceComingSoonCard h2{font-size:clamp(25px,6vw,35px);margin:0 0 8px;color:#fff;letter-spacing:.025em}
.sliceComingSoonLead{color:#d2e1f1;font-size:15px;margin:0 0 22px}
.sliceComingSoonFeatures{text-align:left;border-top:1px solid rgba(202,222,242,.22);padding-top:10px;margin-bottom:22px}
.sliceComingSoonFeatures>div{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-bottom:1px solid rgba(202,222,242,.16)}
.sliceComingSoonFeatures strong{font-size:13px;letter-spacing:.06em;color:#f3c46e}
.sliceComingSoonFeatures span{font-size:13px;line-height:1.4;color:#d3e0ef}
.sliceComingSoonGotIt{width:100%;border:0;border-radius:999px;background:#f1bb4e;color:#142239;font-size:15px;font-weight:900;padding:13px 18px;cursor:pointer}
.sliceComingSoonGotIt:focus-visible,.sliceComingSoonClose:focus-visible{outline:3px solid #9bceff;outline-offset:3px}


/* 14.9.38 — Daily results use one natural page scroll; YOUR SLICES no longer nests a scrollbar. */
#dailyEndPanel{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  align-items:flex-start!important;
}
#dailyEndPanel .dailyEndCard{
  flex:0 0 auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow:visible!important;
  margin:auto!important;
}
#dailyEndPanel .dailyInlineSlices{
  flex:0 0 auto!important;
  min-height:0!important;
  overflow:visible!important;
}
#dailyEndPanel #dailyEndReviewList{
  flex:0 0 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding-right:0!important;
}
@media(max-width:680px){
  #dailyEndPanel .dailyEndCard{max-height:none!important;}
}


/* 14.9.39 — Daily Slice Practice has no exit X.
   Explicit display rule prevents any later button styling from overriding hidden. */
#exitBtn[hidden],
body.daily-practice-active #exitBtn{
  display:none!important;
}


/* 14.9.41 — Keep Slicing preview must sit above Daily result/review overlays (z-index 9000). */
#sliceComingSoonPanel.sliceComingSoonOverlay{z-index:12000!important;}

/* Display accessibility: only active in LARGE mode. Normal mode retains all original sizing. */
body.slice-display-large #wordWrap{width:min(98vw,1400px);max-width:98vw}
body.slice-display-large #meanings{gap:clamp(8px,1.5vw,20px);margin-top:clamp(18px,3vh,36px)}
body.slice-display-large #meanings .meaning{font-size:clamp(17px,2.1vw,27px);padding:clamp(10px,1.5vw,20px) clamp(12px,1.8vw,24px);line-height:1.3}
body.slice-display-large #cardHolder{width:clamp(175px,17.5vw,290px);height:clamp(205px,27vh,340px)}
body.slice-display-large #card .card-face{width:clamp(134px,11.88vw,208px)!important;height:clamp(197px,17.325vw,302px)!important}
@media(max-width:620px){
 body.slice-display-large #wordWrap{width:98vw}
 body.slice-display-large #meanings .meaning{font-size:clamp(16px,3.7vw,21px);padding:10px 12px}
 body.slice-display-large #cardHolder{bottom:clamp(28px,4vh,55px)}
}

/* LARGE display: carry accessible morpheme sizing into word reward panels.
   Scoped to the display setting; NORMAL and gameplay mechanics are untouched. */
body.slice-display-large #completionPanel .resultMorpheme,
body.slice-display-large #lossPanel .resultMorpheme{
  min-height:170px!important;
  padding:clamp(20px,2.5vw,32px)!important;
  max-width:420px!important;
}
body.slice-display-large #completionPanel .resultMorphemeTitle,
body.slice-display-large #completionPanel .resultMorphemeTitle *,
body.slice-display-large #lossPanel .resultMorphemeTitle,
body.slice-display-large #lossPanel .resultMorphemeTitle *{
  font-size:clamp(27px,3vw,38px)!important;
}
body.slice-display-large #completionPanel .resultMorphemeDefinition,
body.slice-display-large #lossPanel .resultMorphemeDefinition{
  font-size:clamp(21px,2.35vw,30px)!important;
  line-height:1.3!important;
}
@media(max-width:760px){
  body.slice-display-large #completionPanel .resultMorpheme,
  body.slice-display-large #lossPanel .resultMorpheme{
    min-height:148px!important;
    padding:18px 14px!important;
  }
  body.slice-display-large #completionPanel .resultMorphemeTitle,
  body.slice-display-large #completionPanel .resultMorphemeTitle *,
  body.slice-display-large #lossPanel .resultMorphemeTitle,
  body.slice-display-large #lossPanel .resultMorphemeTitle *{
    font-size:clamp(24px,5.6vw,32px)!important;
  }
  body.slice-display-large #completionPanel .resultMorphemeDefinition,
  body.slice-display-large #lossPanel .resultMorphemeDefinition{
    font-size:clamp(19px,4.7vw,25px)!important;
  }
}

/* Audio layer: compact chips, unchanged typography */
#gameMenu .modeBtn{padding:4px 5px!important;min-height:27px!important;border-radius:7px!important;}
#gameMenu .menuLabel{font-size:11px!important;}
.audioSpeakButton{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:8;border:0;background:transparent;color:inherit;font-size:19px;min-width:40px;min-height:40px;cursor:pointer;}
.reviewSpeakButton{order:-10;flex:0 0 34px;width:34px;height:34px;border:0;background:transparent;color:inherit;font-size:18px;cursor:pointer;}
.sliceReviewRow{display:flex;align-items:center;}

/* Audio v2: anchored controls do not participate in centered word layout. */
#dailyReviewPanel .sliceReviewRow,
#dailyEndPanel .sliceReviewRow{
  position:relative;
  padding-left:55px!important;
  padding-right:55px!important;
  box-sizing:border-box;
}
#dailyReviewPanel .reviewSpeakButton,
#dailyEndPanel .reviewSpeakButton{
  position:absolute!important;
  left:8px;top:50%;transform:translateY(-50%);
  margin:0!important;flex:none!important;
  width:38px;height:38px;display:grid;place-items:center;
  z-index:2;
}
#dailyReviewPanel .wordFavoriteHeart,
#dailyEndPanel .wordFavoriteHeart{
  position:absolute!important;right:8px;top:50%;transform:translateY(-50%);
  margin:0!important;z-index:2;
}
@media(max-width:520px){
  #dailyReviewPanel .sliceReviewRow,#dailyEndPanel .sliceReviewRow{padding-left:45px!important;padding-right:45px!important;}
  #dailyReviewPanel .reviewSpeakButton,#dailyEndPanel .reviewSpeakButton{left:3px;}
  #dailyReviewPanel .wordFavoriteHeart,#dailyEndPanel .wordFavoriteHeart{right:3px;}
}


/* Audio v3 — one continuous SAYWORD! court environment.
   Use the same existing gilded artwork as the welcome screen. */
.app,
#entryFlow.show,
body.home-screen-active #entryFlow.show,
body.entry-active:has(#homeScreen:not([hidden])) #entryFlow.show{
  background-image:linear-gradient(rgba(3,12,26,.22),rgba(3,12,26,.40)),url("../assets/title-screen-background-14922.png")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
/* Full-screen results/review panels must not replace the court with flat navy. */
#dailyEndPanel.resultOverlay,
#dailyReviewPanel.resultOverlay,
#trainingEndPanel.resultOverlay{
  background:linear-gradient(rgba(3,12,26,.70),rgba(3,12,26,.82)),url("../assets/title-screen-background-14922.png") center center/cover no-repeat!important;
  backdrop-filter:none!important;
}

/* Responsive classroom sizing and listening controls — isolated presentation overrides. */
header .brand img{width:clamp(132px,15vw,230px)!important;max-height:94px!important}
@media(max-width:620px){header .brand img{width:min(33vw,145px)!important;max-height:94px!important}}
.audioSpeakButton{border:0!important;background:transparent!important;padding:0!important;width:52px;height:52px;display:grid;place-items:center;}
.audioSpeakButton img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.reviewSpeakButton{display:grid;place-items:center;padding:0!important}
.reviewSpeakButton img{display:block;width:34px;height:34px;object-fit:contain;pointer-events:none}
body.slice-display-large .audioSpeakButton{width:64px;height:64px}
body.slice-display-xl .audioSpeakButton{width:82px;height:82px}
body.slice-display-xl #wordWrap{width:min(98vw,1800px);max-width:98vw}
body.slice-display-xl #meanings{gap:clamp(10px,1.6vw,26px)}
body.slice-display-xl #meanings .meaning{font-size:clamp(20px,3.15vw,40px);padding:clamp(12px,1.8vw,26px) clamp(15px,2vw,32px);line-height:1.3}
body.slice-display-xl #cardHolder{width:clamp(220px,26.25vw,435px);height:clamp(260px,40.5vh,510px)}
body.slice-display-xl #card .card-face{width:clamp(175px,17.82vw,312px)!important;height:clamp(255px,25.99vw,453px)!important}
/* The progress indicator occupies a dedicated strip above the word. */
#arena #dailyProgress:not(.hidden){top:8px!important}
#arena:has(#dailyProgress:not(.hidden)) #wordWrap{top:clamp(58px,12%,104px)!important;transform:translate(-50%,0)!important}
#arena #wordWrap{max-height:calc(100% - 175px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
#arena #meanings{align-content:start;max-width:100%;box-sizing:border-box}
#arena #meanings .meaning{max-width:min(100%,480px);box-sizing:border-box;overflow-wrap:anywhere}
@media(max-width:700px){
 #arena:has(#dailyProgress:not(.hidden)) #wordWrap{top:clamp(60px,13%,95px)!important}
 #arena #wordWrap{max-height:calc(100% - 205px)}
 #arena #meanings{gap:6px;margin-top:12px}
 #arena #meanings .meaning{font-size:clamp(12px,3.2vw,17px);padding:7px 9px;max-width:calc(50% - 4px);line-height:1.2}
 body.slice-display-xl #meanings .meaning{font-size:clamp(13px,3.7vw,20px);padding:8px 10px}
 body.slice-display-xl #cardHolder{width:clamp(175px,36vw,260px);height:clamp(205px,27vh,340px)}
 body.slice-display-xl #card .card-face{width:clamp(134px,24vw,208px)!important;height:clamp(197px,35vw,302px)!important}
}
@media(orientation:landscape) and (max-height:750px) and (min-width:700px){
 header{min-height:96px!important;height:96px!important}
 header .brand img{max-height:74px!important;width:clamp(120px,14vw,170px)!important}
 #arena:has(#dailyProgress:not(.hidden)) #wordWrap{top:45px!important}
 #arena #wordWrap{max-height:calc(100% - 135px)}
 #arena #meanings{margin-top:8px!important;gap:6px!important}
 #arena #meanings .meaning{font-size:clamp(12px,1.4vw,19px)!important;padding:6px 9px!important;line-height:1.18}
 body.slice-display-xl #cardHolder{height:min(35vh,270px);width:min(22vw,220px)}
 body.slice-display-xl #card .card-face{width:min(14vw,175px)!important;height:min(20.5vw,255px)!important}
}

/* Chromebook / short landscape viewport: scale the ENTIRE per-word reward
   composition together (crest, frame, copy, tiles and actions). This is
   intentionally limited to the completion/loss overlays; gameplay and
   phone/portrait reward layouts are unchanged. */
@media (orientation:landscape) and (min-width:700px) and (max-height:800px){
  #completionPanel .resultCardFrame,
  #lossPanel .resultCardFrame{
    zoom:.75;
    flex:0 0 auto;
    margin:auto!important;
  }
  #completionPanel .resultCard,
  #lossPanel .resultCard{
    /* Reserve room for the banner and ensure the action stays reachable. */
    max-height:calc((100dvh - 36px)/.75 - clamp(74px,10vw,126px))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  #completionPanel,
  #lossPanel{
    align-items:safe center!important;
    justify-content:safe center!important;
  }
}