/* Game skin for the learner and parent app (UI redesign v1, 2026-10-31: DESIGN-HANDOFF.fa.md, components.json,
   ui-skin-tokens.css; art from Adrian-Life-UI-Skin-Art through adi-skin.css). Loaded after adi-ui.css.
   body.adi-ui.game  — the shell on every page: indigo scene backdrop, nav dock and HUD.
   body.adi-ui.gv    — game pages and their modals. Most pages are one ivory window (#app.g-page); home is the lobby
                     (#app.g-lobby-page); competition, clan and shop draw their own scene (#app.g-scene-page).
   Depth has three levels only: the scene, a window (framed ivory), and plain content inside it. Gold marks the main
   edge, selection, achievement and value; text and numbers always stay in the DOM. */
body.adi-ui.game{ background:var(--g-indigo-deep);color:var(--g-ink)}
body.adi-ui.game::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(circle at 50% -10%,#24b8c333,transparent 55%),linear-gradient(180deg,#10284fe6,#173b73d9 45%,#10284ff2),var(--g-scene,none) center/cover no-repeat}

body.adi-ui.game .main{max-width:1480px}

/* ---------- GameNav: the dock on the right; a bottom bar on phones ---------- */
body.adi-ui.game #sidebar{background:transparent;box-shadow:none;padding:12px 4px}
body.adi-ui.game #sidebar .adi-tabs{box-sizing:border-box;width:94px;margin:0 auto;padding:6px 8px;border-style:solid;border-width:52px 0;border-image-source:var(--skin-nav-dock);border-image-slice:var(--skin-nav-dock-slice);border-image-repeat:stretch;gap:6px}
body.adi-ui.game #sidebar .adi-tab{background:transparent;color:var(--g-accent-soft);border:0;min-height:74px;border-radius:16px;text-shadow:0 1px 2px #0008}
body.adi-ui.game #sidebar .adi-tab:hover{background:#ffffff1a}
body.adi-ui.game #sidebar .adi-tab.active{background:radial-gradient(circle at 50% 38%,var(--g-turq-hi) 0,var(--g-turq) 38%,var(--g-blue-edge) 78%);color:var(--g-content);box-shadow:0 0 0 2px var(--g-gold),0 0 16px #24b8c3aa}
body.adi-ui.game #sidebar .adi-tab img{filter:drop-shadow(0 2px 3px #0006)}

/* ---------- GameHUD: avatar,level,XP and coins on the HUD skin; icon sockets ---------- */
body.adi-ui.game .adi-avatar{border:3px solid var(--g-gold);box-shadow:0 0 0 3px var(--g-indigo-deep),0 6px 14px #0006;background:var(--g-accent-soft)}
body.adi-ui.game .adi-pill{box-sizing:border-box;border-style:solid;border-width:0 32px;border-image-source:var(--skin-hud);border-image-slice:var(--skin-hud-slice);background:transparent;box-shadow:none;color:var(--g-content)}



body.adi-ui.game .adi-pill{min-height:44px;padding:0 4px;gap:6px}
body.adi-ui.game .adi-pill b{color:var(--g-content);text-shadow:0 1px 2px #0009}
body.adi-ui.game .adi-shield{background:linear-gradient(180deg,var(--g-blue-hi),var(--g-blue-edge));border:2px solid var(--g-gold);color:var(--g-content)}

body.adi-ui.game .adi-review{color:var(--g-content)}
body.adi-ui.game .adi-child,body.adi-ui.game .adi-child-name{color:var(--g-content)}
body.adi-ui.game .adi-child{background:var(--g-indigo-deep);border-color:var(--g-gold)}
body.adi-ui.game .adi-foot:empty{display:none}

/* ---------- BeveledButton (green: main action,blue: second,purple: a collection,quiet: leave) ---------- */
.g-btn,body.adi-ui.gv .btn,body.auth-mode .btn{--b:var(--g-blue);--b-hi:var(--g-blue-hi);--b-edge:var(--g-blue-edge);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 20px;border:1px solid #ffffff55;border-radius:16px;
 background:linear-gradient(180deg,var(--b-hi),var(--b));box-shadow:0 4px 0 var(--b-edge),inset 0 2px 0 #ffffff40;color:var(--g-content);font:inherit;font-weight:800;text-shadow:0 1px 1px #0005;cursor:pointer;transition:transform .12s,box-shadow .12s;text-decoration:none}
.g-btn:active:not(:disabled),body.adi-ui.gv .btn:active:not(:disabled),body.auth-mode .btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--b-edge),inset 0 2px 0 #ffffff30}
.g-btn.green,body.adi-ui.gv .btn.green,body.auth-mode .btn.green{--b:var(--g-green);--b-hi:var(--g-green-hi);--b-edge:var(--g-green-edge)}
.g-btn.purple{--b:var(--g-purple);--b-hi:#8b6bd0;--b-edge:var(--g-purple-edge)}
.g-btn.quiet,body.adi-ui.gv .btn.red{--b:var(--g-maroon);--b-hi:#9a4252;--b-edge:var(--g-maroon-edge)}
body.adi-ui.gv .btn.secondary,body.auth-mode .btn.secondary{--b:var(--g-amber-bg);--b-hi:var(--g-content);--b-edge:#d9bf8c;color:var(--g-blue-edge);text-shadow:none;border-color:var(--g-frame)}
.g-btn.wide,body.adi-ui.gv .btn.full,body.auth-mode .btn.full{width:100%;min-height:56px;font-size:18px}
body.adi-ui.gv .btn.small{min-height:40px;padding:6px 14px;font-size:14px;border-radius:12px}
.g-btn:disabled,body.adi-ui.gv .btn:disabled,body.adi-ui.gv .btn[disabled],body.auth-mode .btn:disabled{background:var(--g-disabled);color:var(--g-disabled-ink);box-shadow:0 3px 0 #8996a7;text-shadow:none;cursor:not-allowed;opacity:1}
body.adi-ui.gv .link,body.adi-ui.gv .mini{color:var(--g-blue-edge);font-weight:700}
.g-link{border:0;background:none;padding:6px 2px;color:var(--g-blue-edge);font:inherit;font-weight:700;cursor:pointer;min-height:36px}

/* ---------- GameWindow: every game page is one framed ivory window with a ribbon title ---------- */
.g-window,body.adi-ui.gv #app.g-page,body.auth-mode .account-gate{position:relative;isolation:isolate;box-sizing:border-box;border-style:solid;border-width:30px;border-image-source:var(--skin-window);border-image-slice:var(--skin-window-slice);border-image-width:44px;border-image-outset:8px;border-image-repeat:stretch}
.g-window::before,body.adi-ui.gv #app.g-page::before,body.auth-mode .account-gate::before{content:"";position:absolute;inset:-10px;z-index:-1;border-radius:20px;background:var(--g-content);pointer-events:none}
body.adi-ui.gv #app.g-page{margin:46px 0 24px;padding:26px clamp(8px,2.4vw,34px) 20px;min-height:calc(100vh - 220px)}
.g-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin:-126px 0 12px}
.g-ribbon{box-sizing:border-box;display:grid;place-items:center;width:min(460px,96%);aspect-ratio:var(--skin-ribbon-ratio);margin:0 auto;padding:0 0 .35em;background:var(--skin-ribbon) center/contain no-repeat;
 color:var(--g-content);font-size:clamp(19px,2.3vw,27px);font-weight:900;line-height:1.15;text-shadow:0 2px 0 var(--g-navy-ink),0 0 8px #0006;filter:drop-shadow(0 6px 8px #0005)}
.g-ribbon span{display:block;max-width:60%;overflow-wrap:break-word}
.g-sub,.g-head p{margin:0 auto;max-width:640px;color:var(--g-muted);font-size:15px;line-height:1.8}
.g-window>.g-ribbon{margin:-74px auto 6px}
/* Inside a window,content is flat: no card-in-card. Sections read as quiet bands on the ivory. */
body.adi-ui.gv #app.g-page .card,body.adi-ui.gv #app.g-page .mission,body.adi-ui.gv #app.g-page .daily-checklist,body.adi-ui.gv #app.g-page .tiles>.card{background:var(--g-content);border:1px solid var(--g-line);border-radius:var(--g-radius-s);box-shadow:none}
body.adi-ui.gv #app.g-page .section-head,body.adi-ui.gv #app.g-page h3.section-head{color:var(--g-indigo);border:0;margin-top:22px}
body.adi-ui.gv #app.g-page .notice{border-radius:var(--g-radius-s)}

/* ---------- R01 lobby ---------- */
body.adi-ui.game #app.g-lobby-page{padding:0}


/* Ground glow lies on the platform (above it,under the hero); particles swirl behind the hero. */



.g-stamp{flex-shrink:0;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4fd27a,#1d7c3e);color:var(--g-content);font-weight:900;box-shadow:0 0 0 3px var(--g-content),0 0 0 5px #3aa35f}
.g-state,.g-tag{flex-shrink:0;font-size:12px;font-weight:800;padding:3px 8px;border-radius:99px}
.g-state.amber{background:var(--g-amber-bg);color:var(--g-amber)}
.g-state.red{background:var(--g-bad-bg);color:var(--g-bad)}
.g-tag{background:var(--g-accent-soft);color:var(--g-blue-edge)}

.g-done{margin:0;color:var(--g-good);font-weight:800}
.g-empty{margin:6px 0;color:var(--g-muted);line-height:1.9}

/* ProgressMeter: a fill plus the number in words; loading never shows as 0. */
.g-meter{position:relative;height:26px;border-radius:99px;background:var(--g-meter-track);box-shadow:inset 0 2px 3px #0002;overflow:hidden}
.g-meter i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,#2fa05a,#5fd07f);min-width:0}
.g-meter b{position:relative;display:block;text-align:center;font-size:13px;line-height:26px;color:var(--g-ink)}

/* ---------- BookTile on the library shelf ---------- */
/* The shelf is one three-slice edge under the row (caps fixed,middle stretched); books stand on its top surface. */
.g-shelf{position:relative;display:flex;gap:clamp(10px,2vw,28px);align-items:flex-end;justify-content:center;overflow-x:auto;padding:10px 44px 27px;scrollbar-width:thin}
.g-shelf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;box-sizing:border-box;border-style:solid;border-width:0 46px;border-image-source:var(--skin-library-shelf);border-image-slice:var(--skin-library-shelf-slice);border-image-repeat:stretch;pointer-events:none}
.g-shelf>*{position:relative;z-index:1;flex:0 0 auto}
.g-book{display:flex;flex-direction:column;align-items:center;width:clamp(84px,9vw,116px);padding:0;border:0;background:none;font:inherit;cursor:pointer;transition:transform .12s}
.g-book:hover{transform:translateY(-3px)}
.g-book.on .g-cover{outline:4px solid var(--g-gold);outline-offset:2px}
.g-cover{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;aspect-ratio:var(--skin-book-cover-ratio);padding:15% 12% 0 18%;box-sizing:border-box;background:var(--skin-book-cover) center/contain no-repeat;filter:drop-shadow(0 6px 6px #0006);border-radius:8px}
.g-cover b{font-size:clamp(13px,1.2vw,16px);font-weight:900;color:var(--g-blue-edge);line-height:1.2;min-height:2.4em;display:grid;place-items:center;text-align:center}
.g-cover.subjects-science b{color:var(--g-good)}.g-cover.subjects-farsi b{color:#a5323f}
.g-cover img{width:68%;height:auto;margin-top:4%}
/* Coverage sits on the cover's foot,so the book itself stands on the shelf's top surface. */
.g-book-meter{position:absolute;left:14%;right:10%;bottom:8%;height:14px;border-radius:99px;background:#10284fd9;border:1px solid var(--g-gold);overflow:hidden}
.g-book-meter i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#2fa05a,#5fd07f)}
.g-book-meter small{position:relative;display:block;text-align:center;color:var(--g-content);font-size:10px;line-height:12px;font-weight:800}

body.adi-ui.game #sidebar .adi-tab span{color:inherit}

@media (max-width:767px){
 body.adi-ui.game #sidebar{background:linear-gradient(180deg,#1d4686,var(--g-indigo-deep))!important;height:auto!important;border-top:3px solid var(--g-gold);box-shadow:0 -8px 22px #0007;padding:4px 6px max(6px,env(safe-area-inset-bottom))}
 body.adi-ui.game #sidebar .adi-tabs{width:100%;border:0;padding:0}
 body.adi-ui.game #sidebar .adi-tab{min-height:62px}
 body.adi-ui.game .adi-pill{border-width:0 18px}
 
 body.adi-ui.game .adi-pill{min-height:38px}

}

/* ---------- Modal as a GameWindow: ribbon on the frame,close socket,one scrolling body ---------- */
body.adi-ui.gv .modal-wrap{background:#081833b3;backdrop-filter:blur(4px)}
body.adi-ui.gv .modal{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:visible;width:min(640px,100%);max-height:calc(100dvh - 40px);padding:6px 4px 4px;background:transparent;border-radius:0;box-shadow:none;
 border-style:solid;border-width:30px;border-image-source:var(--skin-window);border-image-slice:var(--skin-window-slice);border-image-width:44px;border-image-outset:8px;color:var(--g-ink)}
body.adi-ui.gv .modal::before{content:"";position:absolute;inset:-10px;z-index:-1;border-radius:20px;background:var(--g-content);box-shadow:0 30px 80px #000a}
body.adi-ui.gv .modal>.g-ribbon{flex-shrink:0;margin:-78px auto 0;width:min(400px,92%)}
body.adi-ui.gv .modal-body{overflow:auto;min-height:0;padding:6px 10px 8px;overscroll-behavior:contain}
body.adi-ui.gv .modal .close{position:absolute;top:-22px;left:-22px;z-index:2;float:none;margin:0;width:44px;height:44px;border-radius:50%;border:3px solid var(--g-gold);background:linear-gradient(180deg,var(--g-blue-hi),var(--g-blue-edge));color:var(--g-content);font-size:24px;line-height:1;box-shadow:0 3px 0 var(--g-navy-ink);cursor:pointer}
body.adi-ui.gv .modal h2{color:var(--g-indigo)}
@media (max-width:767px){body.adi-ui.gv .modal-wrap{padding:30px 8px 8px;align-items:end}body.adi-ui.gv .modal{border-width:22px;border-image-width:34px;max-height:calc(100dvh - 36px)}body.adi-ui.gv .modal .close{top:-16px;left:-14px}body.adi-ui.gv .modal>.g-ribbon{margin-top:-62px}}

/* ---------- R02 menu ---------- */
.g-menu-head{display:flex;align-items:center;gap:12px;padding:6px 4px 12px;border-bottom:1px solid var(--g-line);margin-bottom:12px}
.g-portrait{flex-shrink:0;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;overflow:hidden;border:3px solid var(--g-gold);background:var(--g-accent-soft);font-size:28px;font-weight:900;color:var(--g-indigo)}
.g-portrait img{width:100%;height:100%;object-fit:contain}
.g-menu-head>div{flex:1;min-width:0;display:flex;flex-direction:column}
.g-menu-head b{font-size:19px;color:var(--g-indigo)}.g-menu-head small{color:var(--g-muted)}
.g-level-chip{display:flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--g-line);border-radius:14px;background:var(--g-content);font:inherit;cursor:pointer;color:var(--g-ink)}
body.adi-ui .g-level-chip .adi-shield{position:static;flex-shrink:0;width:34px;height:38px;font-size:15px;margin:0}
.g-level-chip span:last-child{display:flex;flex-direction:column;text-align:start}.g-level-chip small{font-size:11px;color:var(--g-muted)}.g-level-chip b{font-size:13px}
.g-menu,.g-add-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.g-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:104px;padding:10px 6px;border:2px solid #f0e2c4;border-radius:18px;background:linear-gradient(180deg,var(--g-content),var(--g-amber-bg));box-shadow:0 4px 0 var(--g-frame);font:inherit;font-weight:800;color:var(--g-indigo);text-align:center;line-height:1.35;cursor:pointer}
.g-tile:active{transform:translateY(2px);box-shadow:0 2px 0 var(--g-frame)}
.g-tile img{width:52px;height:52px;object-fit:contain}
.g-tile small{font-weight:500;color:var(--g-muted);font-size:12px}
.g-tile .adi-badge{position:absolute;top:6px;left:6px}
.g-logout{display:flex;margin:16px auto 4px;min-width:180px}
@media (max-width:420px){.g-menu-head{flex-wrap:wrap}.g-tile{min-height:94px;font-size:14px}}

/* ---------- R03 gallery: stage ~40%,roster ~60% ---------- */
.g-gallery{display:grid;grid-template-columns:1fr minmax(260px,40%);gap:18px;align-items:start}
.g-preview{order:2;position:sticky;top:12px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border-radius:20px;background:radial-gradient(circle at 50% 30%,var(--g-accent-soft),#cfe6fa 70%);border:2px solid var(--g-gold);text-align:center}
.g-preview-stage{position:relative;width:100%;height:clamp(300px,46vh,420px)}
.g-preview-plat{position:absolute;left:50%;top:82%;width:78%;height:auto}
.g-preview-hero{position:absolute;left:50%;top:84%;height:82%;width:auto;filter:drop-shadow(0 10px 10px #0b2d5733)}
.g-preview h2{margin:4px 0 0;color:var(--g-indigo)}
.g-col-name{color:var(--g-muted)}
.g-chosen{margin:6px 0;color:var(--g-good);font-weight:900}
.g-lock{margin:6px 0 0;color:var(--g-purple-edge);font-weight:800}
.g-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.g-chip{min-height:40px;padding:6px 14px;border:2px solid var(--g-frame);border-radius:99px;background:var(--g-content);font:inherit;font-weight:800;color:var(--g-indigo);cursor:pointer}

.g-chip small{opacity:.8}
.g-roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.g-hero-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 10px;border:2px solid var(--g-line);border-radius:18px;background:var(--g-content);font:inherit;color:var(--g-ink);cursor:pointer;text-align:center}
.g-hero-card.previewed{border-color:var(--g-turq);box-shadow:0 0 0 3px #24b8c355}
.g-hero-card.on{border-color:var(--g-gold);box-shadow:0 0 0 3px #e9b24c66;background:var(--g-paper)}
.g-hero-face{position:relative;display:block;width:84px;height:84px;border-radius:50%;overflow:hidden;background:linear-gradient(180deg,var(--g-accent-soft),#bfdcf5);border:2px solid var(--g-content);box-shadow:0 2px 6px #0003}
.g-hero-face img{width:100%;height:100%;object-fit:contain}
.g-hero-card.locked .g-hero-face img{filter:saturate(.55) brightness(.92)}
.g-hero-mark,.g-hero-lock{position:absolute;bottom:2px;left:2px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;font-size:13px;border:2px solid var(--g-content)}
.g-hero-mark{background:var(--g-green);color:var(--g-content);font-weight:900}
.g-hero-lock{background:var(--g-purple-edge);color:var(--g-content)}
.g-hero-card b{font-size:13px;line-height:1.35}
.g-hero-card small{display:flex;align-items:center;gap:3px;font-weight:800;color:var(--g-amber)}
.g-hero-card small img{width:16px;height:16px}
@media (max-width:860px){.g-gallery{grid-template-columns:1fr}.g-preview{position:static}.g-preview-stage{height:clamp(240px,38vh,320px)}.g-roster-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}.g-hero-face{width:72px;height:72px}}

/* ---------- R04 library: shelves and the open book drawer ---------- */
.g-shelf-title{margin:18px 0 4px;color:var(--g-indigo)}.g-shelf-title small{color:var(--g-good);font-size:13px}
.g-drawer{display:grid;grid-template-columns:minmax(220px,32%) 1fr;margin:6px 0 18px;border:2px solid #d9bf8c;border-radius:18px;background:var(--g-content);box-shadow:0 10px 24px #6b4b1426;overflow:hidden}
.g-drawer-side{display:flex;flex-direction:column;gap:10px;padding:18px;background:#fbf2de;border-inline-end:6px double #d9bf8c}
.g-drawer-side h2{margin:0;color:var(--g-indigo)}.g-drawer-side small{color:var(--g-muted);line-height:1.8}
.g-drawer-pages{padding:14px 18px}
.g-drawer-pages details.chapter{border:1px solid var(--g-line);border-radius:12px;background:var(--g-content);margin-bottom:8px}
.g-drawer-pages details.chapter>summary{padding:12px 14px;font-weight:800;color:var(--g-indigo);cursor:pointer;min-height:44px;box-sizing:border-box}
@media (max-width:767px){.g-drawer{grid-template-columns:1fr}.g-drawer-side{border-inline-end:0;border-bottom:6px double #d9bf8c}.g-drawer-pages{padding:10px}}

/* ---------- R05 streak: seven sockets ---------- */
body.adi-ui.gv .modal.g-streak-modal{width:min(820px,100%)}
.g-streak-head{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.g-streak-head b{font-size:40px;color:var(--g-purple);line-height:1}.g-streak-head span{font-weight:800}.g-streak-head small{flex-basis:100%;text-align:center;color:var(--g-muted)}
.g-sockets{list-style:none;margin:30px 0 14px;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end}
.g-socket{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:130px;box-sizing:border-box;padding:4px 4px 2px;color:var(--g-content);text-align:center;
 border-style:solid;border-width:34px 0 20px;border-image-source:var(--skin-streak-socket);border-image-slice:var(--skin-streak-socket-slice);border-image-repeat:stretch}
.g-socket-day{position:absolute;top:-54px;font-size:12px;font-weight:900;color:var(--g-indigo)}
.g-socket img{width:46px;height:46px;object-fit:contain}
.g-socket b{font-size:16px}.g-socket small{font-size:11px}
.g-socket.earned{border-image-source:none;border-color:transparent;background:linear-gradient(180deg,#2fa05a,#1b6a37) padding-box;border-radius:16px;box-shadow:0 0 0 3px var(--g-good-line)}
.g-socket.current{filter:drop-shadow(0 0 10px var(--g-turq-hi))}
.g-socket.future{opacity:.62}
.g-socket.last{min-height:150px}
.g-socket-mark{position:absolute;top:-30px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--g-green);border:2px solid var(--g-content);font-style:normal;font-weight:900;font-size:13px}
.g-rules{margin-top:10px;color:var(--g-muted)}.g-rules summary{cursor:pointer;font-weight:800;color:var(--g-blue-edge);min-height:36px}
@media (max-width:767px){.g-sockets{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:60px}.g-socket{min-height:116px}}

/* ---------- R12 level ---------- */
.g-level{display:flex;align-items:center;gap:20px;margin:8px 0 16px}
.g-shield-big{position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:136px;clip-path:polygon(50% 0,100% 14%,100% 62%,50% 100%,0 62%,0 14%);background:linear-gradient(180deg,var(--g-blue-hi),var(--g-blue-edge));color:var(--g-content);box-shadow:inset 0 0 0 5px var(--g-gold)}
.g-shield-big b{font-size:52px;line-height:1}.g-shield-big small{font-weight:800}
.g-shield-big i{position:absolute;top:6px;font-style:normal;font-size:20px}
.g-level-copy{flex:1;display:flex;flex-direction:column;gap:6px}.g-level-copy h2{margin:0}.g-level-copy p{margin:0}.g-level-copy small{color:var(--g-muted)}
.g-level.up .g-shield-big{animation:g-pop .8s ease-out}
@keyframes g-pop{0%{transform:scale(.6)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@media (max-width:480px){.g-level{flex-direction:column;text-align:center}}

/* ---------- R13 result ---------- */
body.adi-ui.gv .modal.g-result-modal{width:min(820px,100%)}
.g-result{display:flex;gap:16px;align-items:flex-end}
.g-result-hero{flex-shrink:0;width:min(30%,220px)}.g-result-hero img{width:100%;height:auto;display:block}
.g-result-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.g-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.g-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:96px;padding:8px;border:2px solid var(--g-line);border-radius:16px;background:var(--g-content);text-align:center}
.g-stat b{font-size:22px;color:var(--g-indigo)}.g-stat small{color:var(--g-muted)}
.g-stat.gold{border-color:var(--g-gold);background:var(--g-ivory)}.g-stat img{width:34px;height:34px}
.g-note{margin:0;padding:8px 12px;border-radius:12px;background:var(--g-accent-soft);color:var(--g-blue-edge);font-size:14px}
.g-review{margin-top:14px;border-top:1px solid var(--g-line);padding-top:8px}.g-review>summary{cursor:pointer;font-weight:800;color:var(--g-blue-edge);min-height:44px;display:flex;align-items:center}
@media (max-width:640px){.g-result-hero{display:none}.g-stat b{font-size:18px}}

/* ---------- R06/R07 focus session ---------- */
body.adi-ui.gv .g-focus-wrap{background:#081833e0}
body.adi-ui.gv .modal.g-focus{width:min(860px,100%);border-image-source:var(--skin-focus-frame);border-image-slice:var(--skin-focus-frame-slice);border-image-width:34px;border-width:26px}
body.adi-ui.gv .modal.g-focus::before{background:var(--g-ivory)}
body.adi-ui.gv .modal.g-focus>.close{display:none}
.g-focus-head{display:flex;align-items:center;gap:10px;margin:2px 0 8px}
.g-close{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:3px solid var(--g-gold);background:var(--g-content);color:var(--g-maroon);font-size:24px;line-height:1;cursor:pointer}
.g-qbar{flex:1;height:14px;border-radius:99px;background:var(--g-meter-track);overflow:hidden}.g-qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--g-turq),var(--g-turq-hi))}
.g-count{flex-shrink:0;padding:4px 12px;border-radius:99px;background:var(--g-content);border:1px solid var(--g-line);font-weight:800}
.g-q-meta{margin:0;color:var(--g-muted);font-size:14px}
.g-q-text{font-size:clamp(20px,2.4vw,25px);line-height:1.7;margin:8px 0 12px;color:var(--g-ink)}
body.adi-ui.gv .g-focus .options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.adi-ui.gv .g-focus .option{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;padding:10px 46px;border:2px solid var(--g-line);border-radius:16px;background:linear-gradient(180deg,var(--g-content),var(--g-amber-bg));box-shadow:0 4px 0 #dcc28c;font:inherit;font-size:19px;font-weight:800;color:var(--g-ink);cursor:pointer;text-align:center}
body.adi-ui.gv .g-focus .option:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #dcc28c}
body.adi-ui.gv .g-focus .option:disabled{cursor:default;opacity:1}
body.adi-ui.gv .g-focus .option.selected{background:linear-gradient(180deg,#4cc06c,var(--g-green));border-color:#1d7c3e;box-shadow:0 4px 0 var(--g-green-edge);color:var(--g-content)}
body.adi-ui.gv .g-focus .option.incorrect{background:linear-gradient(180deg,var(--g-bad-bg),#f6c2c9);border-color:#d27a86;box-shadow:0 4px 0 #b9606d;color:#7a1f2c}
body.adi-ui.gv .g-focus .option.selected::after,body.adi-ui.gv .g-focus .option.incorrect::after{position:absolute;left:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--g-content);font-weight:900;font-size:16px}
body.adi-ui.gv .g-focus .option.selected::after{content:"✓";color:var(--g-good)}body.adi-ui.gv .g-focus .option.incorrect::after{content:"✕";color:var(--g-bad)}
.g-focus .formula{direction:ltr;unicode-bidi:isolate;text-align:center}
.g-feedback{margin:12px 0 4px;padding:10px 12px;border-radius:14px;border:2px solid transparent}
.g-feedback.good{background:var(--g-good-bg);border-color:var(--g-good-line)}.g-feedback.bad{background:var(--g-bad-bg);border-color:var(--g-bad-line)}.g-feedback.partial,.g-feedback.pending{background:var(--g-amber-bg);border-color:var(--g-amber-line)}
.g-feedback-status{margin:0;font-size:18px;font-weight:900}.g-feedback.good .g-feedback-status{color:var(--g-good)}.g-feedback.bad .g-feedback-status{color:var(--g-bad)}.g-feedback.partial .g-feedback-status,.g-feedback.pending .g-feedback-status{color:var(--g-amber)}
.g-explain>summary{cursor:pointer;font-weight:800;color:var(--g-blue-edge);min-height:40px;display:flex;align-items:center}
.g-next{margin-top:12px}
.g-q-foot{margin:10px 0 0;font-size:13px;color:var(--g-muted)}
@media (max-width:560px){body.adi-ui.gv .g-focus .options{grid-template-columns:1fr}body.adi-ui.gv .g-focus .option{min-height:56px;font-size:17px}}
@media (prefers-reduced-motion:reduce){.g-level.up .g-shield-big{animation:none}.g-btn,.g-tile,.g-book{transition:none}}

/* ---------- R14 new medal and medal details ---------- */
body.adi-ui.gv .modal.g-medal-modal{width:min(520px,100%)}
.g-newmedal{text-align:center}.g-tier{display:inline-block;margin:2px 0 6px;padding:3px 12px;border-radius:99px;background:var(--g-amber-bg);color:var(--g-amber);font-weight:800}
.g-more{margin:8px 0 12px;text-align:center}.g-mini-row{display:flex;gap:10px;justify-content:center;overflow-x:auto;padding:6px}
.g-mini-medal{display:flex;flex-direction:column;align-items:center;width:84px;font-size:12px}

/* ---------- R09 plan book ---------- */
.g-planbook{box-sizing:border-box;padding:4px 8px 8px 12px;border-style:solid;border-width:30px 26px 30px 34px;border-image-source:var(--skin-journal);border-image-slice:var(--skin-journal-slice)}
.g-days{display:flex;align-items:center;gap:6px}
.g-arrow{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:2px solid var(--g-gold);background:linear-gradient(180deg,var(--g-blue-hi),var(--g-blue-edge));color:var(--g-content);font-size:24px;font-weight:900;cursor:pointer}
.g-day-list{flex:1;display:grid;grid-template-columns:repeat(7,minmax(74px,1fr));gap:6px;overflow-x:auto;padding:8px 4px;scroll-snap-type:x mandatory}
.g-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:86px;padding:8px 4px;border:2px solid var(--g-line);border-radius:14px;background:var(--g-content);font:inherit;color:var(--g-ink);cursor:pointer;scroll-snap-align:center}
.g-day b{font-size:14px}.g-day small{font-size:12px;color:var(--g-muted)}
.g-day-state{font-size:13px;font-weight:900;color:var(--g-good)}
.g-day.today{border-color:var(--g-turq)}
.g-day.past{background:var(--g-ivory)}
.g-day.on{background:var(--g-amber-bg);border-color:var(--g-gold);box-shadow:inset 0 0 0 3px var(--g-gold)}
.g-day.on::before{content:"";position:absolute;top:-2px;left:50%;width:14px;height:18px;transform:translateX(-50%);background:var(--g-bad);clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%)}
.g-this-week{display:block;margin:2px auto 0}
.g-day-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 8px}
.g-day-head h2{margin:0;font-size:21px;color:var(--g-indigo)}.g-day-head h2 small{font-size:13px;color:var(--g-turq)}
.g-add-off{display:flex;align-items:center;gap:8px}.g-add-off small{color:var(--g-muted)}
.g-plan-rows{display:flex;flex-direction:column;gap:8px;margin-top:10px}
body.adi-ui.gv .g-planbook .daily-task{border-radius:0;background:transparent;box-shadow:none;min-height:70px;box-sizing:border-box;padding:6px;border-style:solid;border-width:0 22px;border-color:transparent;border-image-source:var(--skin-quest-row);border-image-slice:var(--skin-quest-row-slice)}
body.adi-ui.gv .g-planbook .daily-task.is-done{background:linear-gradient(var(--g-good-bg),var(--g-good-bg)) padding-box}body.adi-ui.gv .g-planbook .daily-task.is-waiting{background:linear-gradient(var(--g-pending-bg),var(--g-pending-bg)) padding-box}
.daily-task.is-waiting{background:linear-gradient(var(--g-pending-bg),var(--g-pending-bg)) padding-box}
.daily-task.is-waiting .task-check.checked{background:var(--g-pending-solid);border-color:var(--g-pending-solid);color:#4a3000}
.task-state.pending{color:var(--g-pending);font-weight:800}
body.adi-ui.gv .modal.g-add-modal{width:min(560px,100%)}.g-add-kinds{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* Unified plan: school rows, «کارهای باز» and the compact overdue list (design 01 §9). */
.g-day-school{font-size:11px;font-weight:800;color:var(--g-indigo)}
.g-plan-sub{margin:16px 0 0;font-size:17px;color:var(--g-indigo)}.g-plan-sub small{display:block;font-size:12px;font-weight:600;color:var(--g-muted)}
.g-plan-group{margin-top:14px}
.g-overdue{margin:0 0 10px;padding:8px 12px;border-radius:var(--g-radius-s);background:var(--g-amber-bg);border:1px solid var(--g-amber-line)}
.g-overdue summary{cursor:pointer;color:var(--g-amber);display:flex;align-items:center;gap:8px}
.g-overdue-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.g-overdue-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:10px;background:var(--g-content)}
.g-overdue-list li span{display:flex;flex-direction:column;min-width:0}.g-overdue-list small{color:var(--g-muted)}
.daily-task.school-task .task-check{background:var(--g-accent-soft)}
.task-state.extra{color:var(--g-indigo);font-weight:700}.lock-note{color:var(--g-muted)}
@media (max-width:767px){.g-planbook{border-width:24px 18px 24px 26px;padding:2px}.g-day-list{grid-template-columns:repeat(7,76px)}.g-arrow{width:36px;height:36px}}

/* ---------- R10 family rewards ---------- */
.g-wallet{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin:0 0 16px;padding:10px 14px;border-radius:16px;background:var(--g-indigo-deep);color:var(--g-content)}
.g-wallet span{display:flex;align-items:center;gap:6px}.g-wallet img{width:28px;height:28px}.g-wallet b{font-size:20px;color:var(--g-gold-soft)}
.g-rewards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.g-reward{display:flex;flex-direction:column;gap:8px;padding:14px;border:2px solid var(--g-line);border-radius:20px;background:linear-gradient(180deg,var(--g-content),var(--g-amber-bg));text-align:center}
.g-reward h3{margin:0;color:var(--g-indigo)}.g-reward p{margin:0;color:var(--g-muted);font-size:14px;min-height:1.6em}
.g-kind{align-self:center;padding:3px 10px;border-radius:99px;background:var(--g-accent-soft);color:var(--g-blue-edge);font-size:12px;font-weight:800}.g-kind.goal{background:#efe7fb;color:var(--g-purple-edge)}
.g-plinth{position:relative;align-self:center;width:min(240px,100%);aspect-ratio:var(--skin-reward-plinth-ratio);background:var(--skin-reward-plinth) center bottom/contain no-repeat;margin-top:52px}
.g-gift{position:absolute;left:50%;top:24%;transform:translate(-50%,-88%);width:46%}.g-gift img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 6px #0004)}
.g-price{position:absolute;left:22%;right:22%;top:47%;bottom:25%;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--g-content);font-weight:900;font-size:17px;text-shadow:0 1px 2px #000a}
.g-price img{width:22px;height:22px}
.g-reward.done{border-color:var(--g-good-line);background:linear-gradient(180deg,var(--g-content),var(--g-good-bg))}.g-reward.waiting{border-color:var(--g-amber-line)}
.g-requests{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.g-requests li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:14px;background:var(--g-content);border:1px solid var(--g-line)}
.g-requests li small{color:var(--g-muted)}.g-requests li .g-state{margin-inline-start:auto}
.g-requests li.good{border-color:var(--g-good-line)}.g-requests li.red{opacity:.75}
.g-state.good{background:var(--g-good-bg);color:var(--g-good)}

/* ---------- R11 builder ---------- */
.g-builder{display:grid;grid-template-columns:minmax(0,60%) minmax(0,40%);gap:16px;align-items:start}
.g-steps{display:none}
.g-build-content{display:grid;grid-template-columns:minmax(150px,34%) 1fr;gap:12px;padding:12px;border-radius:18px;background:#fbf2de;border:1px solid var(--g-line)}
.g-book-tabs{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow:auto}
.g-book-tab{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 10px;border:2px solid var(--g-line);border-radius:14px;background:var(--g-content);font:inherit;font-weight:800;color:var(--g-indigo);cursor:pointer;text-align:start}
.g-book-tab img{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.g-book-tab.on{background:linear-gradient(180deg,var(--g-blue-hi),var(--g-blue-edge));color:var(--g-content);border-color:var(--g-gold)}
.g-chapters{min-width:0;padding:10px;border-radius:14px;background:var(--g-content);border:1px solid var(--g-line)}.g-chapters h3{margin:0 0 8px;color:var(--g-indigo)}
.g-step-next{display:none}
.g-build-settings{position:sticky;top:12px;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:var(--g-content);border:2px solid var(--g-line)}
.g-build-settings .form-grid{grid-template-columns:1fr 1fr}
.g-sticky{position:sticky;bottom:0;margin:0 -14px -14px;padding:12px 14px 14px;border-radius:0 0 16px 16px;background:linear-gradient(#ffffff00,var(--g-content) 24%)}
@media (max-width:900px){.g-builder{grid-template-columns:1fr}.g-steps{display:flex;gap:8px}.g-steps button{flex:1;min-height:48px;border:2px solid var(--g-frame);border-radius:14px;background:var(--g-content);font:inherit;font-weight:800;color:var(--g-indigo)}
 .g-builder.step-content .g-build-settings,.g-builder.step-settings .g-build-content{display:none}.g-step-next{display:flex;grid-column:1/-1}.g-build-content{grid-template-columns:1fr}.g-book-tabs{flex-direction:row;overflow-x:auto;max-height:none}.g-book-tab{flex:0 0 auto}.g-build-settings{position:static}}

/* ---------- R15 medal hall ---------- */
.g-hall-count{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:10px}
.g-count-chip{display:flex;align-items:center;gap:8px;padding:6px 16px;border-radius:99px;background:var(--g-indigo-deep);color:var(--g-gold-soft);border:2px solid var(--g-gold)}.g-count-chip img{width:28px;height:28px}
.g-hall-count small{color:var(--g-muted)}
.g-showcase{margin:0 auto 18px;max-width:640px;text-align:center}.g-showcase h3{margin:0 0 6px;color:var(--g-indigo)}
.g-hall{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}
.g-hall-tabs{display:flex;flex-direction:column;gap:8px;position:sticky;top:12px}
.g-hall-tabs button{min-height:48px;padding:8px 14px;border:2px solid #2a5aa0;border-radius:14px;background:linear-gradient(180deg,#234f92,var(--g-blue-edge));color:var(--g-accent-soft);font:inherit;font-weight:800;text-align:start;cursor:pointer}

.g-hall-main{min-width:0;padding:12px;border-radius:18px;background:linear-gradient(180deg,var(--g-indigo),#12305e);box-shadow:inset 0 0 0 2px #2c5ba1}
.g-cab-title{margin:14px 4px 0;color:var(--g-gold-soft)}.g-cab-title small{color:#cfe0ff;font-size:13px}
.g-cab-row{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:8px 18px 40px}
.g-cab-row::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:30px;box-sizing:border-box;border-style:solid;border-width:0 34px;border-image-source:var(--skin-medal-cabinet);border-image-slice:var(--skin-medal-cabinet-slice);pointer-events:none}
.g-medal{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 6px;border:0;border-radius:14px;background:transparent;font:inherit;color:var(--g-content);cursor:pointer;text-align:center}
.g-medal:hover{background:#ffffff12}
.g-medal b{font-size:14px;line-height:1.35}.g-medal small{font-size:12px;color:#cfe0ff}
.g-medal .track-art{width:96px;height:96px}
.g-medal-art{position:relative;display:block}
.g-medal.none .track-sigil{filter:brightness(0) opacity(.55)}.g-medal.none .track-frame{filter:saturate(.3) brightness(.8)}
.g-medal.progress .g-medal-art::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--g-turq-hi) calc(var(--p)*1%),#ffffff22 0);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%)}
.g-medal-lock,.g-medal-pin{position:absolute;bottom:2px;left:2px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;font-size:13px;border:2px solid var(--g-content)}
.g-medal-lock{background:#3a2a6b}.g-medal-pin{background:var(--g-gold);color:#5a3c00}
.g-showcase .g-cab-row{background:linear-gradient(180deg,var(--g-indigo),#12305e);border-radius:18px;padding-top:14px}
.g-socket-empty{display:block;justify-self:center;width:84px;height:84px;margin-top:6px;border-radius:50%;border:3px dashed #ffffff44}
@media (max-width:767px){.g-hall{grid-template-columns:1fr}.g-hall-tabs{flex-direction:row;overflow-x:auto;position:static}.g-hall-tabs button{flex:0 0 auto}.g-cab-row{padding:8px 6px 38px;gap:4px}.g-medal .track-art{width:78px;height:78px}}

/* ---------- R08 class gate ---------- */
.g-gate{display:grid;grid-template-columns:minmax(200px,40%) 1fr;gap:20px;align-items:center}
.g-gate-art img{width:100%;height:auto;display:block}
.g-gate-panel{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:20px;background:var(--g-content);border:2px solid var(--g-line)}
.g-tabs{display:flex;gap:6px;padding:4px;border-radius:16px;background:var(--g-line-soft)}
.g-tabs button{flex:1;min-height:46px;border:0;border-radius:12px;background:transparent;font:inherit;font-weight:800;color:var(--g-indigo);cursor:pointer}

.g-code-form,.g-find-form{display:flex;flex-direction:column;gap:8px}
.g-code-form label{text-align:center;font-weight:800}
/* CodeInput: one LTR field drawn as six slots (48px slots,8px gaps),so paste,keyboard and screen readers just work. */
body.adi-ui.gv input.g-code{box-sizing:content-box;align-self:center;width:328px;max-width:none;height:60px;padding:0 0 0 17px;margin:0;border:0;border-radius:0;box-shadow:none;font:900 26px/60px ui-monospace,Consolas,monospace;letter-spacing:41px;color:var(--g-indigo);
 background:linear-gradient(90deg,var(--g-content) 0 48px,transparent 48px 56px,var(--g-content) 56px 104px,transparent 104px 112px,var(--g-content) 112px 160px,transparent 160px 168px,var(--g-content) 168px 216px,transparent 216px 224px,var(--g-content) 224px 272px,transparent 272px 280px,var(--g-content) 280px 328px,transparent 328px) 0 0/345px 100% no-repeat;
 outline:2px solid transparent;filter:drop-shadow(0 0 1px #c9ab72) drop-shadow(0 2px 0 var(--g-frame))}
body.adi-ui.gv input.g-code:focus-visible{outline:3px solid var(--g-focus);outline-offset:6px}
@media (max-width:767px){.g-gate{grid-template-columns:1fr}.g-gate-art{max-width:240px;margin:0 auto}}
@media (max-width:400px){body.adi-ui.gv input.g-code{transform:scale(.86);transform-origin:center}}
@media (max-width:767px){body.adi-ui.gv .modal{border-image-outset:0}body.adi-ui.gv .modal::before{inset:-2px}}

/* Long ribbon titles step down in size instead of spilling off the ribbon. */
.g-ribbon.long{font-size:clamp(15px,1.6vw,19px)}
/* Tabs inside game pages (class sections,report terms): one gold-edged strip. */
body.adi-ui.gv .tabs{display:flex;gap:6px;padding:5px;border-radius:16px;background:var(--g-indigo-deep);border:2px solid var(--g-gold);overflow-x:auto}
body.adi-ui.gv .tabs button{flex:1 0 auto;min-height:44px;padding:6px 14px;border:0;border-radius:12px;background:transparent;color:#dce8ff;font:inherit;font-weight:800;cursor:pointer;white-space:nowrap}

.g-points{margin-top:6px;padding:4px 14px;border-radius:99px;background:var(--g-good-bg);color:var(--g-good);font-weight:800}.g-points.neg{background:var(--g-amber-bg);color:var(--g-amber)}.g-points b{font-size:18px}

@media (max-width:767px){
 body.adi-ui.gv #app.g-page{margin-top:40px;padding:14px 4px 12px;border-width:18px;border-image-width:30px;border-image-outset:4px}
 body.adi-ui.gv #app.g-page::before{inset:-4px}
 .g-head{margin-top:-84px}
 .g-ribbon{width:min(330px,96%)}
 body.adi-ui.game #sidebar .adi-tab{min-height:58px;padding:4px 2px;font-size:11px;gap:0}
 body.adi-ui.game #sidebar .adi-tab img{width:30px;height:30px}
 .g-planbook .g-days{gap:2px}
}

body.adi-ui .g-hall-tabs button{width:auto}

/* ---------- Window close: every page but home has a × on its corner (back to home) ---------- */
.g-page-close{position:absolute;top:-24px;left:-24px;z-index:6;width:46px;height:46px;border-radius:50%;border:3px solid var(--g-gold);background:linear-gradient(180deg,var(--g-blue-hi),var(--g-blue-edge));color:var(--g-content);font:900 26px/1 sans-serif;box-shadow:0 3px 0 var(--g-navy-ink),0 6px 14px #0006;cursor:pointer}
.g-page-close:active{transform:translateY(2px);box-shadow:0 1px 0 var(--g-navy-ink)}
body.adi-ui.gv #app.g-scene-page{position:relative}
#app.g-scene-page>.g-page-close{top:10px;left:10px}
@media (max-width:767px){.g-page-close{top:-18px;left:-10px;width:42px;height:42px;font-size:24px}#app.g-scene-page>.g-page-close{top:8px;left:8px}}

/* ---------- Scene pages (competition,clan,shop): art in front,panels below ---------- */
body.adi-ui.gv #app.g-scene-page{padding:0;margin-top:6px}
.g-scene{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(300px,44vh,440px);border-radius:26px;border:3px solid var(--g-gold);box-shadow:0 18px 40px #0007;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 12px 0}
.g-scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}
.g-scene-head{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;text-align:center;z-index:2}
.g-scene-head .g-ribbon{width:min(440px,92%)}
.g-scene-sub{margin:-6px 0 0;padding:4px 16px;border-radius:99px;background:#fff8ebee;border:2px solid var(--g-gold);color:var(--g-ink);font-weight:800;font-size:14px;box-shadow:0 3px 8px #0003}
.g-scene-chip{position:relative;z-index:2;margin:8px auto 14px;padding:8px 22px;border-radius:16px;background:#fff8ebf2;border:2px solid var(--g-gold);font-weight:900;color:var(--g-indigo);box-shadow:0 4px 10px #0004}
.g-scene-emblem{display:block;width:clamp(120px,14vw,170px);height:auto;margin-bottom:-26px;filter:drop-shadow(0 10px 14px #0006)}
.g-card{position:relative;padding:14px 16px;border-radius:20px;background:var(--g-content);border:2px solid var(--g-line);box-shadow:0 10px 22px #0b1d3a33;color:var(--g-ink)}
.g-card-title{margin:0 0 6px;color:var(--g-indigo);font-size:19px}.g-card-title small{color:var(--g-muted);font-size:13px;font-weight:600}
.g-state-card{display:flex;flex-direction:column;align-items:center;gap:10px;margin:16px auto;max-width:560px;padding:22px;border-radius:20px;background:var(--g-content);border:2px solid var(--g-line);text-align:center;color:var(--g-ink)}
.g-state-card img{width:160px;height:auto}.g-state-card.loading{color:var(--g-muted)}
.g-center{text-align:center}
.g-you{font-style:normal;margin-inline-start:6px;padding:1px 10px;border-radius:99px;background:#0f3d55;color:var(--g-content);font-size:12px}
.g-icon-btn{width:40px;height:40px;border-radius:12px;border:2px solid var(--g-line);background:var(--g-content);font:inherit;font-size:20px;cursor:pointer}

/* Segmented filters (level,period,shop groups): the chosen one is a lit blue socket,not only a colour. */
.g-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin:-24px 12px 16px;position:relative;z-index:3}
.g-seg{display:flex;gap:4px;padding:5px;border-radius:16px;background:var(--g-indigo-deep);border:2px solid var(--g-gold);box-shadow:0 6px 14px #0006;overflow-x:auto}
.g-seg button{flex:1 0 auto;min-height:42px;padding:6px 16px;border:0;border-radius:12px;background:var(--g-content);color:var(--g-indigo);font:inherit;font-weight:800;cursor:pointer;white-space:nowrap;width:auto}

.g-seg.light{flex-wrap:wrap;background:var(--g-line-soft);border-color:var(--g-frame);box-shadow:none}

/* ---------- Competition: podiums on the court ---------- */
.g-podiums{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:clamp(4px,1.5vw,18px);width:min(720px,100%);margin-top:auto;padding:0 6px}
.g-podium{position:relative;display:flex;flex-direction:column;align-items:center}
.g-podium.gold{margin-bottom:26px}.g-podium.silver{margin-bottom:6px}
.g-podium-art{display:block;width:100%;height:auto;position:relative;z-index:1}
/* The hero's own foot anchor (inline translate) lands on the podium's top surface (--top of the podium art). */
.g-podium-hero{position:absolute;z-index:2;left:50%;top:calc(var(--top)*100%);width:52%;height:auto;max-width:none;filter:drop-shadow(0 8px 8px #0005)}
.g-podium-emblem{position:absolute;z-index:2;left:50%;top:calc(var(--top)*100%);transform:translate(-50%,-88%);width:56%;height:auto;filter:drop-shadow(0 8px 10px #0006)}
.g-podium-class{position:absolute;z-index:2;left:50%;top:calc(var(--top)*100%);transform:translate(-50%,-130%);padding:6px 12px;border-radius:12px;background:var(--g-ivory);border:2px solid var(--g-gold);font-weight:900;color:var(--g-indigo);white-space:nowrap}
.g-plate{position:absolute;z-index:3;left:20%;right:20%;top:53%;bottom:17%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--g-content);text-align:center;text-shadow:0 1px 2px #000a;line-height:1.2;min-width:0}
.g-plate b{font-size:clamp(11px,1.15vw,15px);line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.g-plate small{font-size:clamp(10px,.95vw,12px);font-weight:800;line-height:1.1}
.g-plate-rank{position:absolute;top:-62%;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:clamp(26px,3vw,38px);height:clamp(26px,3vw,38px);border-radius:50%;background:linear-gradient(180deg,#fff3c4,var(--g-gold));border:2px solid var(--g-content);color:#5a3c00;font-weight:900;font-size:clamp(13px,1.5vw,19px);text-shadow:none;box-shadow:0 3px 6px #0005}
.g-podium.silver .g-plate-rank{background:linear-gradient(180deg,var(--g-accent-soft),#9fb2c8);color:#22344d}.g-podium.bronze .g-plate-rank{background:linear-gradient(180deg,#ffd9b8,#c27a45);color:#4a2308}
.g-podium.empty .g-podium-art{opacity:.55;filter:saturate(.6)}
.g-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,36%);gap:16px;align-items:start}
.g-rank-head{display:grid;grid-template-columns:56px 1fr auto;gap:10px;padding:6px 12px;border-radius:12px;background:var(--g-line-soft);color:var(--g-indigo);font-weight:800;font-size:13px;margin-bottom:6px}
.g-rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.g-rank-list li{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 12px;border-radius:14px;background:var(--g-content);border:1px solid var(--g-line)}
.g-rank-list li b{flex:1;min-width:0;color:var(--g-ink)}.g-rank-list li small{color:var(--g-muted)}
.g-rank-list li.me{background:linear-gradient(180deg,var(--g-turq-hi),var(--g-turq));border-color:#139aa5}.g-rank-list li.me b,.g-rank-list li.me small{color:#0b2c3a}
.g-rank-no{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:12px;background:var(--g-accent-soft);font-weight:900;color:var(--g-indigo)}
.g-rank-no.r1{background:linear-gradient(180deg,#fff3c4,var(--g-gold));color:#5a3c00}.g-rank-no.r2{background:linear-gradient(180deg,var(--g-accent-soft),#9fb2c8)}.g-rank-no.r3{background:linear-gradient(180deg,#ffd9b8,#c27a45);color:#4a2308}
.g-rank-face img{width:42px;height:42px;border-radius:50%;object-fit:contain;background:var(--g-accent-soft);border:2px solid var(--g-content);display:block}
.g-rank-xp{display:flex;align-items:center;gap:4px;font-weight:900;color:var(--g-indigo)}.g-rank-xp img{width:22px;height:22px}
.g-me-line{margin:10px 0 0;padding:8px 12px;border-radius:12px;background:#e7f8fa;color:#0b4c5c;font-weight:800}
.g-prizes{text-align:center}
.g-prize-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:6px;margin:8px 0}
.g-prize{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.g-prize img:first-child{width:100%;height:auto}.g-prize.gold{margin-bottom:12px}
.g-prize .g-plate-rank{top:42%}
.g-prize b{display:flex;align-items:center;gap:3px;font-size:14px;color:var(--g-indigo);white-space:nowrap}.g-prize b img{width:18px;height:18px}
@media (max-width:900px){.g-board{grid-template-columns:1fr}.g-filters{margin-top:-18px}}
@media (max-width:767px){.g-scene{min-height:300px;border-radius:20px}.g-podiums{width:100%}.g-plate{left:14%;right:14%}.g-filters{flex-direction:column;align-items:stretch}}

/* ---------- Clan ---------- */
.g-clan-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:-30px 10px 16px;position:relative;z-index:3}
.g-join .g-code{margin:6px auto 12px}
.g-create{background:linear-gradient(180deg,#3a3192,#262066);border-color:var(--g-gold);color:var(--g-accent-soft)}
.g-create .g-card-title,.g-create label{color:var(--g-content)}.g-create .caption,.g-create p{color:#dfe3ff}
.g-create .g-chip{background:var(--g-content)}
.g-create-row{display:flex;align-items:center;gap:12px}.g-create-row>div{flex:1}.g-create-row img{width:110px;height:auto;filter:drop-shadow(0 8px 10px #0006)}
.g-lock-chip{display:inline-block;padding:6px 14px;border-radius:12px;background:var(--g-indigo-deep);border:1px solid var(--g-gold);color:var(--g-content);font-weight:800}
.g-sample{display:flex;align-items:center;gap:14px;margin:0 10px 16px}.g-sample p{flex:1;margin:6px 0 0}.g-sample img{width:72px;height:auto}
.g-sample .g-tag{position:absolute;top:-12px;right:16px;background:linear-gradient(180deg,#8b6bd0,#5b3fa5);color:var(--g-content)}
.g-clan-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:-30px 10px 14px;position:relative;z-index:3}
.g-clan-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:0 10px 16px}
/* clan identity, requests and the clan finder (design 03 §6–§7) */
.g-clan-about{margin:0 10px 14px;padding:10px 14px;border-radius:14px;background:#ffffffd9;border:1px solid var(--g-line);color:var(--g-ink);text-align:center;overflow-wrap:anywhere}
.g-requests,.g-browse,.g-nextmission,.g-ladder{margin:0 10px 16px}.g-req-list,.g-clan-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.g-req-list li,.g-clan-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:#f6f3ff;border:1px solid var(--g-line);flex-wrap:wrap}
.g-req-list li b{flex:1;min-width:120px}.g-clan-list li>div{flex:1;min-width:150px}.g-clan-list li p{margin:4px 0 0;overflow-wrap:anywhere}.g-clan-list img{width:48px;height:auto}
.g-find{display:flex;gap:8px;flex-wrap:wrap}.g-find input{flex:1;min-width:150px}
.g-check{display:flex;align-items:center;gap:8px;margin:8px 0}.g-radio{border:0;padding:0;margin:8px 0}.g-radio label{display:flex;gap:8px;align-items:center;margin:4px 0}
.g-btn.small{padding:6px 12px;font-size:14px;min-height:36px}
.g-classclan{margin:0 10px 16px}.g-classclan-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}.g-classclan-head h3{margin:2px 0}.g-classclan-head img{width:72px;height:auto}
.g-classclan .g-mission{box-shadow:none;border:1px solid var(--g-line)}
.g-code-show{font:900 30px/1.4 ui-monospace,Consolas,monospace;letter-spacing:8px;text-align:center;color:var(--g-indigo);margin:8px 0}
@media (max-width:767px){.g-clan-cards,.g-clan-grid{grid-template-columns:1fr;margin-top:-20px}.g-scene-emblem{width:110px}}

/* ---------- Shop: bazaar,arch preview beside the catalog ---------- */
.g-bazaar{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;border:3px solid var(--g-gold);box-shadow:0 18px 40px #0007;padding:14px clamp(8px,1.6vw,20px) 18px}
.g-bazaar>.g-scene-bg{z-index:-1}
.g-bazaar-grid{display:grid;grid-template-columns:minmax(260px,40%) minmax(0,1fr);gap:16px;align-items:start;margin-top:10px}
.g-showcase-col{display:flex;flex-direction:column;align-items:center;gap:8px;order:2}
.g-ribbon.small{width:min(260px,80%);font-size:17px}
.g-arch{position:relative;width:min(340px,100%);aspect-ratio:1024/1536;margin-top:-18px}
.g-arch-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:4;pointer-events:none}
.g-arch-plat{position:absolute;left:50%;top:81%;width:80%;height:auto;z-index:1}
.g-arch-fx{position:absolute;max-width:none;z-index:2;opacity:.95;pointer-events:none}
.g-arch-hero{position:absolute;left:50%;top:81%;height:60%;width:auto;max-width:none;z-index:2;filter:drop-shadow(0 8px 8px #0004)}
/* The portrait with its frame sits centred high in the gate,above the hero's head,large enough to judge a frame. */
body.adi-ui .g-arch .adi-avatar.g-arch-portrait{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5;width:clamp(70px,30%,150px);height:auto;aspect-ratio:1}
.g-buy{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:-10px;position:relative;z-index:5}
.g-buy-item{display:flex;align-items:center;gap:10px}.g-buy-item .g-shop-art{width:64px;height:64px}.g-buy-item b{display:block;color:var(--g-indigo)}
.g-balance{display:flex;align-items:center;gap:6px;margin:0;color:var(--g-muted)}.g-balance img{width:20px;height:20px}.g-balance b{color:var(--g-indigo);font-size:18px}
.g-catalog{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:20px;background:#fffdf8f2;border:2px solid var(--g-gold);box-shadow:0 10px 24px #0005}
.g-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.g-shop-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;border:2px solid var(--g-line);border-radius:18px;background:var(--g-content);font:inherit;color:var(--g-ink);cursor:pointer;text-align:center}
.g-shop-card.on{border-color:var(--g-turq);box-shadow:0 0 0 3px #24b8c366}
.g-shop-card b{font-size:15px;color:var(--g-indigo)}
.g-shop-art{display:grid;place-items:center;width:110px;height:110px;flex-shrink:0}.g-shop-art img{width:100%;height:100%;object-fit:contain}
.g-price-tag{display:flex;align-items:center;gap:4px;font-weight:900;color:var(--g-amber)}.g-price-tag img{width:18px;height:18px}
.g-owned{color:var(--g-good);font-weight:800}
.g-shop-card .g-btn.small{min-height:36px;padding:4px 14px;font-size:13px;pointer-events:none}
.g-bazaar .shop-detail{text-align:center}
@media (max-width:900px){.g-bazaar-grid{grid-template-columns:1fr}.g-showcase-col{order:0}.g-arch{width:min(260px,80%)}.g-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Daily reward received: a stamp and words,nothing left to claim. */
.g-earned{display:flex;align-items:center;gap:12px;justify-content:center;margin:0 auto 12px;padding:10px 16px;max-width:420px;border-radius:16px;background:var(--g-good-bg);border:2px solid var(--g-good-line);color:var(--g-good)}
.g-earned b{display:block;font-size:17px}.g-earned span{font-size:14px}
.g-got{position:absolute;top:-6px;left:-6px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--g-green);border:2px solid var(--g-content);color:var(--g-content);font-style:normal;font-weight:900;font-size:14px}
/* Plan book on wide screens: rows sit two to a line instead of stretching across the page. */
.g-planbook{max-width:1060px;margin-inline:auto}
@media (min-width:1100px){.g-plan-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:10px}}
.g-plan-rows>.adi-empty-state{grid-column:1/-1}
.g-scene.arena{min-height:clamp(460px,62vh,600px);padding-bottom:0}.g-scene.arena .g-podiums{width:min(780px,100%)}
.g-scene:not(.arena){padding-bottom:44px}
.g-planbook .adi-empty-state img{width:min(200px,60%);height:auto}

/* Segment strips never widen the page: they scroll inside themselves on narrow screens. */
.g-filters>.g-seg,.g-catalog>.g-seg{min-width:0;max-width:100%}
@media (max-width:767px){.g-seg button{flex:0 0 auto;padding:6px 12px}}
@media (max-width:767px){body.adi-ui.game #sidebar{box-sizing:border-box;left:0;right:0;width:100%}body.adi-ui.game .main{box-sizing:border-box;width:100%;max-width:100%;margin:0}}
@media (max-width:767px){.g-scene.arena{min-height:380px}.g-scene.arena .g-podiums{width:100%;padding:0}}
/* Wide screens: the bazaar fits the window; the arch scales with the height and only the item list scrolls. */
@media (min-width:901px){
 .g-bazaar{display:flex;flex-direction:column;height:calc(100dvh - 130px);min-height:560px;box-sizing:border-box}
 .g-bazaar-grid{flex:1;min-height:0;align-items:stretch}
 .g-showcase-col{min-height:0}
 .g-arch{flex:1;min-height:0;width:auto;max-width:100%;margin-top:-14px}
 .g-catalog{min-height:0;overflow:hidden}
 .g-shop-grid{flex:1;min-height:0;overflow-y:auto;align-content:start;padding:4px;overscroll-behavior:contain}
}
body.adi-ui .g-arch .g-arch-portrait:not(.framed)>img{width:100%;height:100%;object-fit:cover;border-radius:50%}
@media (min-width:901px) and (max-height:860px){.g-bazaar .g-scene-head .g-ribbon{width:min(340px,80%)}.g-arch{margin-top:0}}
@media (max-width:900px){.g-bazaar{background:linear-gradient(180deg,transparent 520px,var(--g-meter-track) 640px)}.g-bazaar>.g-scene-bg{height:640px;bottom:auto}.g-shop-grid{max-height:70vh;overflow-y:auto;overscroll-behavior:contain;padding:4px}}
/* Wide screens: the preview takes the column's height — the buy panel is one row and the small ribbon is dropped. */
@media (min-width:901px){
 .g-showcase-col>.g-ribbon.small{display:none}
 .g-arch{margin-top:0}
 .g-buy{display:flex;flex-direction:row;align-items:center;gap:12px;margin-top:-6px;padding:8px 12px}
 .g-buy .g-buy-item{flex:1;min-width:0}.g-buy .g-buy-item .g-shop-art{width:52px;height:52px}
 .g-buy>p:not(.g-balance){flex:1;margin:0}
 .g-buy .g-balance{flex-shrink:0;flex-direction:column;align-items:center;gap:0;font-size:12px}
 .g-buy>.g-btn{flex-shrink:0;width:auto;min-width:170px;min-height:48px;font-size:16px}
 .g-buy>small.caption{display:none}
}
.g-look-reset{position:relative;z-index:6;margin:-4px 0 4px;background:#fff8ebee;border-radius:99px;padding:4px 14px}
/* Abilities in the top bar: icon,word and the sum of the six levels. */


@media (max-width:767px){
 body.adi-ui.game .top{min-width:0;max-width:100%}
 body.adi-ui.game .adi-pills,body.adi-ui.game .adi-who{min-width:0;flex-shrink:1}
 
 body.adi-ui.game .adi-pill{padding:0 2px;gap:3px}
 
 
}
/* Phones: the avatar already opens «منوی من»,so the gear gives its room to the abilities button. */

/* Phones: the top bar wraps to a second line rather than pushing the page sideways (parents carry a child picker
   and «بررسی»; small phones need it too). */
@media (max-width:767px){body.adi-ui.game .top{flex-wrap:wrap!important;justify-content:space-between;row-gap:6px}body.adi-ui.game .top .stats,body.adi-ui.game .adi-pills{flex-wrap:wrap;justify-content:flex-end;max-width:100%}}
/* Empty-state pictures never exceed their box (the parent overview's day list held one at full size). */
body.adi-ui .adi-empty-state img{width:min(220px,70%);max-width:100%;height:auto}
body.adi-ui.game #sidebar .adi-tab .adi-badge{left:auto;right:8px;top:2px;padding:0 6px;min-width:20px;height:20px;line-height:20px;background:var(--g-badge);color:var(--g-content)}

/* ---------- Abilities hall (Adrian-Life-Abilities-Reuse-Kit): six badges around the hero,detail panel below ---------- */
.g-abhall{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;border:3px solid var(--g-gold);box-shadow:0 18px 40px #0007;padding:14px clamp(8px,1.6vw,20px) 16px}
.g-abhall>.g-scene-bg{z-index:-2}
.g-abhall::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#10284f55,#10284f22 40%,#10284f88)}
.g-ab-stage{display:grid;grid-template-columns:1fr minmax(220px,30%) 1fr;align-items:center;gap:8px;margin-top:4px}
.g-ab-col{display:flex;flex-direction:column;gap:10px;align-items:center}

.g-ab{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;padding:0;border:0;background:none;font:inherit;cursor:pointer;color:var(--g-ink);direction:rtl}
.g-ab-level{position:relative;z-index:3;margin-bottom:-12px;padding:2px 12px;border-radius:99px;background:var(--g-indigo-deep);border:2px solid var(--g-gold);color:var(--g-content);font-size:12px;font-weight:800}
.g-ab-disc{position:relative;display:block;width:clamp(104px,10vw,138px);aspect-ratio:1}
.g-ab-surface{position:absolute;inset:9%;border-radius:50%;background:var(--ab);background-image:radial-gradient(circle at 50% 30%,#ffffff66,transparent 60%),linear-gradient(180deg,transparent,#0000004d);box-shadow:inset 0 -6px 12px #0004,0 0 0 3px #ffffff40}
.g-ab-icon{position:absolute;inset:27%;width:46%;height:46%;border-radius:50%;box-shadow:0 0 0 3px #ffffffaa;object-fit:contain;z-index:1;filter:drop-shadow(0 4px 4px #0005)}
.g-ab-frame{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;z-index:2;pointer-events:none}
.g-ab-ring{position:absolute;inset:0;z-index:2;transform:rotate(-90deg)}
.g-ab-ring circle{fill:none;stroke-width:5}.g-ab-ring .track{stroke:#0b1d3a66}.g-ab-ring .fill{stroke:var(--g-gold-soft);stroke-linecap:round}
.g-ab-plate{position:relative;z-index:3;margin-top:-14px;display:flex;flex-direction:column;align-items:center;min-width:120px;padding:4px 14px;border-radius:14px;background:var(--g-ivory);border:2px solid var(--g-gold);box-shadow:0 3px 0 #0b1d3a55}
.g-ab-plate b{font-size:16px;color:var(--g-indigo)}.g-ab-plate small{font-size:12px;color:var(--g-muted)}
.g-ab.on .g-ab-disc{filter:drop-shadow(0 0 10px var(--ab)) drop-shadow(0 0 4px var(--g-content))}
.g-ab.on .g-ab-plate{border-color:var(--ab);box-shadow:0 0 0 3px var(--ab),0 3px 0 #0b1d3a55}
.g-ab.idle .g-ab-surface{filter:saturate(.3)}.g-ab.idle .g-ab-icon{opacity:.75}
.g-ab:focus-visible{outline:3px solid var(--g-focus);outline-offset:4px;border-radius:20px}
.g-ab-hero{position:relative;align-self:stretch;min-height:300px}
.g-ab-plat{position:absolute;left:50%;top:80%;width:96%;height:auto}
.g-ab-char{position:absolute;left:50%;top:80.5%;height:76%;width:auto;max-width:none;z-index:1;filter:drop-shadow(0 10px 10px #0005)}
.g-ab-detail{position:relative;z-index:2;margin-top:12px;padding:14px 16px;border-radius:20px;background:var(--g-content);border:2px solid var(--g-gold);box-shadow:0 10px 24px #0005}
.g-ab-detail-main{display:grid;grid-template-columns:auto 1fr minmax(180px,30%) auto;align-items:center;gap:14px}
.g-ab-mini{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ab);border:3px solid var(--g-gold)}.g-ab-mini img{width:70%;height:70%;object-fit:contain}
.g-ab-detail-copy h2{margin:0;color:var(--g-indigo);font-size:22px}.g-ab-detail-copy h2 small{font-size:13px;color:var(--g-muted)}.g-ab-detail-copy p{margin:2px 0 0;color:var(--g-muted)}
.g-ab-detail .g-btn{width:auto;min-width:200px}
.g-ab-recent{margin-top:10px;padding:6px 12px;border-radius:12px;background:var(--g-content);border:1px solid var(--g-line)}
.g-ab-recent summary{cursor:pointer;font-weight:800;color:var(--g-indigo);min-height:36px;display:flex;align-items:center;gap:10px}.g-ab-recent summary small{font-weight:600;color:var(--g-muted)}
.g-ab-recent ul{list-style:none;margin:6px 0;padding:0}.g-ab-recent li{padding:4px 0;border-top:1px solid var(--g-line-soft)}.g-ab-recent li small{color:var(--g-muted)}
.g-ab-info{position:relative;z-index:2;margin-top:10px;padding:8px 12px;border-radius:14px;background:#fff8ebe6;color:var(--g-muted);font-size:14px}.g-ab-info summary{cursor:pointer;font-weight:800;color:var(--g-blue-edge)}
@media (max-width:900px){
 .g-ab-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}
 .g-ab-hero{grid-column:1/-1;order:-1;height:300px;width:min(320px,100%);justify-self:center}
 .g-ab-col{display:contents}
  .g-ab-detail-main{grid-template-columns:auto 1fr}.g-ab-detail-main>.g-meter,.g-ab-detail .g-btn{grid-column:1/-1;width:100%}
}
@media (prefers-reduced-motion:no-preference){.g-ab-ring .fill{transition:stroke-dasharray .6s ease-out}}
/* Wide screens: three badges per column share the stage height (badge ≈ disc + plate),so the hall fits the window. */
@media (min-width:901px){.g-abhall{display:flex;flex-direction:column;height:calc(100dvh - 130px);min-height:560px;box-sizing:border-box}.g-ab-stage{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}.g-ab-col{gap:0;justify-content:space-evenly;height:100%;min-height:0}.g-ab-disc{width:clamp(56px,min(10vw,calc((100dvh - 450px)/3 - 58px)),130px)}.g-ab-plate{padding:2px 12px;min-width:110px}.g-ab-plate b{font-size:15px}.g-ab-detail{margin-top:6px;padding:10px 14px}.g-ab-recent{margin-top:6px}.g-ab-info{display:none}}
@media (max-width:900px){.g-ab-hero{height:300px}.g-ab-plat{top:84%}.g-ab-char{top:84.5%}}
/* Short windows (laptops): the hall keeps readable badges and the page scrolls to the detail panel instead. */
@media (min-width:901px) and (max-height:860px){.g-abhall{height:auto;min-height:0}.g-ab-stage{flex:none;height:560px}.g-ab-disc{width:clamp(90px,9vw,120px)}}
/* Arc around the hero (wide screens): on each side the middle badge sits farther out,the top and bottom lean in. */
.g-abhall{--arc:clamp(26px,3.4vw,52px)}
@media (min-width:901px){
 .g-ab-col.left .g-ab:nth-child(2){transform:translateX(calc(-1*var(--arc)))}.g-ab-col.left .g-ab:nth-child(1),.g-ab-col.left .g-ab:nth-child(3){transform:translateX(var(--arc))}
 .g-ab-col.right .g-ab:nth-child(2){transform:translateX(var(--arc))}.g-ab-col.right .g-ab:nth-child(1),.g-ab-col.right .g-ab:nth-child(3){transform:translateX(calc(-1*var(--arc)))}
}

/* ---------- Lobby (game layout): one screen,hero in the middle,section buttons on both sides,the day's play button ---------- */
body.adi-ui.game #app.g-lobby-page{padding:0}


.g-task-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.g-task-card img{width:88px;height:88px}.g-task-card h2{margin:0}
body.adi-ui.gv .modal.g-task-modal{width:min(460px,100%)}
@media (max-width:767px){

 /* Game-style bottom bar: big icons,small labels. */
 body.adi-ui.game #sidebar .adi-tab{min-height:72px}
 body.adi-ui.game #sidebar .adi-tab img{width:46px;height:46px}
 body.adi-ui.game #sidebar .adi-tab span{font-size:11px}
}
html:has(body.g-noscroll),body.g-noscroll{overflow:hidden;overscroll-behavior:none}
body.adi-ui.game.g-noscroll .main{padding-bottom:0}body.adi-ui.game.g-noscroll #app.g-lobby-page{margin-bottom:0}


/* ---------- Home UI v2 + mobile parts (Adrian-Life-Home-UI-Art, Adrian-Life-Mobile-UI-Missing-Parts) ----------
   Every skin is drawn whole at its own aspect ratio (nothing stretched); text and values sit in the measured empty areas. */

/* HUD: left to right — avatar, level star on the XP track, coins, mail, settings, then the streak (second line on phones). */
body.adi-ui.game .top{direction:ltr;justify-content:flex-end;align-items:flex-start;gap:8px;flex-wrap:nowrap}
body.adi-ui.game .top .crumb,body.adi-ui.game .top .stats{direction:ltr;flex:0 0 auto;gap:8px;align-items:center}
body.adi-ui.game .adi-who,body.adi-ui.game .adi-pills{direction:ltr;gap:8px;align-items:center}
body.adi-ui.game .adi-avatar.framed{width:60px;height:60px;border:0;box-shadow:none;background:none;overflow:visible}
body.adi-ui.game .adi-avatar.framed>img:not(.adi-avatar-frame){width:78%;height:78%;border-radius:50%;object-fit:cover;background:var(--g-accent-soft)}
.g-lvl{position:relative;display:flex;align-items:center;padding:0;border:0;background:none;cursor:pointer}
.g-lvl-star{position:relative;z-index:2;flex-shrink:0;display:grid;place-items:center;width:48px;aspect-ratio:992/952;margin-right:-16px;background:var(--home-level-star) center/contain no-repeat}
.g-lvl-star b{color:var(--g-content);font-size:18px;font-weight:900;text-shadow:0 2px 2px #2c0f5c;transform:translateY(1px)}
.g-xp{position:relative;display:block;width:clamp(96px,14vw,200px);aspect-ratio:2030/314;background:var(--mobile-xp-track) center/100% 100% no-repeat}
/* the fill covers the groove (2.5%–97.4% × 16%–83% of the track) and is revealed to the XP share */
.g-xp i{position:absolute;left:3.2%;right:3.2%;top:19%;bottom:19%;background:var(--mobile-xp-fill) center/100% 100% no-repeat;clip-path:inset(0 calc((1 - var(--p))*100%) 0 0 round 99px)}
.g-xp b{position:absolute;inset:0;display:grid;place-items:center;padding-left:10px;color:var(--g-content);font-weight:900;font-size:clamp(12px,1.1vw,15px);text-shadow:0 1px 2px #000c}
.g-ctr{position:relative;display:block;height:clamp(30px,3.4vw,40px);padding:0;border:0;background:center/contain no-repeat;color:var(--g-content);font:inherit;cursor:default}
.g-ctr.coin{aspect-ratio:1589/503;background-image:var(--mobile-coin-counter)}
.g-ctr.streak{aspect-ratio:1748/558;background-image:var(--mobile-streak-counter);cursor:pointer}
/* the number sits in the dark capsule, right of the coin / flame (measured: 29%–96% and 30%–96%) */
.g-ctr b{position:absolute;top:0;bottom:0;left:31%;right:6%;display:grid;place-items:center;font-weight:900;font-size:clamp(13px,1.3vw,17px);white-space:nowrap;text-shadow:0 1px 2px #000a}
.g-rbtn{position:relative;flex-shrink:0;width:clamp(36px,3.6vw,48px);aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer}
.g-rbtn img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #0005)}
body.adi-ui .g-rbtn .adi-badge{top:-4px;left:auto;right:-4px}
body.adi-ui.game .adi-pills .g-ctr.streak{order:9}
@media (max-width:767px){
 body.adi-ui.game .top{gap:4px;margin-bottom:4px}
 body.adi-ui.game .top .stats,body.adi-ui.game .adi-pills{flex-wrap:wrap;justify-content:flex-end;gap:4px 5px;max-width:calc(100vw - 190px)}
 body.adi-ui.game .adi-avatar.framed{width:clamp(42px,12vw,54px);height:clamp(42px,12vw,54px)}
 .g-lvl-star{width:clamp(34px,10vw,44px);margin-right:-12px}.g-lvl-star b{font-size:15px}
 .g-xp{width:clamp(80px,25vw,120px)}
 .g-ctr{height:clamp(26px,7.6vw,32px)}
 .g-rbtn{width:clamp(30px,8.6vw,38px)}
 body.adi-ui.game .adi-pills .g-ctr.streak{flex-basis:auto;margin-left:auto}
 body.adi-ui.game .adi-pills::after{content:"";order:8;flex-basis:100%}
}

/* Navigation. Desktop: the framed rail; phones: the two joined dock halves with home in the middle.
   One purple tile (.adi-tab-hi) is placed under the selected item by script and slides between items. */
body.adi-ui.game #sidebar .adi-tabs{position:relative}
.adi-tab-hi{position:absolute;z-index:0;opacity:0;pointer-events:none;background:var(--home-nav-tile-active) center/100% 100% no-repeat;filter:drop-shadow(0 6px 10px #0006);transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease,opacity .2s}
body.adi-ui.game #sidebar .adi-tab{position:relative;z-index:1;background:none!important;box-shadow:none!important;border:0!important;transition:transform .2s}
body.adi-ui.game #sidebar .adi-tab img{transition:transform .2s}
body.adi-ui.game #sidebar .adi-tab.active img{transform:scale(1.14)}
@media (prefers-reduced-motion:reduce){.adi-tab-hi,body.adi-ui.game #sidebar .adi-tab img{transition:none}}
@media (min-width:768px){
 body.adi-ui.game #sidebar .adi-tabs{width:124px;padding:16px 8px;gap:10px;border-style:solid;border-width:44px 0;border-image-source:var(--home-nav-rail-web);border-image-slice:150 0 150 0 fill;border-image-repeat:stretch;background:none}
 body.adi-ui.game #sidebar .adi-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:112px;padding:14% 4px 8%;border-radius:18px}
 body.adi-ui.game #sidebar .adi-tab img{width:68px;height:68px}
 body.adi-ui.game #sidebar .adi-tab span{margin-top:-6px;padding:2px 10px;border-radius:99px;background:var(--g-ivory);border:2px solid var(--g-gold);color:var(--g-indigo);font-size:13px;font-weight:900;text-shadow:none}
 body.adi-ui.game #sidebar .adi-tab.active span{background:none;border-color:transparent;color:var(--g-content);text-shadow:0 2px 2px #2c0f5c}
 body.adi-ui.game.g-noscroll #sidebar .adi-brand{display:none}
}
@media (max-width:767px){
 body.adi-ui.game #sidebar{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;height:auto!important;padding:0 2px max(2px,env(safe-area-inset-bottom))!important}
 body.adi-ui.game #sidebar .adi-tabs{display:block;direction:ltr;height:86px;padding:0;border:0;background:none}
 /* the two joined halves (each 43% of the width, at their own aspect), home's slot in the middle */
 body.adi-ui.game #sidebar .adi-tabs::before,body.adi-ui.game #sidebar .adi-tabs::after{content:"";position:absolute;bottom:0;width:44%;pointer-events:none;background:center bottom/100% 100% no-repeat}
 body.adi-ui.game #sidebar .adi-tabs::before{left:0;aspect-ratio:1640/526;background-image:var(--mobile-nav-joined-left)}
 body.adi-ui.game #sidebar .adi-tabs::after{right:0;aspect-ratio:1638/616;background-image:var(--mobile-nav-joined-right)}
 body.adi-ui.game #sidebar .adi-tab{position:absolute;bottom:4px;width:20%;aspect-ratio:970/1220;max-height:92px;min-height:0;padding:0 0 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;transform:translateX(-50%)}
 /* cell centres measured on the halves: left 26.7% / 71.1%, right 29.6% / 73.3% of each half */
 body.adi-ui.game #sidebar .adi-tab[style*="--dock:1"]{left:11.7%}
 body.adi-ui.game #sidebar .adi-tab[style*="--dock:2"]{left:31.3%}
 body.adi-ui.game #sidebar .adi-tab[style*="--dock:3"]{left:50%;background:var(--home-nav-tile-normal) center/100% 100% no-repeat!important}
 body.adi-ui.game #sidebar .adi-tab[style*="--dock:4"]{left:69%}
 body.adi-ui.game #sidebar .adi-tab[style*="--dock:5"]{left:88.3%}
 body.adi-ui.game #sidebar .adi-tab.active{background:none!important}
 body.adi-ui.game #sidebar .adi-tab img{width:clamp(36px,11vw,46px);height:clamp(36px,11vw,46px);filter:drop-shadow(0 2px 2px #0006)}
 body.adi-ui.game #sidebar .adi-tab span{color:var(--g-content);font-size:12px;font-weight:900;text-shadow:0 1px 2px #000c;white-space:nowrap}
 body.adi-ui.game #sidebar .adi-tab .adi-badge{top:18%;right:8%;left:auto}
}

/* ---------- Home: the scene fills the screen behind HUD and nav ---------- */
body.adi-ui.game.g-noscroll{background:var(--g-indigo-deep) var(--scene-shop-bazaar) center/cover no-repeat}
body.adi-ui.game.g-noscroll::before{display:none}
body.adi-ui.game.g-noscroll .main{padding-bottom:0}
body.adi-ui.game #app.g-lobby-page{padding:0;margin-bottom:0}
.g-lobby3{position:relative;height:var(--lobby-h,calc(100dvh - 110px));min-height:400px;container-type:size;--feet:64%;--plat-w:min(44cqh,28cqw);--hero-h:54cqh}
.g-l-stage{position:absolute;inset:0}
.g-l-logo{position:absolute;left:0;top:0;width:clamp(110px,13cqw,190px);height:auto;pointer-events:none;filter:drop-shadow(0 4px 6px #0006)}
.g-l-plat{position:absolute;left:50%;top:var(--feet);width:var(--plat-w);height:auto;z-index:1;pointer-events:none}
.g-l-hero{position:absolute;left:50%;top:calc(var(--feet) + .5%);height:var(--hero-h);width:auto;max-width:none;z-index:2;pointer-events:none;filter:drop-shadow(0 12px 12px #0005)}
.g-l-fx{position:absolute;max-width:none;z-index:1;pointer-events:none;opacity:.95}
.g-sc{position:absolute;z-index:3;top:17%;display:flex;flex-direction:column;gap:clamp(18px,6cqh,56px);transform:translateX(-50%)}
.g-sc.left{left:26%}.g-sc.right{left:74%}
.g-shortcut2{position:relative;display:grid;place-items:center;width:clamp(78px,min(10cqw,19cqh),150px);aspect-ratio:936/923;padding:0;border:0;background:none;cursor:pointer;transition:transform .12s}
.g-shortcut2:active{transform:translateY(3px)}
.g-shortcut2>img{grid-area:1/1}
.g-sc-socket{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px #0006)}
.g-sc-icon{width:66%;height:66%;object-fit:contain;transform:translateY(-6%)}
.g-sc-label{position:absolute;left:50%;bottom:-16%;transform:translateX(-50%);display:grid;place-items:center;min-width:112%;aspect-ratio:1811/425;padding:0 10px;background:var(--home-label-pill) center/100% 100% no-repeat;color:var(--g-indigo);font-weight:900;font-size:clamp(12px,1.2cqw,16px);white-space:nowrap}
.g-shortcut2 .adi-badge{position:absolute;top:2%;right:2%;left:auto}
/* today's work: arrows, the green card, the dots, then the progress box — one column at the bottom centre */
.g-play{position:absolute;left:50%;bottom:clamp(6px,1.5cqh,18px);transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(680px,94cqw)}
.g-play-row{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.2cqw,16px);width:100%}
.g-task{position:relative;flex:0 1 auto;width:min(480px,70cqw,calc(100cqh * .62));aspect-ratio:1915/534;display:flex;align-items:center;gap:10px;padding:0 6%;border:0;background:var(--home-task-green) center/contain no-repeat;color:var(--g-content);font:inherit;cursor:pointer;filter:drop-shadow(0 8px 12px #0006);transition:transform .12s}
.g-task:active{transform:translateY(3px)}
/* the card stays green whatever the state; a done item's circle turns white with a green tick */
.g-task.done .g-task-go{background:var(--g-content);border-color:var(--g-content);box-shadow:0 2px 4px #0b4a1f66}
.g-task.done .g-task-go svg{color:#22a04f}
/* recorded but waiting for approval: an amber token with the «sent» mark and an amber edge on the card — not the done tick */
.g-task.wait .g-task-go{background:var(--g-pending-solid);border-color:#fff3d0;box-shadow:0 2px 4px #5a3a0066}
.g-task.wait .g-task-go svg{color:#4a3000;fill:none}
.g-task.wait::after{content:"";position:absolute;inset:7% 3.2%;border:3px solid var(--g-pending-solid);border-radius:999px;pointer-events:none}
.g-task-go{flex-shrink:0;display:grid;place-items:center;height:58%;aspect-ratio:1;border-radius:50%;background:#ffffff2e;border:3px solid #ffffffcc}
.g-task-go svg{width:58%;height:58%;fill:var(--g-content);color:var(--g-content)}
.g-task-copy{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.3}
.g-task-copy b{max-width:100%;font-size:clamp(16px,min(2cqw,4cqh),26px);font-weight:900;text-shadow:0 2px 2px #0b4a1f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.adi-ui .g-task-copy small{color:#f2fff4;font-size:clamp(11px,min(1.1cqw,2.2cqh),14px);text-shadow:0 1px 1px #0b4a1f;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-arrow-round{flex-shrink:0;width:clamp(44px,min(5.6cqw,10cqh),72px);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;filter:drop-shadow(0 5px 6px #0006)}
.g-arrow-round img{width:100%;height:100%;object-fit:contain}
.g-arrow-round:disabled{opacity:.45;cursor:default;filter:grayscale(.4)}
/* each dot is a 24px target (WCAG 2.2 target size) around the same 12px dot */
.g-play-dots{display:flex;gap:0;padding:0 4px;border-radius:99px;background:#10284f99}
.g-play-dots button{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.g-play-dots button::before{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid var(--g-content);background:#ffffff55}
.g-play-dots button.done::before{background:#5fd07f}.g-play-dots button.wait::before{background:var(--g-pending-solid)}.g-play-dots button.on::before{background:#2fb4ff;transform:scale(1.2)}
.g-play-counter{margin:0;padding:2px 12px;border-radius:99px;background:#10284fcc;color:var(--g-content);font-weight:800;font-size:13px}
/* the progress box: title in the top band (10%–48%), the live fill and task markers on the groove (10%–90.5% × 52%–77%) */
.g-dayprog{position:relative;width:min(380px,74cqw,calc(100cqh * .52));aspect-ratio:1903/471;background:var(--mobile-today-progress-box) center/100% 100% no-repeat}
.g-dayprog b{position:absolute;left:8%;right:8%;top:9%;height:40%;display:grid;place-items:center;color:var(--g-indigo);font-size:clamp(11px,min(1.1cqw,2.4cqh),14px);font-weight:900;white-space:nowrap}
.g-dayprog-track{position:absolute;left:10%;right:9.5%;top:52%;height:25%;border-radius:99px;overflow:hidden}
.g-dayprog-track i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(180deg,#6fe08f,#2f9e57)}
.g-dayprog-track em{position:absolute;top:50%;width:16%;max-width:14px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--g-line-soft);box-shadow:inset 0 1px 2px #0003;font-style:normal}
.g-dayprog-track em.on{background:var(--g-content)}
.g-check{display:flex;align-items:center;gap:10px;justify-content:center;margin:6px 0;font-weight:800;color:var(--g-indigo)}.g-check input{width:24px;height:24px}
.g-state.good{background:var(--g-good-bg);color:var(--g-good)}
@media (max-width:767px){
 .g-lobby3{--feet:62%;--plat-w:76cqw;--hero-h:50cqh}
 .g-l-logo{width:clamp(96px,30cqw,130px)}
 .g-sc{top:21%;gap:clamp(16px,5cqh,34px)}.g-sc.left{left:14%}.g-sc.right{left:86%}
 .g-shortcut2{width:clamp(66px,21cqw,92px)}.g-sc-label{font-size:12px;min-width:120%}
 .g-play{width:100cqw}
 .g-task{width:min(66cqw,calc(100cqh * .6))}
 .g-dayprog{width:min(80cqw,calc(100cqh * .5))}
}
@media (min-width:768px) and (max-height:760px){.g-lobby3{--feet:58%;--hero-h:46cqh;--plat-w:min(38cqh,24cqw)}.g-sc{top:12%}}
@media (prefers-reduced-motion:reduce){.g-shortcut2,.g-task{transition:none}}
/* Shortcut proportions from the reference: the icon fills ~80% of its socket; the plaque is about as wide as the socket,
   a third of its height, overlapping its lower rim; drawn in code (cream face, gold rim) so it keeps that ratio. */
.g-sc-icon{width:80%;height:80%;transform:translateY(-2%)}
.g-sc-label{bottom:-20%;min-width:0;width:104%;aspect-ratio:auto;height:32%;padding:0 6px;border:2px solid #e3a92b;border-radius:999px;background:linear-gradient(180deg,var(--g-paper),#f6e6c4);box-shadow:inset 0 2px 0 var(--g-content),0 3px 0 #b97e1a,0 5px 8px #0004;font-size:clamp(11px,min(1.1cqw,2.1cqh),16px)}
@media (max-width:767px){
 .g-sc{top:21%;gap:clamp(28px,8cqh,52px)}.g-sc.left{left:13.5%}.g-sc.right{left:86.5%}
 .g-shortcut2{width:clamp(66px,19.5cqw,84px)}
 .g-sc-label{font-size:clamp(11px,3.4cqw,14px);width:100%}
}
/* fixes after measuring: socket fills its button; badge stays a small circle; streak sits before mail on wide screens;
   the scene stays fixed to the viewport (no strip at the bottom); phone top bar is one row with the streak below it. */
.g-shortcut2{display:block}
.g-shortcut2 .g-sc-socket{position:absolute;inset:0;width:100%;height:100%}
.g-shortcut2 .g-sc-icon{position:absolute;left:10%;top:8%;width:80%;height:80%;transform:none}
body.adi-ui .g-shortcut2 .adi-badge{top:0;right:0;left:auto;width:auto}
@media (min-width:768px){body.adi-ui.game .adi-pills .g-ctr.coin{order:1}body.adi-ui.game .adi-pills .g-ctr.streak{order:2}body.adi-ui.game .adi-pills .adi-review{order:3}body.adi-ui.game .adi-pills .g-rbtn{order:4}}
body.adi-ui.game.g-noscroll{background-attachment:fixed;min-height:100dvh}
@media (max-width:767px){
 body.adi-ui.game:not(.parent-mode) .top{flex-wrap:nowrap!important;justify-content:space-between}
 body.adi-ui.game .top .stats,body.adi-ui.game .adi-pills{max-width:none;flex:0 1 auto}
 body.adi-ui.game .adi-avatar.framed{width:clamp(40px,11.5vw,50px);height:clamp(40px,11.5vw,50px)}
 .g-lvl-star{width:clamp(32px,9vw,40px);margin-right:-11px}
 .g-xp{width:clamp(74px,22vw,104px)}
 .g-ctr{height:clamp(24px,7vw,30px)}
 .g-rbtn{width:clamp(28px,8.2vw,36px)}
}
/* the rail fits short screens; the XP number keeps clear of the star */
@media (min-width:768px) and (max-height:820px){body.adi-ui.game #sidebar .adi-tabs{gap:4px;padding:8px 8px;border-width:34px 0}body.adi-ui.game #sidebar .adi-tab{min-height:calc((100dvh - 150px)/5.4);padding-top:10%}body.adi-ui.game #sidebar .adi-tab img{width:clamp(40px,7dvh,64px);height:clamp(40px,7dvh,64px)}}
.g-xp b{padding-left:18%}

/* Desktop rail: the selected item's content moves down with its tile so the icon sits inside the purple face. */
/* Phone dock: home's purple tile is fixed — same size every time, bottom level with the bottom of the two halves, its
   sides covering their inner ends. Any other selected item shows by a larger, raised icon and a gold label. */
@media (max-width:767px){
 .adi-tab-hi{display:none}
 body.adi-ui.game #sidebar .adi-tab[style*="--dock:3"]{bottom:0;margin:0;width:22%;height:auto;max-height:none;aspect-ratio:970/1220;padding:4px 0 10px;justify-content:center;background:var(--home-nav-tile-active) center/100% 100% no-repeat!important;filter:drop-shadow(0 3px 4px #0005);z-index:2}
 body.adi-ui.game #sidebar .adi-tab[style*="--dock:3"] img{width:64%;height:auto;aspect-ratio:1;margin:0;transform:none}
 body.adi-ui.game #sidebar .adi-tab[style*="--dock:3"] span{margin-top:2px;font-size:14px}
 body.adi-ui.game #sidebar .adi-tab.active:not([style*="--dock:3"]) img{transform:scale(1.25) translateY(-4px)}
 body.adi-ui.game #sidebar .adi-tab.active:not([style*="--dock:3"]) span{color:var(--g-gold-soft)}
 body.adi-ui.game #sidebar .adi-tab:not(.active) img{transform:none}
}
@media (max-width:767px){
 body.adi-ui.game #sidebar,body.adi-ui.game #sidebar .adi-tabs{overflow:visible!important}
}

/* HUD, one size for every counter: XP, coins, gems and streak share the coin counter's capsule (width --hud-w, aspect
   1589/503). The XP track and the gem counter are drawn as that same capsule (navy inside, gold rim) since there is no
   art of that shape for them; the level star and the gem sit where the coin sits on its counter. */
body.adi-ui.game{--hud-w:clamp(150px,12vw,186px)}
body.adi-ui.game .g-lvl{display:block;width:var(--hud-w);aspect-ratio:1589/503}
body.adi-ui.game .g-lvl-star{position:absolute;left:0;top:50%;height:112%;width:auto;aspect-ratio:992/952;margin:0;transform:translateY(-50%)}
body.adi-ui.game .g-xp,body.adi-ui.game .g-ctr.gem::before{position:absolute;left:20%;right:1%;top:12%;bottom:9%;width:auto;aspect-ratio:auto;box-sizing:border-box;border:3px solid transparent;border-radius:99px;background:linear-gradient(#152457,#1b2d68) padding-box,linear-gradient(#fde74a,#f5b316 55%,#c8650e) border-box;box-shadow:0 2px 3px #0005}
body.adi-ui.game .g-xp i{inset:2px;border-radius:99px;background:linear-gradient(180deg,#84e6ff,#1d9fe3)}
body.adi-ui.game .g-xp b{padding-left:18%;font-size:clamp(12px,1vw,15px)}
body.adi-ui.game .g-ctr{width:var(--hud-w);height:auto}
body.adi-ui.game .g-ctr.coin,body.adi-ui.game .g-ctr.gem{aspect-ratio:1589/503}
body.adi-ui.game .g-ctr.streak{aspect-ratio:1748/558}
body.adi-ui.game .g-ctr.gem{background:none}
body.adi-ui.game .g-ctr.gem::before{content:""}
body.adi-ui.game .g-ctr.gem img{position:absolute;left:1%;top:0;height:100%;width:auto;aspect-ratio:1;filter:drop-shadow(0 2px 2px #0006)}
body.adi-ui.game .g-ctr b{font-size:clamp(13px,1.1vw,16px)}
@media (min-width:768px){
 body.adi-ui.game .adi-pills .g-ctr.coin{order:1}body.adi-ui.game .adi-pills .g-ctr.gem{order:2}body.adi-ui.game .adi-pills .g-ctr.streak{order:3}
 body.adi-ui.game .adi-pills .adi-review{order:4}body.adi-ui.game .adi-pills .g-rbtn{order:5}
}
/* Phone: one grid — avatar over two rows; XP and coins on the first row with mail and settings, gems and the streak
   right under them in the same two columns (a parent's review button under mail and settings, the child picker last). */
@media (max-width:767px){
 body.adi-ui.game .top{display:grid!important;grid-template-columns:auto 1fr 1fr auto auto;grid-auto-rows:auto;align-items:center;gap:5px;--hud-w:100%}
 body.adi-ui.game .top .crumb,body.adi-ui.game .top .stats,body.adi-ui.game .adi-who,body.adi-ui.game .adi-pills{display:contents}
 body.adi-ui.game .adi-pills::after{content:none}
 body.adi-ui.game .top .adi-avatar.framed{grid-area:1/1/3/2;width:clamp(48px,15vw,60px);height:clamp(48px,15vw,60px)}
 body.adi-ui.game .top .g-lvl{grid-area:1/2;min-width:0}
 body.adi-ui.game .top .g-ctr.coin{grid-area:1/3}
 body.adi-ui.game .top .g-ctr.gem{grid-area:2/2}
 body.adi-ui.game .top .g-ctr.streak{grid-area:2/3;margin:0}
 body.adi-ui.game .top .g-rbtn{grid-row:1;width:clamp(30px,9vw,36px)}
 body.adi-ui.game .top .adi-review{grid-area:2/4/3/6;justify-self:center}
 body.adi-ui.game .top .adi-child{grid-area:3/1/4/-1;justify-self:end}
 body.adi-ui.game .top .g-ctr,body.adi-ui.game .top .g-lvl{min-width:0}
 body.adi-ui.game .g-xp b{font-size:12px}body.adi-ui.game .g-ctr b{font-size:13px}
}

/* Phone dock: both halves are the left art (the right one mirrored) — same width, same shape — grown in height by a
   nine-slice (the wave and the bottom rim kept, only the straight middle band stretched) so the icons sit inside. */
@media (max-width:767px){
 body.adi-ui.game #sidebar .adi-tabs{height:calc(21vw + 8px)}
 body.adi-ui.game #sidebar .adi-tabs::before,body.adi-ui.game #sidebar .adi-tabs::after{width:44%;height:21vw;aspect-ratio:auto;box-sizing:border-box;background:none!important;border-style:solid;border-width:5.5vw 4.1vw 3.45vw 2.75vw;border-image:var(--mobile-nav-joined-left) 80 60 50 40 fill stretch}
 body.adi-ui.game #sidebar .adi-tabs::after{transform:scaleX(-1)}
 body.adi-ui.game #sidebar .adi-tab:not([style*="--dock:3"]){bottom:0;height:21vw;max-height:none;aspect-ratio:auto;padding:0 0 calc(3.45vw + 1px)}
 body.adi-ui.game #sidebar .adi-tab:not([style*="--dock:3"]) img{width:12.5vw;height:12.5vw}
 body.adi-ui.game #sidebar .adi-tab[style*="--dock:4"]{left:68.7%}
}

/* Today's progress: a slim plaque like the reference — narrower and lower, small title, thin groove. */
.g-dayprog{width:min(300px,52cqw,calc(100cqh * .42));aspect-ratio:4.7}
.g-dayprog b{font-size:clamp(10px,min(.95cqw,2.1cqh),13px)}
@media (max-width:767px){.g-dayprog{width:min(240px,60cqw)}.g-dayprog b{font-size:11px}}

/* Desktop: the page keeps its scrollbar space whether or not it scrolls, so moving between sections never shifts it. */
html:has(>body.adi-ui.game){scrollbar-gutter:stable}

/* HUD rims: the drawn capsules (XP, gems) take the coin art's thick rim — about a tenth of the counter's height
   (3.3% of its width) with the same dark outer edge — so all four counters match on every screen. */
body.adi-ui.game .g-lvl,body.adi-ui.game .g-ctr.gem{container-type:inline-size}
body.adi-ui.game .g-xp,body.adi-ui.game .g-ctr.gem::before{border-width:3.3cqw;box-shadow:0 0 0 1px #8a4a0a,0 2px 3px #0005}
body.adi-ui.game .g-xp i{inset:1px}
@media (min-width:768px){body.adi-ui.game .top .adi-avatar.framed{width:74px;height:74px}}
/* Phone: two rows — XP and the streak on top, gems and coins below (left to right); the bell and mail side by side at the
   end of the first row and settings centred under them (each button its own cell: they used to share 1/4 and overlap). */
@media (max-width:767px){
 body.adi-ui.game .top{grid-template-columns:auto minmax(0,190px) minmax(0,190px) auto auto;justify-content:space-between;column-gap:4px}
 body.adi-ui.game .top .adi-avatar.framed{width:clamp(54px,18vw,70px);height:clamp(54px,18vw,70px)}
 body.adi-ui.game .top .g-lvl{grid-area:1/2}
 body.adi-ui.game .top .g-ctr.streak{grid-area:1/3}
 body.adi-ui.game .top .g-ctr.gem{grid-area:2/2}
 body.adi-ui.game .top .g-ctr.coin{grid-area:2/3}
 body.adi-ui.game .top .g-rbtn{grid-area:auto;width:clamp(30px,8.6vw,36px)}
 body.adi-ui.game .top .g-bell{grid-area:1/4}body.adi-ui.game .top .g-mail{grid-area:1/5}
 body.adi-ui.game .top .g-rbtn .adi-badge{top:-9px;right:-9px;left:auto;min-width:18px;height:18px;padding:0 4px;line-height:18px;box-shadow:0 0 0 2px var(--g-indigo-deep)}body.adi-ui.game .top .g-settings{grid-area:2/4/3/6;justify-self:center}
 body.adi-ui.game .top .adi-review{grid-area:3/3/4/6;justify-self:end}
 body.adi-ui.game .top .adi-child{grid-area:3/1/4/3;justify-self:start}
}

/* Reward effects (reward-fx.js): one fixed layer over everything, never taking input; while an effect plays the HUD sits
   above an open window so its counters can be seen counting up. */
#rfx-layer{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.rfx-img{position:absolute;left:0;top:0;width:32px;height:32px;background:center/contain no-repeat;filter:drop-shadow(0 0 4px #ffcb4a66);will-change:transform,opacity}
.rfx-spark{position:absolute;left:0;top:0;width:6px;height:6px;border-radius:2px;background:var(--rfx-spark);box-shadow:0 0 9px var(--rfx-glow);will-change:transform,opacity}
body.rfx-on .top{position:relative;z-index:61}

/* Readability and contrast (ui-ux-pro-max review): no running text under 12px; white text on the blue and purple
   selected pills gets a soft dark edge so it stays legible on the light top of their gradient; notification red and
   the lesson number reach 4.5:1. */
.g-book-meter small{font-size:12px;line-height:14px}
.g-level-chip small,.g-socket small{font-size:12px}
.g-plate b{font-size:clamp(12px,1.15vw,15px)}.g-plate small{font-size:clamp(12px,.95vw,13px)}
body.adi-ui .g-task-copy small{font-size:clamp(12px,min(1.1cqw,2.2cqh),14px)}
.g-dayprog b{font-size:clamp(12px,min(.95cqw,2.1cqh),13px)}
@media (max-width:767px){.g-dayprog b{font-size:12px}}
.g-sc-label{font-size:clamp(12px,3.4cqw,14px)}
body.adi-ui .caption{font-size:12px}

body.adi-ui .adi-badge,body.adi-ui.game #sidebar .adi-tab .adi-badge{background:var(--g-badge)}
body.adi-ui .lesson-number{color:#6b45a3}
.g-state svg{width:1.15em;height:1.15em;vertical-align:-.22em;margin-inline-end:5px}
/* the base sheets still carry 9–11px helper text (lesson rows, plan days, scope picker, streak steps): 12px floor */
body.adi-ui .lesson small,body.adi-ui .book-cover small,body.adi-ui .lesson-row small,body.adi-ui .plan small,body.adi-ui .tiles small,body.adi-ui .mission small,body.adi-ui .child-item small,body.adi-ui .streak-step small,body.adi-ui .scope-expand small,body.adi-ui .scope-leaf small,body.adi-ui .mini,body.adi-ui .day-actions .mini{font-size:12px}
/* phone: mail and settings keep their 35px art but answer a 45×46 touch (the native-app minimum) */
@media (max-width:767px){body.adi-ui.game .top .g-rbtn::after{content:"";position:absolute;inset:-2px -5px}}
/* Streak: an earned day keeps the very same socket art, only turned green (the coin, chest and tick are turned back to
   their own colours); helper text stays readable on every socket. */
.g-socket.earned{border-image-source:var(--skin-streak-socket);border-color:transparent;background:none;border-radius:0;box-shadow:none;isolation:isolate;filter:drop-shadow(0 0 6px #5fd07f99)}
/* only the blue face inside the gold rim takes the green (colour blend keeps the art's light and texture) */
.g-socket.earned::before{content:"";position:absolute;inset:-18px 6px -12px;border-radius:12px 12px 9px 9px;background:#1fae55;mix-blend-mode:color;pointer-events:none}
.g-socket.earned>*{position:relative;z-index:1}.g-socket.earned>.g-socket-day,.g-socket.earned>.g-socket-mark{position:absolute}
.g-socket.future{opacity:.8}
.g-socket b,.g-socket small{text-shadow:0 1px 2px #0b2a55cc}body.adi-ui .g-socket small{color:var(--g-content);opacity:1}
/* the ability card in its own window: icon and text on top, then the meter and the action across the full width */
.g-ab-modal .g-ab-detail{margin:0;box-shadow:none}
.g-ab-modal .g-ab-detail-main{grid-template-columns:auto 1fr}
.g-ab-modal .g-ab-detail-main>.g-meter,.g-ab-modal .g-ab-detail .g-btn{grid-column:1/-1;width:100%;min-width:0}

/* return for revision: quick reasons and the reason shown on the returned task */
.g-return-hints{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}.g-return-hints .g-chip{font-size:13px}
.task-reason{display:block;margin-top:3px;color:#a3263d;font-weight:700}
/* parent inbox: one card, a section per kind, inline actions */
.g-inbox{margin:4px 0 14px;padding:14px 16px;border-radius:20px;background:var(--g-content,var(--g-paper));border:2px solid var(--g-gold);box-shadow:0 8px 20px #0003}
.g-inbox.done{padding:10px 16px;color:var(--g-good,#1d7a3e);text-align:center}
.g-inbox h2{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:var(--g-indigo);font-size:19px}
body.adi-ui .g-inbox h2 .adi-badge{position:static;display:inline-block}
.g-inbox h3{margin:12px 0 6px;color:var(--g-indigo);font-size:15px}
.g-inbox-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.g-inbox-list li,.g-inbox-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 10px;border-radius:14px;background:var(--g-content);border:1px solid var(--g-line)}
.g-inbox-list li>span:first-child{display:flex;flex-direction:column}.g-inbox-list small{color:var(--g-muted)}
.g-inbox .missions{display:grid;gap:6px}

/* the app's own quiz start / hand-in sheets (the hand-in one sits over the open quiz) */
body.adi-ui .modal-wrap.over-quiz{z-index:70}
.g-quiz-start{display:flex;flex-direction:column;gap:10px;text-align:center}.g-quiz-start h2{margin:0;color:var(--g-indigo)}
.g-facts{list-style:none;display:flex;justify-content:center;gap:10px;margin:4px 0;padding:0}
.g-facts li{display:flex;flex-direction:column;min-width:78px;padding:8px 10px;border-radius:14px;background:var(--g-content);border:1px solid var(--g-line)}
.g-facts b{font-size:22px;color:var(--g-indigo)}.g-facts span{font-size:13px;color:var(--g-muted)}
/* Free-practice shortcut beside the day list (S01). */
.g-free-card{display:flex;align-items:center;gap:10px;margin:6px 0 4px;padding:8px 12px;border-radius:var(--g-radius-s);background:var(--g-accent-soft);border:1px solid #bcd7f2}
.g-free-card img{width:44px;height:44px;object-fit:contain;flex-shrink:0}.g-free-copy{flex:1;min-width:0;display:flex;flex-direction:column}.g-free-copy small{color:var(--g-muted)}
.g-retry{margin-bottom:4px}
/* Notification center (public/notify.js): bell socket in the HUD and the list window. */
.notif-bell{position:relative;display:inline-grid;place-items:center;cursor:pointer}
.notif-bell svg{width:64%;height:64%;fill:#ffe6a8;stroke:#7a4b12;stroke-width:1.4;stroke-linejoin:round}
.g-rbtn.g-bell{border-radius:50%;background:radial-gradient(circle at 50% 35%,var(--g-blue-hi) 0,var(--g-blue-edge) 80%);border:3px solid var(--g-gold);box-shadow:0 3px 0 var(--g-navy-ink),0 3px 6px #0006}
.notif-bell:focus-visible{outline:3px solid var(--g-focus-on-dark);outline-offset:2px}
.notif-panel{display:grid;gap:12px}.notif-tools{display:flex;justify-content:flex-end;min-height:0}
.notif-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.notif-item{display:grid;gap:3px;width:100%;text-align:right;padding:10px 12px;border-radius:12px;border:1px solid #d9c9a4;background:var(--g-paper);color:var(--g-ink);font:inherit;cursor:pointer}
.notif-item.unread{border-color:var(--g-gold-deep,var(--g-gold-deep));background:var(--g-amber-bg);box-shadow:inset -4px 0 0 var(--g-gold,var(--g-gold))}
.notif-item b{font-size:15px}.notif-item span{font-size:13px;color:var(--g-muted)}.notif-item small{font-size:12px;color:var(--g-muted)}.notif-item small i{font-style:normal;color:var(--g-bad);font-weight:800}
.notif-item:focus-visible{outline:3px solid var(--g-focus);outline-offset:2px}
.notif-empty,.notif-quiet{margin:0;color:var(--g-muted);font-size:14px}
.notif-quiet-form{border-top:1px solid var(--g-line);padding-top:10px}.notif-quiet-form summary{cursor:pointer;font-weight:800}
.notif-quiet-times{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0}.notif-quiet-times input{font:inherit;padding:6px 8px;border-radius:8px;border:1px solid #c9b78f}
.g-install{display:flex;margin:14px auto 0;min-width:180px}
.g-streak-held{display:block;color:var(--g-muted);font-weight:700;font-size:12px}
/* Medal hall views and goals (design 02 §14.4): summary, near goals with «ادامه بده», view chips, search */
.g-hall-summary{max-width:760px;margin:0 auto 14px}.g-hall-summary .g-cab-title{color:var(--g-indigo);margin:8px 4px 6px}
.g-goals{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.g-goal{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:var(--g-paper);border:2px solid var(--g-frame);color:var(--g-indigo)}
.g-goal-medal{border:0;background:none;padding:0;cursor:pointer;width:64px;height:64px}.g-goal-medal .track-art,.g-goal-medal .medal-art{width:64px;height:64px}
.g-goal-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.g-goal-copy small{color:var(--g-muted);line-height:1.7}
.g-goal .medal-meter{display:block;height:7px;border-radius:5px;background:var(--g-accent-soft);overflow:hidden}.g-goal .medal-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--g-accent),#62c08e)}
.g-goal-hide{border:0;background:none;color:var(--g-muted);font:inherit;font-size:20px;cursor:pointer;min-width:36px;min-height:36px}
.g-hall-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}.g-hall-tools .g-chips{margin:0}
.g-medal-search{min-height:40px;padding:6px 14px;border:2px solid var(--g-frame);border-radius:99px;font:inherit;min-width:0;flex:1 1 180px;max-width:280px}
.g-hall.flat{grid-template-columns:1fr}
@media (max-width:767px){.g-goal{grid-template-columns:52px 1fr}.g-goal>.btn{grid-column:1/-1}.g-goal-medal,.g-goal-medal .track-art{width:52px;height:52px}.g-medal-search{max-width:none}}
/* Showcase card and honor title (lib/showcase.ts) */
.g-honor{margin:0 0 8px;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}.g-honor small{color:var(--g-muted)}
.g-title-chip{display:inline-block;padding:2px 10px;border-radius:99px;background:linear-gradient(180deg,#ffe7a3,var(--g-gold));color:#4a2a00;font-style:normal;font-weight:800;font-size:12px;border:1px solid #c98a1c}
.g-title-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.g-profile{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:2px;font-weight:400}.g-profile-medal .track-art{width:26px;height:26px}.g-profile-medal .medal-emoji{font-size:18px}

/* Home medal goal chip (lib/medal-goals.ts) */
.g-goalchip{position:absolute;right:10px;top:10px;z-index:4;display:flex;align-items:center;gap:8px;max-width:min(46%,300px);min-height:44px;padding:6px 12px;border-radius:16px;border:2px solid var(--g-gold);background:linear-gradient(180deg,var(--g-paper),#f6e3b8);color:var(--g-indigo);font:inherit;text-align:start;cursor:pointer;box-shadow:0 4px 10px #0004}
.g-goalchip-copy{display:flex;flex-direction:column;min-width:0}.g-goalchip-copy b,.g-goalchip-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.g-goalchip-copy small{color:var(--g-muted);font-size:12px}
.g-goalchip .adi-badge{position:static}
.g-goal-acts{display:flex;flex-direction:column;gap:4px;align-items:center}
@media (max-width:767px){.g-goalchip{max-width:56%;padding:4px 10px;min-height:40px}.g-goal-acts{grid-column:1/-1;flex-direction:row;justify-content:space-between}}
/* Character unlock ways (lib/characters.ts ACHIEVEMENT_UNLOCKS) */
.g-ways{width:100%;display:flex;flex-direction:column;gap:6px}.g-ways ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.g-ways li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 10px;border-radius:12px;background:var(--g-paper);border:1px solid var(--g-frame);color:var(--g-indigo);font-weight:700}
.g-ways li .medal-meter{flex:1 1 100%;display:block;height:7px;border-radius:5px;background:var(--g-accent-soft);overflow:hidden}.g-ways li .medal-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--g-accent),#62c08e)}.g-ways li small{color:var(--g-muted)}
/* Coins short: how many more and the real ways to earn them (questa.js coinHelp) */
.g-coin-help{margin-top:8px;padding:10px 12px;border-radius:14px;background:var(--g-paper);border:1px dashed #d9b46a;color:var(--g-indigo);text-align:start}
.g-coin-help ul{margin:6px 0;padding:0;list-style:none;display:grid;gap:4px}.g-coin-help .g-link{text-align:start;padding:2px 0}.g-coin-help small{color:var(--g-muted)}
.g-catalog .g-rewards{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.g-family-note{margin:4px 0 10px}
.g-ways li img{width:20px;height:20px;object-fit:contain}
/* board display rules (design 03 §12): period picker, gap row, footer */
.g-period-pick{min-height:40px;border-radius:12px;border:2px solid var(--g-line);padding:4px 10px;font:inherit;background:var(--g-content);color:var(--g-ink);max-width:100%}
.g-rank-gap{justify-content:center;color:var(--g-ink);opacity:.7;min-height:0;padding:2px}
.g-lb-foot{margin:4px 10px 16px}
.g-settle{margin:0 10px 12px;padding:10px 14px;border-radius:14px;background:var(--g-amber-bg);border:2px solid var(--g-gold);color:var(--g-ink);text-align:center}.g-settle.final{background:var(--g-good-bg);border-color:#3aa66a}
.g-rank-list li.zone-up{box-shadow:inset 4px 0 0 #3aa66a}.g-rank-list li.zone-down{box-shadow:inset 4px 0 0 #d9534f}
/* city: events, season and personal adventure (design 03 §5, §17–§18) */
.g-events{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin:-30px 10px 16px;position:relative;z-index:3}
.g-event{padding:0;overflow:hidden}.g-event-cover{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}.g-event-body{padding:12px 16px 16px}.g-event-body h3{margin:6px 0}
.g-adventure{margin:0 10px 16px}.g-adv-scene img{display:block;width:100%;height:auto;border-radius:14px}
.g-season{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}.g-season li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:#f6f3ff;border:1px solid var(--g-line)}
.g-season li>div{flex:1;min-width:0}.g-season li small{display:block;overflow-wrap:anywhere}.g-season li.locked{opacity:.6}.g-season li.done{background:var(--g-good-bg)}
.g-city-building{width:56px;height:56px;object-fit:contain;flex:none}.g-city-noart{display:grid;place-items:center;border-radius:12px;background:#e9e3ff;color:var(--g-indigo);font-size:24px}
@media (max-width:767px){.g-events{margin-top:-20px}}

/* «پیشنهاد هوش، تأیید انسان» (AI grading suggestion box and label) */
.ai-box{border:1px dashed var(--g-accent);border-radius:12px;padding:10px 12px;margin-top:8px;background:var(--g-accent-soft);color:var(--g-ink);line-height:1.9}.ai-box ul{margin:4px 0;padding-inline-start:18px}.ai-box small{display:block;color:var(--g-muted)}.ai-box .row{gap:8px;margin-top:6px}.badge.ai-label{background:var(--g-accent-soft);color:var(--g-accent-ink)}

/* Ability powers (design 02 §8; lib/powers.ts) */
.g-powers .g-power-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}.g-power-list li{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:14px;background:rgba(255,255,255,.72)}.g-power-list li.on{box-shadow:0 0 0 2px #17a36a inset}.g-power-list li.locked{opacity:.68}.g-power-list li>img{width:40px;height:40px;flex:none}.g-power-list li>div{flex:1;min-width:0}.g-power-list p{margin:2px 0;font-size:13px;line-height:1.8}.g-power-act{display:flex;flex-direction:column;align-items:center;gap:4px}
.g-power-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.g-power-btn img,.g-power-off img{width:24px;height:24px;vertical-align:middle}.g-power-off{font-size:12px;color:#5d5277;margin:0;line-height:1.8}.g-power-choices{display:grid;gap:8px;margin-top:10px}.g-design-choice{display:flex;align-items:center;gap:10px;justify-content:center}.g-design-choice img{width:56px;height:56px}
.g-clue,.g-story{display:block;margin-top:4px;color:#3d2f63;line-height:1.8}.g-discover{margin:8px 0}.g-discover ul{list-style:none;padding:0;margin:6px 0}.g-discover li{margin:6px 0}.g-discover p{margin:2px 0;font-size:13px}
.g-bonds{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.g-bond{padding:4px 10px;border-radius:999px;background:var(--g-accent-soft);color:#1d3d63;font-size:12px}.g-bond.gold{background:#fff1c9;color:#6b4a00;box-shadow:0 0 0 2px #e9b949 inset}
.g-design-b img{filter:hue-rotate(150deg) saturate(1.15)}.g-design-c img{filter:brightness(.78) hue-rotate(220deg) saturate(1.2)}
.g-power-btn small{color:inherit;opacity:.9;font-weight:600}

/* Realm (S17; lib/realm.ts) */
.g-realm{display:grid;gap:14px}.g-realm-card{padding:12px}.g-realm-world{position:relative;border-radius:16px;overflow:hidden;line-height:0;container-type:inline-size}.g-realm-bg{width:100%;height:auto;display:block}
.g-realm-building{position:absolute;width:21%;transform:translate(-50%,-94%);pointer-events:none}.g-realm-building img{width:100%;height:auto;filter:drop-shadow(0 6px 6px rgba(20,30,60,.35))}
.g-realm-empty{position:absolute;transform:translate(-50%,-100%);display:grid;place-items:center;text-align:center;min-width:16%;padding:6px 8px;border:2px dashed rgba(255,255,255,.9);border-radius:14px;background:rgba(28,36,84,.72);color:var(--g-content);line-height:1.5;font-size:clamp(9px,2.2cqi,13px)}.g-realm-empty small{font-size:.85em;color:var(--g-accent-soft)}
.g-realm-decor,.g-realm-slot{position:absolute;transform:translate(-50%,-70%);display:grid;place-items:center;width:clamp(34px,9cqi,64px);height:clamp(34px,9cqi,64px);border-radius:50%;font-size:clamp(18px,5.4cqi,38px);line-height:1;background:radial-gradient(circle at 50% 35%,var(--g-content),var(--g-line));box-shadow:0 4px 10px rgba(30,30,60,.35),0 0 0 3px #e7b84a inset}
.g-realm-slot{cursor:pointer;border:0;background:rgba(255,255,255,.55);box-shadow:0 0 0 3px var(--g-content) inset,0 2px 8px rgba(0,0,0,.3);color:var(--g-ink);font-weight:800;border:2px dashed var(--g-accent)}.g-realm-slot.full{background:radial-gradient(circle at 50% 35%,var(--g-content),var(--g-line));border-style:solid}.g-realm-slot:focus-visible{outline:3px solid var(--g-focus-on-dark);outline-offset:2px}
.g-realm-world.editing .g-realm-building{opacity:.85}
.g-realm-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 4px}.g-realm-bar small{flex:1 1 200px;color:var(--g-muted);line-height:1.8}
.g-realm-pick{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.g-realm-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:2px solid var(--g-accent-line);background:var(--g-content);color:var(--g-ink);font:inherit;cursor:pointer}.g-realm-chip.static{cursor:default}.g-realm-chip span{font-size:22px;line-height:1}.g-decor-glyph{display:grid;place-items:center;line-height:1;width:100%;height:100%}
.g-realm-who{display:flex;align-items:center;gap:10px;margin-bottom:10px}.g-realm-who img{width:56px;height:56px;border-radius:50%}.g-realm-who div{flex:1;display:grid}.g-realm-who small{color:var(--g-muted)}
.g-realm-people{list-style:none;padding:0;margin:0;display:grid;gap:8px}.g-realm-people li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.7)}.g-plain{margin:6px 0;padding-inline-start:18px;line-height:2}

/* ---------- Toast («پیام کوتاه»): above every window (z 90 > modal 60/70, reward fx 70, lightbox 80) and, on the phone,
   above the dock. Game skin: ivory card with the gold rim, a coloured edge for the state. ---------- */
body.adi-ui.gv #messages{position:fixed;inset:auto 0 0;z-index:90;display:flex;justify-content:center;pointer-events:none}
body.adi-ui.gv .toast{position:static;margin:0 12px 24px;max-width:min(520px,calc(100vw - 24px));padding:12px 18px;border-radius:18px;border:3px solid var(--g-gold);border-inline-start-width:10px;border-inline-start-color:var(--g-green);background:var(--g-content);color:var(--g-ink);font-size:15px;font-weight:800;line-height:1.7;box-shadow:0 10px 28px #0008;pointer-events:auto;animation:g-toast-in .22s ease-out}
body.adi-ui.gv .toast.error{border-inline-start-color:var(--g-bad);background:#fff7f8;color:#7a2230}
@keyframes g-toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:767px){body.adi-ui.gv .toast{margin-bottom:calc(112px + env(safe-area-inset-bottom));font-size:14px}}

/* ---------- Minimums (DESIGN-SYSTEM §1-5): every learner control answers a 44px touch, running text is ≥12px.
   Small art keeps its size; a transparent ::after widens the touch where the drawing must stay small. ---------- */
body.adi-ui.gv .btn.small,body.adi-ui.gv .g-btn.small,body.adi-ui.gv .g-link,body.adi-ui.gv .g-chip,body.adi-ui.gv .g-seg button,body.adi-ui.gv .g-tabs button,body.adi-ui.gv .g-medal-search,body.adi-ui.gv .g-period-pick,body.adi-ui.gv .g-goal-hide,body.adi-ui.gv .g-icon-btn{min-height:44px}
body.adi-ui.gv .g-icon-btn{min-width:44px}
body.adi-ui.gv .g-arrow{width:44px;height:44px}
@media (max-width:767px){body.adi-ui.gv .g-page-close{width:44px;height:44px}}
body.adi-ui.gv summary{padding-block:10px}
.g-play-dots button{width:28px;height:44px}.g-play-dots button::before{inset:16px 8px}
body.adi-ui.gv .task-check{position:relative}body.adi-ui.gv .task-check::after{content:"";position:absolute;inset:-5px}
@media (max-width:767px){body.adi-ui.game .top .g-rbtn::after{inset:-6px}
 body.adi-ui.game .top .g-lvl,body.adi-ui.game .top .g-ctr{position:relative}body.adi-ui.game .top .g-lvl::after,body.adi-ui.game .top button.g-ctr::after{content:"";position:absolute;inset:-6px 0}}
body.adi-ui .daily-task-copy small,body.adi-ui .profile-grid small,body.adi-ui .task-state,body.adi-ui .task-output,body.adi-ui .badge,.g-book-meter small,.g-level-chip small,.g-socket small,.g-day-school{font-size:12px}
body.adi-ui.game #sidebar .adi-tab span{font-size:12px}
.g-realm-empty{font-size:clamp(12px,2.2cqi,13px)}.g-realm-empty small{font-size:12px;color:#e3eaff;opacity:1}

/* A button whose request is under way (aria-busy + disabled, set by a11y.js): the disabled look, a slow pulse, the progress cursor. */
button[aria-busy=true],button[aria-busy=true]:disabled{cursor:progress;filter:none;opacity:1;animation:g-busy 1s ease-in-out infinite alternate}
@keyframes g-busy{from{opacity:1}to{opacity:.6}}

/* ---------- Sign-in and registration (body.auth-mode): the game backdrop and window instead of the old light/purple page ---------- */
body.learning-app.auth-mode{background:var(--g-indigo-deep);color:var(--g-ink)}
body.learning-app.auth-mode::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% -10%,#24b8c333,transparent 55%),linear-gradient(180deg,#10284fe6,#173b73d9 45%,#10284ff2),var(--g-scene,none) center/cover no-repeat}
body.learning-app.auth-mode .top{background:transparent;border:0;box-shadow:none}
body.learning-app.auth-mode .crumb{color:#dce8f8}
body.auth-mode .account-gate{background:transparent;border-radius:0;box-shadow:none;max-width:560px;margin:18px auto 30px}
body.auth-mode .account-gate h2,body.auth-mode .account-gate h3{color:var(--g-indigo)}
body.auth-mode .account-gate input:not([type=checkbox]):not([type=radio]),body.auth-mode .account-gate select{border:2px solid var(--g-accent-line);border-radius:var(--g-radius-s);background:#fff;color:var(--g-ink);min-height:48px;font:inherit}
body.auth-mode .account-gate input:focus,body.auth-mode .account-gate select:focus{outline:3px solid var(--g-focus);outline-offset:1px;border-color:var(--g-blue)}
body.auth-mode .account-gate fieldset{border:2px solid var(--g-line);border-radius:var(--g-radius-s);background:var(--g-ivory)}
body.auth-mode .account-gate a{color:var(--g-accent-ink);font-weight:700}
@media (max-width:767px){body.auth-mode .account-gate{margin:10px 6px 24px}}
body.learning-app.auth-mode #sidebar{background:linear-gradient(180deg,var(--g-indigo),var(--g-indigo-deep));border:0;border-inline-start:3px solid var(--g-gold);box-shadow:0 0 30px #0007;color:var(--g-on-dark)}
body.learning-app.auth-mode #sidebar :is(h2,b,strong){color:var(--g-on-dark)}body.learning-app.auth-mode #sidebar :is(p,small,span){color:#dce8f8}
body.learning-app.auth-mode .auth-side .ic{background:#ffffff1c;color:var(--g-gold-soft)}
body.learning-app.auth-mode #sidebar .card,body.learning-app.auth-mode #sidebar [class*="note"]{background:var(--g-ivory);border:2px solid var(--g-gold);color:var(--g-ink)}
body.learning-app.auth-mode #sidebar .card :is(p,small,span),body.learning-app.auth-mode #sidebar [class*="note"] :is(p,small,span){color:var(--g-ink)}

/* ---------- One component per job (DESIGN-SYSTEM §4): the variants that grew apart share one look ---------- */
/* Close button: one round blue button with the gold rim for windows, pages and cards. */
.g-page-close,body.adi-ui.gv .modal .close,.g-close{width:var(--g-close-size);height:var(--g-close-size);padding:0;display:grid;place-items:center;border-radius:50%;border:3px solid var(--g-gold);background:linear-gradient(180deg,var(--g-blue-hi),var(--g-blue-edge));color:var(--g-on-dark);font-size:24px;line-height:1;box-shadow:0 3px 0 var(--g-navy-ink),0 3px 6px #0006;cursor:pointer}
/* .g-book-tab keeps its own white text edge */
.g-book-tab.on{text-shadow:0 1px 2px var(--g-indigo-deep)}
/* Selection: tabs (.tabs, .g-seg, .g-tabs, .g-hall-tabs, .g-steps) and filter chips (.g-chip, .chip, .g-realm-chip) pick with the same blue fill and gold edge. */
:is(.g-chip.on,.g-hall-tabs button.on,.g-steps button[aria-selected=true],.g-seg button.on,.g-seg.light button.on,.g-tabs button.on,.g-realm-chip.on,body.adi-ui .chip.on,body.adi-ui.gv .tabs button.active,body.adi-ui.gv .tabs button[aria-selected=true]){background:var(--g-select-fill);border-color:var(--g-gold);color:var(--g-select-ink);box-shadow:inset 0 0 0 2px var(--g-gold);text-shadow:0 1px 2px var(--g-indigo-deep)}
/* Progress: one track and one fill (the HUD XP bar and the lobby day plaque keep their art). */
:is(.g-meter,.g-qbar,.medal-meter,body.adi-ui .line,body.adi-ui .daily-progress-track,.chat-progress){background:var(--g-meter-track);border-radius:var(--g-radius-pill);overflow:hidden}
:is(.g-meter,.g-qbar,.medal-meter,body.adi-ui .line,body.adi-ui .daily-progress-track,.chat-progress,.g-book-meter)>i{background:var(--g-meter-fill);border-radius:var(--g-radius-pill)}
:is(.medal-meter,.chat-progress,body.adi-ui .line,.g-qbar){height:var(--g-meter-h)}
/* Windows open with a short rise (180–220 ms, design handoff); «کاهش حرکت» turns it off (tokens.css). */
body.adi-ui.gv .modal,body.panel .modal,body.panel .admin-dialog{animation:g-modal-in var(--g-dur) var(--g-ease)}
body.adi-ui.gv .modal-wrap,body.panel .modal-wrap{animation:g-fade-in var(--g-dur) ease-out}