/* Semi-game UI kit, style A "Skyline Blocks" (design 06 §2-§3). Loaded after v2.css, before fallbacks.css.
   Game layer only: HUD, player card, quests, chest, loot cards, island path, boss banner. Study layer (q-card, notes, paper) stays calm. */
:root{
  --gm-coral:#FF6B5A;--gm-coral-d:#C8402F;--gm-coral-dd:#7A2E2A;--gm-lime:#B7F34A;--gm-lime-d:#2F6B3A;--gm-sun:#FFC94A;--gm-sun-d:#8F5A00;
  --gm-sky:#2272E6;--gm-sky-d:#1749A8;--gm-ink:#0B1626;--gm-stone:#F4F8FF;--gm-stone-2:#DCE9FA;--gm-edge:#2B6FC0;--gm-edge-d:#2B5CA8;
  --gm-seg:rgba(20,70,160,.16);--gm-chip:#FFFFFF;--gm-chip-ink:#10233F;--gm-chip-line:rgba(30,80,160,.18);
  --gm-px:var(--lg-font);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--gm-stone:#16273F;--gm-stone-2:#10233F;--gm-edge:#6AB6FF;--gm-edge-d:#0B1626;--gm-seg:rgba(150,200,255,.16);--gm-chip:#10233F;--gm-chip-ink:#E8F1FF;--gm-chip-line:rgba(150,200,255,.22)}}
:root[data-theme="dark"]{--gm-stone:#16273F;--gm-stone-2:#10233F;--gm-edge:#6AB6FF;--gm-edge-d:#0B1626;--gm-seg:rgba(150,200,255,.16);--gm-chip:#10233F;--gm-chip-ink:#E8F1FF;--gm-chip-line:rgba(150,200,255,.22)}

/* ---- primitives ---- */
.px{font-family:var(--gm-px);font-weight:600;letter-spacing:.02em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums}
.px-ico{display:inline-block;flex:none;line-height:0}.px-ico svg{display:block;image-rendering:auto;}
/* pixel 9-slice-like frame: 4 px stair-stepped edge via box-shadow (no radius) */
.px-frame{--pf:var(--gm-edge);border-radius:0;border:0;box-shadow:0 -4px 0 0 var(--pf),0 4px 0 0 var(--pf),-4px 0 0 0 var(--pf),4px 0 0 0 var(--pf),inset 0 4px 0 0 rgba(255,255,255,.55),inset 0 -4px 0 0 rgba(11,22,38,.12);margin:4px}
@media(max-width:820px){.hide-820{display:none!important}}

/* ---- top-bar HUD (drawNav) ---- */
.hud-strip{display:flex;align-items:center;gap:6px;min-width:0}
.hud-chip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px 0 6px;border-radius:12px;background:var(--gm-chip);border:1px solid var(--gm-chip-line);color:var(--gm-chip-ink);white-space:nowrap;box-shadow:0 2px 0 0 var(--gm-chip-line)}
.hud-chip .n,.hud-chip .lv{font-size:16px;line-height:1}
.hud-streak.cold .px-ico{filter:grayscale(1);opacity:.6}
.hud-xp{padding:0 10px}.hud-xp .lv{color:var(--bp-tint-ink)}
.hud-segs{display:inline-flex;gap:2px}.hud-segs i{width:10px;height:12px;background:var(--gm-seg);position:relative;overflow:hidden}
.hud-segs i.on,.xpbar i.on,.qsegs i.on{background:var(--gm-sky)}
.hud-segs i.half::after,.xpbar i.half::after,.qsegs i.half::after{content:"";position:absolute;inset:0;background:var(--gm-sky);transform-origin:left;transform:scaleX(var(--f,.5))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hud-segs i.on,:root:not([data-theme="light"]) .xpbar i.on{background:#6AB6FF}}
:root[data-theme="dark"] .hud-segs i.on,:root[data-theme="dark"] .xpbar i.on{background:#6AB6FF}
@media(max-width:560px){.hud-chip{padding:0 8px 0 4px;gap:4px}.hud-strip{gap:4px}.app-nav .brand .txt{display:none}}
@media(prefers-reduced-motion:no-preference){.hud-streak.lit .px-ico{animation:px-flick 1.2s steps(1,end) infinite}}
@keyframes px-flick{0%,100%{transform:translateY(0)}25%{transform:translateY(-1px)}50%{transform:translateY(0) scaleX(-1)}75%{transform:translateY(-1px) scaleX(-1)}}
/* avatar button: pixel headshot in the ring */
.avatar-btn .hs{position:absolute;inset:8px;display:grid;place-items:center;border-radius:10px;background:#CFE6FF;overflow:hidden}
.avatar-btn .hs>*{width:32px;height:32px;image-rendering:auto;}

/* ---- home: player card + quests row ---- */
.hud-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;margin-bottom:24px}
@media(max-width:1024px){.hud-row{grid-template-columns:1fr;gap:16px}}
.plcard{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--bp-r-card);border:1px solid var(--bp-glass-line);box-shadow:var(--bp-spec),var(--bp-shadow-1);color:var(--bp-ink)}
.pl-top{display:flex;gap:16px;align-items:flex-start}
.pl-portrait{flex:none;width:88px;height:88px;display:grid;place-items:center;background:linear-gradient(180deg,#6EC0FF,#DDF0FF);box-shadow:0 -4px 0 0 var(--gm-edge),0 4px 0 0 var(--gm-edge),-4px 0 0 0 var(--gm-edge),4px 0 0 0 var(--gm-edge);margin:4px}
.pl-portrait>*{width:64px;height:64px;image-rendering:auto;}
.pl-portrait{position:relative}.pl-portrait>.pl-pet{position:absolute;right:-10px;bottom:-4px;width:32px;height:42px}
.pl-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.pl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pl-name{margin:0;font:650 24px/1.1 var(--lg-font-display)}
.lv-badge{display:inline-flex;align-items:center;height:28px;padding:0 10px;background:var(--gm-sun);--pf:var(--gm-sun-d);color:#3A2600}
.lv-badge b{font-size:16px}
.xpbar{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}.xpbar i{height:14px;background:var(--gm-seg);position:relative;overflow:hidden}
.pl-sub{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.pl-xp{font-size:16px;color:var(--bp-tint-ink)}
.pchips{display:flex;gap:8px;flex-wrap:wrap}
.pchip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 6px;border-radius:12px;background:var(--gm-chip);border:1px solid var(--gm-chip-line);color:var(--gm-chip-ink);box-shadow:0 2px 0 0 var(--gm-chip-line)}
.pchip b{font-size:16px}.pchip .pl{font-size:14px;color:var(--bp-ink-2)}
.pchip.cold .px-ico{filter:grayscale(1);opacity:.6}
.pl-facts{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:15px;color:var(--bp-ink-2)}.pl-facts b{color:var(--bp-ink);font-weight:650}
@media(max-width:560px){.pl-portrait{width:72px;height:72px}.pl-portrait>*{width:48px;height:48px}.pl-name{font-size:20px}.pchip .pl{display:none}}

/* loot-style item card */
.icard{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--gm-stone);color:var(--bp-ink)}
.icard.t-common{--pf:#8A90A0}.icard.t-rare{--pf:#2272E6}.icard.t-epic{--pf:#3FD6A0}.icard.t-legendary{--pf:#E0A21B}
.ithumb{display:grid;place-items:center;width:48px;height:48px;background:var(--gm-seg)}
.icard:not(.compact) .ithumb{width:64px;height:64px}
.ibody{display:flex;flex-direction:column;gap:2px;min-width:0}
.itier{font:700 12px/1.2 var(--lg-font);letter-spacing:.06em;text-transform:uppercase;color:var(--bp-ink-2)}
.iname{font:650 16px/1.25 var(--lg-font-display)}
.icost{display:inline-flex;align-items:center;gap:4px}.icost b{font-size:16px}

/* quest log */
.quests{display:flex;flex-direction:column;gap:12px}
.qhead{display:flex;align-items:center;justify-content:space-between}
.qh{margin:0;font-size:24px;color:var(--bp-ink)}.qcount{font-size:16px;color:var(--bp-tint-ink)}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.qrow{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:var(--bp-r-inner);background:var(--bp-paper-2)}
.qtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.qt{font-weight:600;font-size:15px;line-height:1.3}
.qmeta{display:flex;align-items:center;gap:10px}.qmeta b{font-size:16px;min-width:3ch}
.qsegs{display:inline-grid;grid-template-columns:repeat(4,18px);gap:2px}.qsegs i{height:10px;background:var(--gm-seg);position:relative;overflow:hidden}
.qrow.done .qsegs i{background:var(--bp-pos)}
.qrew,.qdone{display:inline-flex;align-items:center;gap:4px;font:600 14px var(--lg-font);color:var(--bp-ink-2);white-space:nowrap}
.qdone{color:var(--bp-pos)}
.chest{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--bp-r-inner);border:2px dashed var(--bp-line-strong);background:var(--bp-paper)}
.chest.ready{border-style:solid;border-color:var(--gm-sun-d);background:var(--bp-warn-soft)}
.chest-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:15px}
.chest-ico{display:grid;place-items:center;width:56px;height:56px}
.chest-ico.shake{animation:px-shake .3s steps(1,end) 2}
@keyframes px-shake{0%{transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.chest-ico.shake{animation:none}}

/* reward pop */
.px-pop{position:fixed;z-index:200;pointer-events:none;display:inline-flex;align-items:center;gap:4px;transform:translate(-50%,0);font:600 24px/1 var(--gm-px);-webkit-font-smoothing:antialiased;color:#fff;text-shadow:2px 0 0 #0B1626,-2px 0 0 #0B1626,0 1px 2px rgba(16, 35, 63, .35),0 -2px 0 #0B1626}

/* ---- island path (sectionpage.js): same <ol class="lpath"> + ARIA, pixel tiles instead of glass discs ---- */
.isl-head{position:relative;margin:16px 0 8px;overflow:hidden;border-radius:20px;border:1px solid var(--bp-line)}
.isl-scene{display:block;width:100%;height:120px}
.isl-label{position:absolute;left:12px;bottom:12px;right:12px;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.isl-label>span{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;background:#FFFFFF;color:#10233F;box-shadow:0 -2px 0 0 #2B6FC0,0 2px 0 0 #2B6FC0,-2px 0 0 0 #2B6FC0,2px 0 0 0 #2B6FC0}
.isl-num,.isl-count{font-size:16px}.isl-title{font:600 15px/1.2 var(--lg-font)}
.isl-count{margin-left:auto}
.lpath .path-spine,.pathwrap .path-spine{left:35px;width:10px;border-radius:14px;-webkit-mask:repeating-linear-gradient(180deg,#000 0 10px,transparent 10px 18px);mask:repeating-linear-gradient(180deg,#000 0 10px,transparent 10px 18px);background:var(--gm-stone-2)}
.pathwrap .path-fill{border-radius:14px;background:var(--gm-lime-d)}
.lpath .disc{width:56px;height:56px;margin:4px;border:0;border-radius:14px;--pf:var(--gm-edge);background:var(--gm-stone);color:var(--bp-ink);font:600 24px/1 var(--gm-px);-webkit-font-smoothing:antialiased;
  box-shadow:0 -4px 0 0 var(--pf),0 4px 0 0 var(--pf),-4px 0 0 0 var(--pf),4px 0 0 0 var(--pf),0 10px 0 0 var(--gm-edge-d),inset 0 4px 0 0 rgba(255,255,255,.6),inset 0 -4px 0 0 rgba(11,22,38,.12)}
.lpath .disc .ring-wrap{display:none}
.lpath .pnode.cp .disc{border-radius:14px}
.lpath .pnode.is-in_progress .disc{color:var(--bp-tint-ink)}
.lpath .pnode.is-in_progress .disc::after{content:"";position:absolute;left:4px;right:4px;bottom:4px;height:6px;background:var(--gm-sky);transform-origin:left;transform:scaleX(var(--p,0))}
.lpath .pnode.is-current .disc{width:64px;height:64px;--pf:var(--gm-coral-dd);background:var(--gm-coral-d);color:#fff;transform:translateY(-4px);
  box-shadow:0 -4px 0 0 var(--pf),0 4px 0 0 var(--pf),-4px 0 0 0 var(--pf),4px 0 0 0 var(--pf),0 10px 0 0 #4A1A17,inset 0 4px 0 0 rgba(255,255,255,.35),0 0 0 10px rgba(255,107,90,.22)}
.lpath .pnode.is-mastered .disc{--pf:var(--gm-sun-d);background:var(--gm-sun);color:#3A2600}
.lpath .pnode.is-done .disc{--pf:var(--gm-lime-d);background:#DDF7C4;color:#1E4A26}
.lpath .pnode.is-locked .disc{--pf:#8A90A0;background:#E3E6EC;color:#4A4F5C;border-style:none}
.lpath .pnode.is-locked .disc::before{content:"";position:absolute;left:10px;top:8px;width:3px;height:12px;background:#8A90A0;box-shadow:3px 9px 0 0 #8A90A0,6px 12px 0 0 #8A90A0}
.lpath .pnode[data-id="test"] .disc{--pf:var(--gm-coral-d);background:#10233F;color:#FFB3A6}
.lpath .pnode .disc .px-ico{position:relative;z-index:1}
.tile-hero{position:absolute;left:50%;top:-34px;z-index:2;transform:translateX(-50%);width:32px;height:32px;pointer-events:none}
.tile-hero>*{width:32px;height:32px;image-rendering:auto;}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .lpath .pnode.is-locked .disc{background:#2A2D34;color:#C9CDD6}:root:not([data-theme="light"]) .lpath .pnode.is-done .disc{background:#1E4A26;color:#DDF7C4}}
:root[data-theme="dark"] .lpath .pnode.is-locked .disc{background:#2A2D34;color:#C9CDD6}:root[data-theme="dark"] .lpath .pnode.is-done .disc{background:#1E4A26;color:#DDF7C4}
@media(max-width:560px){.lpath .disc{width:48px;height:48px;font-size:24px}.lpath .pnode.is-current .disc{width:56px;height:56px}.pathwrap .path-spine{left:30px}.isl-title{display:none}}

/* ---- boss banner (test.js: pre-start + result only) ---- */
.boss{display:flex;gap:16px;align-items:center;padding:16px 20px;margin:8px 4px 20px;background:#10233F;color:#EAF4FF;--pf:var(--gm-coral-d)}
.boss-portrait{flex:none;display:grid;place-items:center;width:64px;height:64px;background:#2B5CA8}
.boss-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.boss-eyebrow{font-size:16px;color:var(--gm-sun)}
.boss .boss-name{margin:0;font:650 22px/1.2 var(--lg-font-display);color:#FFFFFF}
.boss-meta{font-size:15px;color:#C9DAF2}.boss-meta b{font-size:16px;color:#FFB3A6}
.hp-bar{display:block;max-width:420px;height:16px;margin:6px 2px;background:#2A2D34;box-shadow:0 0 0 2px #0B1626;overflow:hidden}
.hp-fill{display:block;height:100%;transform-origin:left;background:repeating-linear-gradient(90deg,#FF6B5A 0 14px,#D9503F 14px 16px)}
.boss-line{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;color:#C9DAF2}
.boss.mini{padding:8px 14px}.boss.mini .boss-meta,.boss.mini .hp-bar,.boss.mini .boss-line{display:none}.boss.mini .boss-portrait{width:48px;height:48px}.boss.mini .boss-portrait .px-ico{width:32px!important;height:32px!important}.boss.mini .boss-portrait svg{width:32px;height:32px}
.boss.won{--pf:var(--gm-sun-d)}.boss.won .hp-fill{background:#8A90A0}
@media(max-width:560px){.boss{padding:12px 14px;gap:12px}.boss-portrait{width:48px;height:48px}.boss-portrait svg{width:32px;height:32px}.boss .boss-name{font-size:18px}}

/* ---- settings: sound toggle ---- */
.sfx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 12px 8px}

/* ---- modes ---- */
@media(prefers-reduced-motion:reduce){.lpath .pnode.is-current .disc{transform:none}.hud-streak .px-ico{animation:none!important}}
@media(forced-colors:active){.px-frame,.lpath .disc,.boss,.pl-portrait,.hud-chip,.pchip{border:2px solid CanvasText;box-shadow:none}.hud-segs i.on,.xpbar i.on,.qsegs i.on{background:Highlight}.hud-segs i,.xpbar i,.qsegs i{border:1px solid CanvasText}}
.plcard>.icard{margin-top:auto}
@media(max-width:700px){.hud-strip .hide-s{display:none}}
@media(max-width:420px){.hud-strip .hud-chip .n{font-size:16px}.hud-chip{height:36px}}
.lpath .pnode.is-locked .disc::before{left:auto;right:16px;top:4px;height:8px;width:2px;box-shadow:2px 6px 0 0 #8A90A0}
@media(max-width:560px){.isl-label>.isl-title{display:none}}
@media(max-width:560px){.app-nav .brand{min-width:44px;justify-content:center}}

/* ===== O2 live companion (design 06 §5.7-5.9): docked sprite + speech bubble. Not glass. ===== */
:root{--comp-bg:#FFFFFF;--comp-ink:#10233F;--comp-edge:#10233F}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--comp-bg:#10233F;--comp-ink:#E8F1FF;--comp-edge:#6AB6FF}}
:root[data-theme="dark"]{--comp-bg:#10233F;--comp-ink:#E8F1FF;--comp-edge:#6AB6FF}
.companion{position:fixed;z-index:48;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 88px);display:flex;flex-direction:column;align-items:flex-start;pointer-events:none;max-width:calc(100% - 24px)}
.companion[hidden]{display:none}
.comp-btn{pointer-events:auto;display:block;min-width:48px;min-height:60px;padding:2px 8px;border:0;border-radius:12px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.comp-btn canvas{display:block;margin:0 auto}
.comp-btn:focus-visible{outline:3px solid var(--comp-edge);outline-offset:2px}
.comp-bubble{pointer-events:auto;position:relative;margin:0 0 10px 4px;max-width:240px;padding:8px 12px;background:var(--comp-bg);color:var(--comp-ink);font:600 15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;border:2px solid var(--comp-edge);border-radius:4px;box-shadow:3px 3px 0 0 rgba(16,35,63,.22);animation:comp-pop .18s cubic-bezier(.2,.9,.3,1.2) both}
.comp-bubble[hidden]{display:none}
.comp-bubble::after{content:"";position:absolute;left:22px;bottom:-8px;width:8px;height:6px;background:var(--comp-bg);border:2px solid var(--comp-edge);border-top:0;box-shadow:2px 2px 0 0 rgba(16,35,63,.18)}
@keyframes comp-pop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@media(min-width:821px){
  .companion{left:auto;right:24px;bottom:24px;align-items:flex-end}
  .comp-bubble{margin:0 4px 10px 0}
  .comp-bubble::after{left:auto;right:40px}
  body.tools-drawer .companion{right:calc(var(--tool-w,380px) + 40px)}
}
@media(max-width:820px){body.has-dock .companion,body.tools-sheet .companion{display:none}}
@media(prefers-reduced-motion:reduce){.comp-bubble{animation:none}}
@media(forced-colors:active){.comp-bubble{border-color:CanvasText;forced-color-adjust:auto}}
/* ===== end O2 live companion ===== */
/* O2: menu items inside the Settings sheet get the same row style as the avatar menu (My path, Me, Sign out) */
.settings-sheet>a[role="menuitem"],.settings-sheet>button.mi{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:none;text-align:left;font:500 15px var(--lg-font);color:var(--bp-ink);text-decoration:none;cursor:pointer}
@media(hover:hover){.settings-sheet>a[role="menuitem"]:hover,.settings-sheet>button.mi:hover{background:var(--bp-neu-soft)}}

/* ===== 28/10 glass pass: the companion speech bubble is a soft round bubble (was a 4 px-radius pixel box with a hard shadow + notch) ===== */
.comp-bubble { border: 0; border-radius: 18px; background: var(--comp-bg); box-shadow: 0 8px 22px rgba(20, 70, 160, .22), inset 0 0 0 1px rgba(26, 102, 217, .16); }
.comp-bubble::after { border: 0; width: 12px; height: 12px; bottom: -5px; border-radius: 3px; transform: rotate(45deg); box-shadow: 4px 4px 8px rgba(20, 70, 160, .1); }
/* 29/10 QA-A (P2.7): every tap target in the Settings sheet is >= 44 px (Close, the segmented switches, the rows) */
.settings-sheet .btn,.settings-sheet .seg button,.settings-sheet button.mi,.settings-sheet a[role="menuitem"]{min-height:44px}
.settings-sheet .seg button{min-width:44px}
.settings-sheet input[type="range"]{min-height:44px;touch-action:pan-y}
.settings-sheet .about-build,.settings-sheet .set-more a{min-height:44px}