/* Game Presentation API: all game layout/controls, icons, scoreboards,
 * end screens, responsive rules and game-specific visual tokens.
 * Inherited application chrome and platform navigation remain separate.
 * This is the LAST stylesheet; legacy game selector overrides are removed
 * from previous stylesheets to keep one source of truth.
 */
/* Extracted game presentation from public/styles.css */

.memory-sequence-icons{display:flex;gap:7px;transform:rotate(-7deg)}
.memory-sequence-icons span{display:grid;place-items:center;width:39px;height:39px;background:rgba(255,255,255,.75);border-radius:12px;font-weight:800;font-size:20px}
.memory-sequence-icons span:nth-child(2){background:#A9CFEA;transform:translateY(-15px)}
.memory-sequence-icons span:nth-child(4){background:#87D2BF;transform:translateY(-6px)}
.memory-card-icons{display:grid;grid-template-columns:repeat(4,38px);gap:6px;transform:rotate(8deg)}
.memory-card-icons span{display:grid;place-items:center;width:38px;height:53px;border-radius:9px;background:rgba(255,255,255,.74);font-size:22px;font-weight:900;box-shadow:0 5px 0 rgba(0,0,0,.07)}
.memory-card-icons span:nth-child(even){background:#F0BDD2}
.reaction-icons{display:flex;flex-direction:column;align-items:center;gap:5px;transform:rotate(-7deg)}
.reaction-bolt{font-size:65px;line-height:1}
.reaction-icons strong{font-size:16px;letter-spacing:2px}
@media(max-width:700px){
 .memory-sequence-icons span{width:29px;height:29px;font-size:15px;border-radius:9px}
 .memory-card-icons{grid-template-columns:repeat(4,30px);gap:4px}
 .memory-card-icons span{height:42px;width:30px;font-size:16px}
 .reaction-bolt{font-size:48px}}


/* Sequence Memory - first playable daily, same shared portal card language. */
.memory-header{padding-bottom:23px}
.memory-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.8fr);gap:20px;align-items:start}
.memory-game,.memory-ranking{background:var(--surface);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);padding:22px;min-width:0}
.memory-topline,.memory-ranking-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.memory-topline h2,.memory-ranking-head h2{font-size:21px;letter-spacing:-.65px;margin:0}
.memory-tag{background:#E1EFF8;color:#377B8B}
.memory-intro,.memory-results{padding:22px 6px 6px;text-align:center}
.memory-spark{display:inline-grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#E1EFF8;color:#377B8B;font-size:27px}
.memory-intro h3,.memory-results h3{font-size:25px;letter-spacing:-.8px;margin:17px 0 9px}
.memory-intro>p,.memory-results>p{font-size:14px;line-height:1.6;color:var(--muted);max-width:460px;margin:0 auto}
.memory-start-actions{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:10px;margin:22px auto 0}
.memory-start-actions button,.memory-link{font:inherit;border-radius:10px;border:1px solid var(--line);min-height:43px;padding:10px 17px;font-size:13px;font-weight:700;cursor:pointer}


.memory-start-actions button:disabled{opacity:.55;cursor:default}
.memory-start-actions button:focus-visible,.memory-tile:focus-visible,.memory-link:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.memory-link{border:0;display:inline-flex;align-items:center;color:var(--accent);text-decoration:none}
.memory-note{font-size:12px!important;margin-top:21px!important;max-width:460px!important}
.memory-progress{margin:20px auto 17px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.memory-progress span{color:var(--muted);font-size:13px}
.memory-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;max-width:355px;margin:0 auto}
.memory-tile{display:block;width:100%;aspect-ratio:1.2;border-radius:17px;border:3px solid rgba(0,0,0,.05);cursor:pointer;transition:filter .12s,transform .12s,box-shadow .12s;touch-action:manipulation}
.memory-tile:disabled{cursor:default;opacity:.83}
.memory-tile-0{background:#F2AF92}.memory-tile-1{background:#EED077}.memory-tile-2{background:#85C8AB}.memory-tile-3{background:#97B9E9}
.memory-tile.is-lit,.memory-tile:active:not(:disabled){filter:brightness(1.17) saturate(1.2);transform:scale(1.025);border-color:rgba(255,255,255,.65);box-shadow:inset 0 0 0 2px rgba(255,255,255,.32),0 5px 16px rgba(37,47,58,.14);opacity:1}
.memory-hint{font-size:12px;color:var(--muted);text-align:center;margin:17px 0 0}
.memory-result-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px;margin:22px auto 0}
.memory-result-metrics>div{display:flex;flex-direction:column;gap:5px;padding:16px 9px;background:var(--surface-soft);border-radius:12px}
.memory-result-metrics strong{font-size:27px;letter-spacing:-.9px}
.memory-result-metrics span{font-size:12px;color:var(--muted)}
.memory-save-status{min-height:24px;margin:17px 0 0;color:var(--muted);font-size:13px}
.memory-error{font-size:13px;color:#A6463D;background:#FDF0EC;border-radius:9px;padding:13px;margin:16px 0 0;line-height:1.5}
.memory-experimental{font-size:10px;font-weight:800;letter-spacing:1px;color:#377B8B;background:#E1EFF8;border-radius:6px;padding:5px 7px}
.memory-ranking>p,.memory-ranking-note{font-size:13px;color:var(--muted);line-height:1.6}
.memory-rank-rows{margin:18px 0}
.memory-no-ranks{font-size:13px;color:var(--muted);line-height:1.6}
.memory-rank-row{display:grid;grid-template-columns:33px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:12px 3px;border-bottom:1px solid var(--line);font-size:12px}
/* Every ranking row retains its full border, including the final one. */
.memory-rank-position{font-weight:750;color:var(--muted)}
.memory-rank-player{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.memory-rank-row strong{font-size:12px;white-space:nowrap}
.memory-rank-duration{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.page-memory [hidden],.memory-game [hidden]{display:none!important}
@media(max-width:950px){.memory-layout{grid-template-columns:1fr}.memory-ranking{padding:19px}}
@media(max-width:700px){.memory-game,.memory-ranking{padding:17px}.memory-intro,.memory-results{padding:17px 1px 5px}.memory-board{max-width:335px}.memory-topline h2{font-size:19px}.memory-start-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){.memory-tile{transition:none}}


/* Memory: playful game identity without making the site louder everywhere. */




.memory-header-copy{z-index:1;position:relative}
.memory-hero-art{display:grid;grid-template-columns:repeat(2,58px);gap:9px;transform:rotate(-13deg);position:relative;flex:none;margin-right:26px}
.memory-hero-art span{height:58px;border:3px solid rgba(255,255,255,.65);border-radius:17px;box-shadow:0 6px 0 rgba(37,64,73,.08),0 10px 19px rgba(37,64,73,.065)}
.memory-hero-art span:nth-child(1){background:#F3AF93}.memory-hero-art span:nth-child(2){background:#F6D279}
.memory-hero-art span:nth-child(3){background:#8BD2B6}.memory-hero-art span:nth-child(4){background:#95BDEE}
.memory-hero-art strong{position:absolute;right:-24px;top:-26px;color:#EDB05A;font-size:24px}








.page-memory .memory-intro h3{font-size:25px;letter-spacing:-.8px;margin:12px 0 7px}
.page-memory .memory-intro>p{font-size:14px;max-width:300px;line-height:1.55}




.page-memory .memory-progress strong{font-size:17px}
.page-memory .memory-progress span{font-size:13px;color:#3D8592;font-weight:700}


.page-memory .memory-tile:disabled{opacity:1}
.page-memory .memory-tile.is-lit,.page-memory .memory-tile:active:not(:disabled){filter:brightness(1.18) saturate(1.16);
 transform:translateY(-3px) scale(1.028);border-color:rgba(255,255,255,.84);
 box-shadow:0 4px 0 rgba(40,65,72,.06),0 0 24px rgba(105,177,179,.2),inset 0 0 0 2px rgba(255,255,255,.28)}
.memory-finish-spark{display:inline-grid;place-items:center;width:48px;height:48px;background:#E4F4ED;color:#3B9978;border-radius:14px;font-size:29px}
.page-memory .memory-results h3{font-size:29px}
.page-memory .memory-result-metrics strong{font-size:29px}
.page-memory .memory-ranking-head h2{font-size:19px}
.page-memory .memory-experimental{color:#5E8190;background:#ECF2F5;font-size:10px;letter-spacing:.8px;border-radius:99px;padding:7px 9px}
.page-memory .memory-ranking-subtitle{font-size:12px;line-height:1.5;margin:10px 0 0;color:var(--muted)}
.page-memory .memory-rank-rows{margin:15px 0 5px}
.page-memory .memory-rank-row{padding:13px 3px}
.page-memory .memory-link{color:#2C7F90}
@media(max-width:850px){.memory-hero-art{transform:scale(.78) rotate(-13deg);margin-right:4px}}
@media(max-width:700px){
 
 
 
 .memory-hero-art{display:none}}

/* Accessible keyboard focus without the heavy dark tile ring. */
.page-memory .memory-tile:focus-visible{outline:2px solid #3F92A0;outline-offset:4px}
.memory-guest-initials{margin:15px auto 0;max-width:250px;display:grid;justify-items:center;gap:5px}
.memory-guest-initials[hidden]{display:none!important}
.memory-guest-initials label{font-size:12px;font-weight:650}
.memory-guest-initials input{width:100px;text-align:center;text-transform:uppercase;letter-spacing:3px;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text)}
.memory-guest-initials small{font-size:11px;color:var(--muted)}

/* Arcade-style leaderboard: ranked cards, compact avatar distinction; never a Plus badge. */
.memory-rank-rows{display:flex;flex-direction:column;gap:7px}
.memory-rank-row{display:grid;grid-template-columns:26px 32px minmax(0,1fr) auto auto;align-items:center;gap:10px;
 background:var(--surface-soft);border:1px solid var(--line);border-radius:11px;padding:10px 12px!important;
 min-width:0}
.memory-rank-position{font-weight:800;font-size:12px;color:var(--muted)}
.memory-rank-avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;
 background:#DCEDE7;color:#347D71;font-size:17px;font-weight:750}
.memory-rank-player{font-size:14px;font-weight:var(--tg-rank-name-weight);letter-spacing:1px}
.memory-rank-row strong{font-weight:var(--tg-rank-score-weight);font-size:12px}
.memory-rank-duration{font-size:11px;opacity:.8}
.memory-guest-result{margin:20px auto 0;max-width:340px;padding:16px;border-radius:13px;background:var(--surface-soft)}
.memory-guest-result[hidden]{display:none!important}
.memory-guest-result label{display:block;font-size:13px;font-weight:750;margin:0 0 10px}
.memory-guest-result-controls{display:flex;align-items:center;justify-content:center;gap:10px}
.memory-guest-result-controls input{width:100px;min-width:0;min-height:42px;text-align:center;text-transform:uppercase;
 letter-spacing:2px;font-weight:750;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text)}
.memory-guest-result-controls button{min-height:42px}
.memory-guest-result>p{font-size:11px;margin:13px 0 0;color:var(--muted)}
@media(max-width:460px){.memory-rank-row{gap:7px;grid-template-columns:18px 27px minmax(0,1fr) auto auto;padding:9px 8px!important}
.memory-rank-avatar{width:27px;height:27px}.memory-rank-row strong{font-size:11px}.memory-rank-duration{font-size:10px}}

/* Games-first leaderboard: bright, compact and legible in both themes. */
.memory-rank-rows{gap:6px}
.memory-rank-row{min-height:0;grid-template-columns:22px 28px minmax(0,1fr) auto auto;gap:8px;
  padding:7px 10px!important;border-radius:10px;
  background:color-mix(in srgb,var(--surface) 90%,var(--surface-soft));
  border-color:var(--line)}
.memory-rank-avatar{width:28px;height:28px;border-radius:9px;font-size:16px}
.memory-rank-player{font-size:13px}
.memory-rank-row strong{font-size:12px}
.rankings-main .memory-ranking-subtitle{margin:9px 0 15px;color:var(--muted);font-size:12px}
.rankings-main .memory-rank-rows{margin:0}
.rankings-main .memory-no-ranks{padding:12px 0}
.memory-ranking .memory-experimental{letter-spacing:.7px}





:root[data-theme="dark"] .page-memory .memory-experimental{background:#36484E;color:#BBDBE1}
:root[data-theme="dark"] .memory-rank-avatar{background:#30443F;color:#A6DFCD}
:root[data-theme="dark"] .memory-rank-row{background:var(--surface-soft)}
:root[data-theme="dark"] .memory-guest-result{background:var(--surface-soft)}

/* Extracted game presentation from public/theme.css */

:root[data-theme="dark"] :is(.game-catalog-card,.catalog-placeholder)
  :is(.letter-icons,.groups-icons,.edge-icons,.number-icons,.memory-sequence-icons,.memory-card-icons) span{
  color:var(--game-ink,#347C67);
}
.memory-error{background:var(--error-surface);color:var(--error-ink)}
.memory-finish-spark{background:var(--avatar-surface);color:var(--avatar-ink)}
:root[data-theme="dark"] .page-memory .memory-results,
:root[data-theme="dark"] .page-memory .memory-intro{color:var(--text)}
:root[data-theme="dark"] .page-memory .memory-intro>p{color:var(--muted)}
.page[data-page="rankings"] .memory-ranking{width:100%}
.memory-rank-full-link{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 1px 0;margin-top:3px;
  font-size:12px;font-weight:700;color:var(--accent);
}
.memory-rank-full-link:hover{text-decoration:underline;text-underline-offset:3px}
.memory-rank-full-link:focus-visible{border-radius:3px}

/* Two games, one completion layout. A result begins with the numbers,
   not a redundant emblem and celebratory heading. */
.tg-game-results{padding:21px 4px 5px;text-align:center}
.tg-result-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;
  width:min(100%,430px);max-width:430px;margin:0 auto 20px}
.tg-result-metrics>div{padding:17px 11px;background:var(--surface-soft);border-radius:13px;
  display:flex;flex-direction:column;gap:8px}
.tg-result-metrics strong{font-size:clamp(25px,3.1vw,36px);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.tg-result-metrics span{color:var(--muted);font-size:12px}
.tg-game-results .memory-guest-result{margin-top:17px}
.tg-game-results .memory-start-actions{margin-top:12px}
.tg-game-results .memory-save-status:empty{min-height:0;margin:0}
/* Reaction Time: bright game field, restrained UI, shared portal chrome. */
/* Reaction colours are defined once by --tg-game-* in game-components.css. */










:root[data-theme="dark"] 
.page-reaction .reaction-layout{align-items:start}
.page-reaction .memory-game{min-width:0}





.reaction-play{padding-top:14px}
.reaction-progress{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 0 12px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.reaction-progress strong{color:var(--text);font-size:13px}
.reaction-target{display:flex;width:100%;min-height:clamp(245px,30vw,390px);
  flex-direction:column;gap:6px;align-items:center;justify-content:center;
  background:var(--tg-game-mint);color:var(--tg-game-stage-ink);border:0;border-radius:16px;
  cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  transition:background-color .11s ease;position:relative;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.08)}
.reaction-target[data-state="go"]{background:var(--tg-game-coral);color:var(--tg-game-stage-ink)}
.reaction-target[data-state="early"]{background:var(--surface-soft);color:var(--text)}
.reaction-target[data-state="done"]{background:var(--surface-soft);color:var(--text)}
.reaction-target span{font-size:clamp(29px,4vw,42px);line-height:1.1;font-weight:800;letter-spacing:-1.1px}
.reaction-target small{font-size:14px;font-weight:650;opacity:.78}
.reaction-target:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.reaction-play-hint{text-align:center;font-size:12px;color:var(--muted);margin:15px 0 0}
.reaction-chart-card{text-align:left;margin:10px auto 0;padding:17px;border:1px solid var(--line);
  border-radius:14px;max-width:500px;background:var(--surface)}
.reaction-chart-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.reaction-chart-header h3{margin:0;font-size:16px;font-weight:750;letter-spacing:-.3px}
.reaction-chart-header span{font-size:11px;color:var(--muted)}
.reaction-chart{min-height:100px;margin:10px 0 0;display:grid;place-items:center}
.reaction-chart svg{width:100%;height:auto;max-height:210px;overflow:visible}
.reaction-chart:empty{min-height:20px}
.reaction-chart-note{font-size:12px;color:var(--muted);text-align:center;margin:9px 0 0}
.reaction-results .memory-save-status{margin-top:10px}
.reaction-rankings-full{margin-top:19px}

@media(max-width:700px){
 
 
 
 
 .reaction-target{min-height:270px}
 .tg-result-metrics{gap:9px}
 .tg-result-metrics>div{padding:14px 9px}
 .reaction-chart-card{padding:14px 10px}}
@media(prefers-reduced-motion:reduce){.reaction-target{transition:none}}
.game-catalog-card[data-game="reaction-time"] .reaction-icons strong{
 font-size:13px;letter-spacing:3px;color:var(--game-art-ink)
}

/* All scoreboards use complete card borders, including the final row. */
.memory-rank-rows>.memory-rank-row:last-child{
 border-bottom:1px solid var(--line);
}
.game-rankings-detail .memory-rank-row{
 grid-template-columns:32px 34px minmax(0,1fr) minmax(75px,105px) minmax(52px,74px);
 padding:11px 16px!important
}
.game-rankings-detail .memory-rank-row strong,.game-rankings-detail .memory-rank-duration{text-align:right}
.game-rankings-detail .reaction-rankings-full .memory-rank-row{
 grid-template-columns:32px 34px minmax(0,1fr) minmax(90px,140px)
}
.game-rankings-detail .reaction-rankings-full .memory-rank-row strong{text-align:right}
.game-rankings-detail .rankings-reaction-curve .reaction-chart{max-width:730px;margin:auto}
.game-rankings-detail .rankings-reaction-curve .reaction-chart-header h2{font-size:18px;margin:0}
@media(max-width:700px){
 .game-rankings-detail .memory-rank-row{grid-template-columns:21px 28px minmax(0,1fr) auto auto;gap:7px;padding:9px!important}
 .game-rankings-detail .reaction-rankings-full .memory-rank-row{
   grid-template-columns:21px 28px minmax(0,1fr) auto}}
.reaction-chart{display:flex;flex-direction:column;align-items:stretch;justify-content:center}
.reaction-chart svg{align-self:center}
/* Two exclusive chart views, not overlapping visualisations. */
.reaction-chart-header{display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:space-between}
.reaction-chart-header>span{margin-left:auto}
@media(max-width:480px){
 .reaction-chart-header>span{margin-left:0}}

/* Pitchline only owns its palette, waveform and score overlays. Shared game
   geometry, layout, header, toolbar, badges and buttons live in game-components.css. */
.page-pitch{
 --tg-game-action:#7365b9;--tg-game-action-hover:#6255ab;--tg-game-action-shadow:#51448c;
 --tg-game-badge-bg:#eeeafa;--tg-game-badge-ink:#66549c;
 --tg-pitch-ink:#24334a;--tg-pitch-muted:#60728b;
 --tg-pitch-wave-teal:#128f91;--tg-pitch-wave-violet:#8060ba;
 --tg-pitch-marker:#148c94;
}
:root[data-theme="dark"] .page-pitch{
 --tg-game-action:#8875c9;--tg-game-action-hover:#9a87d7;--tg-game-action-shadow:#645395;
 --tg-game-badge-bg:#373347;--tg-game-badge-ink:#d8cdfa;
 --tg-pitch-ink:#f3f4fb;--tg-pitch-muted:#b2bbd1;
 --tg-pitch-wave-teal:#24c5c0;--tg-pitch-wave-violet:#ae82de;
 --tg-pitch-marker:#7ce5df;
}
.tg-pitch-banner-art{
 display:grid;place-items:center;flex:0 0 142px;width:142px;
 height:124px;color:#8267bd;opacity:.65;
}
:root[data-theme="dark"] .tg-pitch-banner-art{color:#c4adee;opacity:.8}
.tg-pitch-panel{min-width:0}
.tg-pitch-preview,.tg-pitch-stage{
 box-sizing:border-box;position:relative;border-radius:0;
 overflow:hidden;isolation:isolate;background:transparent;
 color:var(--tg-pitch-ink);touch-action:none;
}
.tg-pitch-preview{display:block;user-select:none;pointer-events:none}
.tg-pitch-preview canvas,.tg-pitch-stage canvas{
 position:absolute;inset:0;display:block;width:100%;height:100%;
}
.tg-pitch-preview-marker{
 position:absolute;top:52%;left:10%;width:80%;border-top:2px solid var(--tg-pitch-marker);
 opacity:.25;box-shadow:none;
}
.tg-pitch-instructions{
 max-width:390px;margin:14px auto 0;text-align:center;
 color:var(--muted);font-size:13px;line-height:1.6;
}
.tg-pitch-panel .tg-game-actions{margin-top:16px}
.tg-pitch-status{
 position:absolute;z-index:4;top:18px;left:19px;right:19px;
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 color:var(--tg-pitch-ink);font-size:12px;pointer-events:none;
}
.tg-pitch-status strong{font-variant-numeric:tabular-nums;letter-spacing:.3px}
.tg-pitch-status span{font-size:11px;color:var(--tg-pitch-muted)}
.tg-pitch-listen{
 position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:12px;
 color:var(--tg-pitch-ink);pointer-events:none;
}
.tg-pitch-listen span,.tg-pitch-drag-label{
 color:var(--tg-pitch-muted);font-size:10px;letter-spacing:1.45px;font-weight:750;
}
.tg-pitch-listen strong{
 color:var(--tg-pitch-ink);font-size:clamp(48px,8vw,76px);
 letter-spacing:-3px;line-height:1.1;font-weight:650;
}
.tg-pitch-listen small{color:var(--tg-pitch-muted);font-size:12px}
.tg-pitch-slider{
 position:absolute;inset:0;z-index:2;cursor:ns-resize;outline-offset:-4px;
 touch-action:none;user-select:none;-webkit-user-select:none;
}
.tg-pitch-slider:focus-visible{outline:2px solid var(--tg-pitch-marker)}
.tg-pitch-slider::before{
 content:"";position:absolute;top:0;left:50%;height:100%;width:1px;
 background:color-mix(in srgb,var(--tg-pitch-marker) 9%,transparent);
 pointer-events:none;
}
.tg-pitch-confirm{
 position:absolute;z-index:3;right:18px;bottom:19px;
 min-height:42px;padding:10px 15px;
 pointer-events:auto;white-space:nowrap;
}
.tg-pitch-marker{
 position:absolute;left:0;top:50%;width:100%;height:2px;
 border-top:1px solid var(--tg-pitch-marker);
 box-shadow:none;opacity:.25;
 pointer-events:none;
}
.tg-pitch-marker i{
 position:absolute;left:50%;top:-4px;width:8px;height:8px;
 background:var(--tg-pitch-marker);border:1px solid var(--surface);
 border-radius:50%;transform:translateX(-50%);
}
.tg-pitch-drag-label{position:absolute;top:54px;left:20px}
.tg-pitch-slider-hint{position:absolute;top:54px;right:20px;color:var(--tg-pitch-muted);font-size:11px}
.tg-pitch-slider>strong{
 position:absolute;bottom:24px;left:20px;z-index:2;
 color:var(--tg-pitch-ink);font-size:clamp(36px,5.5vw,52px);
 letter-spacing:-2.5px;font-weight:680;line-height:1;
 font-variant-numeric:tabular-nums;
}
.tg-pitch-slider>strong small{font-size:14px;font-weight:500;letter-spacing:0;color:var(--tg-pitch-muted)}
.tg-pitch-feedback{
 position:absolute;inset:0;z-index:3;pointer-events:none;
 display:block;color:var(--tg-pitch-ink);
}
.tg-pitch-feedback-score{
 position:absolute;top:73px;right:22px;text-align:right;
 display:flex;flex-direction:column;gap:3px;align-items:flex-end;
}
.tg-pitch-feedback-score>span{
 color:var(--tg-pitch-muted);font-size:10px;font-weight:750;letter-spacing:1.25px;
}
.tg-pitch-feedback-score>strong{
 font-size:clamp(49px,7vw,72px);line-height:1.08;letter-spacing:-2.8px;
 font-weight:700;font-variant-numeric:tabular-nums;
}
.tg-pitch-feedback-score>small{color:var(--tg-pitch-muted);font-size:12px;max-width:185px;line-height:1.4;text-align:right}
.tg-pitch-feedback-bottom{
 position:absolute;bottom:20px;left:20px;right:20px;
 display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
}
.tg-pitch-feedback-values{display:flex;flex:1 1 auto;flex-direction:column;gap:6px;min-width:0}
.tg-pitch-feedback-values>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.tg-pitch-feedback-values>div>span{color:var(--tg-pitch-muted);font-size:10px;font-weight:750;letter-spacing:1.15px}
/* Both frequencies share the same type scale; the unit stays much smaller.
   Inline flex prevents the numerical value and Hz from ever wrapping apart. */
.tg-pitch-feedback-values .tg-pitch-frequency{
 display:inline-flex;align-items:baseline;align-self:flex-start;gap:.2em;
 max-width:100%;white-space:nowrap;
 color:var(--tg-pitch-ink);font-size:clamp(25px,7vw,38px);line-height:1.12;
 font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.85px;
}
.tg-pitch-feedback-values>div:first-child .tg-pitch-frequency{color:var(--tg-pitch-muted)}
.tg-pitch-feedback-values .tg-pitch-frequency-number{font:inherit;letter-spacing:inherit;color:inherit}
.tg-pitch-feedback-values .tg-pitch-frequency small{
 font-size:.4em;font-weight:600;line-height:1;letter-spacing:0;color:inherit;
}
.tg-pitch-feedback-bottom .tg-game-button{
 flex-shrink:0;pointer-events:auto;padding:11px 14px;
 min-height:43px;max-width:140px;white-space:nowrap;
}
.tg-pitch-hint{
 min-height:17px;margin:12px auto 0;
 font-size:12px;text-align:center;line-height:1.5;color:var(--muted);
}
.tg-pitch-error{font-size:12px;color:#c95260}
.tg-pitch-results{text-align:center;padding:40px 15px}
.tg-pitch-results>strong{display:block;font-size:clamp(70px,10vw,105px);letter-spacing:-5px;line-height:1.1;font-weight:700}
.tg-pitch-results>span{color:var(--muted);font-size:14px}
.tg-pitch-round-summary{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:26px 0}
.tg-pitch-round-summary span{background:var(--surface-soft);border-radius:8px;padding:9px 11px;font-size:12px}
.tg-pitch-results>p[role="status"]{font-size:12px;color:var(--muted);margin:14px 0}
.tg-pitch-listen[hidden],.tg-pitch-slider[hidden],.tg-pitch-feedback[hidden]{display:none!important}
@media(max-width:700px){
 .tg-pitch-confirm{bottom:15px;right:15px}
 .tg-pitch-banner-art{display:none}
 .tg-pitch-status{top:16px;left:16px;right:16px}
 .tg-pitch-feedback-score{right:17px;top:63px}
 .tg-pitch-feedback-bottom{bottom:18px;left:16px;right:16px}
 .tg-pitch-feedback-values .tg-pitch-frequency{font-size:clamp(23px,7vw,34px)}
 .tg-pitch-slider>strong{bottom:22px;left:16px}
 .tg-pitch-drag-label{top:49px;left:16px}
 .tg-pitch-slider-hint{top:49px;right:16px}}

/* Extracted game presentation from public/game-components.css */
/* All playable game pages share one design contract. This file loads LAST.
   Game-specific artwork and actual play behaviour stay in game modules. */
.tg-game-page{
 --tg-game-action:#2c7f90;--tg-game-action-hover:#267486;--tg-game-action-shadow:#205967;
 --tg-game-badge-bg:#e6f4f7;--tg-game-badge-ink:#377987;
 --tg-game-panel-height:515px;--tg-game-banner-height:185px;
 --tg-game-mint:#8ECDB1;--tg-game-coral:#E5A39F;--tg-game-stage-ink:#243831;
}
:root[data-theme="dark"] .tg-game-page{
 --tg-game-action:#318a9c;--tg-game-action-hover:#3b9cb0;--tg-game-action-shadow:#1e6470;
 --tg-game-badge-bg:#324b55;--tg-game-badge-ink:#b1e4e7;
 /* Shared dark-stage palette: preserve game hue but equalize perceived
    brightness across memory tiles, reaction targets and future stages. */
 --tg-stage-coral:#BE737B;--tg-stage-gold:#A18B50;
 --tg-stage-mint:#589984;--tg-stage-blue:#6F94BA;
 --tg-game-mint:var(--tg-stage-mint);
 --tg-game-coral:var(--tg-stage-coral);
 --tg-game-stage-ink:#F6F6F6;
}
:root[data-theme="dark"] .tg-game-page .memory-tile-0{background:var(--tg-stage-coral)}
:root[data-theme="dark"] .tg-game-page .memory-tile-1{background:var(--tg-stage-gold)}
:root[data-theme="dark"] .tg-game-page .memory-tile-2{background:var(--tg-stage-mint)}
:root[data-theme="dark"] .tg-game-page .memory-tile-3{background:var(--tg-stage-blue)}
/* The preview and the live board both read the same stage palette. */
/* Unified banners: proportions, typography, margins; games keep own palette. */
.tg-game-page .tg-game-banner{
 box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
 gap:24px;width:100%;height:var(--tg-game-banner-height);min-height:var(--tg-game-banner-height);max-height:var(--tg-game-banner-height);margin:22px 0;padding:26px 34px;
 border-radius:21px;overflow:hidden;position:relative
}
.tg-game-page .tg-game-banner-copy{position:relative;z-index:1;min-width:0}
.tg-game-page .tg-game-banner .eyebrow{
 margin:0 0 12px;font-size:10px;font-weight:750;letter-spacing:1.3px
}
.tg-game-page .tg-game-banner h1{
 margin:0 0 8px;font-size:clamp(33px,3.8vw,47px);line-height:1.1;
 letter-spacing:-1.8px;font-weight:720
}
.tg-game-page .tg-game-banner .tg-game-banner-copy>p:last-child{
 margin:0;font-size:15px;line-height:1.45;max-width:none
}
/* Artwork differs; shared banner geometry never does. */
.page-memory.tg-game-page{
 --tg-banner-bg:linear-gradient(115deg,#DDF0F3,#EEE6F9 61%,#FFF1D5);
 --tg-banner-ink:#263745;
}
.page-reaction.tg-game-page{
 --tg-banner-bg:linear-gradient(115deg,#DDF0F3,#E6F2E9 61%,#FFF0DF);
 --tg-banner-ink:#263745;
}
.page-pitch.tg-game-page{
 --tg-banner-bg:linear-gradient(115deg,#DEF3F5,#EEE9FB 60%,#FFF0D9);
 --tg-banner-ink:#263745;
}
:root[data-theme="dark"] .page-memory.tg-game-page{
 --tg-banner-bg:linear-gradient(110deg,#24474D,#3D394F 62%,#554334);
 --tg-banner-ink:var(--text);
}
:root[data-theme="dark"] .page-reaction.tg-game-page{
 --tg-banner-bg:linear-gradient(110deg,#26484C,#3D4642 62%,#514237);
 --tg-banner-ink:var(--text);
}
:root[data-theme="dark"] .page-pitch.tg-game-page{
 --tg-banner-bg:linear-gradient(110deg,#244348,#3b3652 62%,#4c3f42);
 --tg-banner-ink:var(--text);
}
.tg-game-page .tg-game-banner{background:var(--tg-banner-bg);color:var(--tg-banner-ink)}
:root[data-theme="dark"] .tg-game-page .tg-game-banner{background:var(--tg-banner-bg);color:var(--tg-banner-ink)}
.tg-game-page .tg-game-banner h1{color:var(--tg-banner-ink)}
.tg-game-page .tg-game-banner .eyebrow,.tg-game-page .tg-game-banner .tg-game-banner-copy>p:last-child{
 color:var(--tg-banner-ink);opacity:.8
}
/* The shared API requires explicit hidden states; flex/grid declarations must never override them. */
.tg-game-page [hidden]{display:none!important}
/* Shared playfield geometry: the same 340px square across game types. */
.tg-game-page .tg-game-playfield{box-sizing:border-box;width:min(100%,340px);aspect-ratio:1/1;height:auto;max-height:none;margin-inline:auto}
/* Explicit opt-in for audio games needing vertical space; layout remains shared. */
.tg-game-page .tg-game-playfield--tall{width:min(100%,400px);max-width:400px;aspect-ratio:auto;height:480px;min-height:0;margin-inline:auto}

/* Shared game box, header row and its compact pill. */
.tg-game-page .tg-game-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.8fr);gap:20px;align-items:start}
.tg-game-page .tg-game-panel,.tg-game-page .tg-game-aside{
 min-width:0;padding:22px;background:var(--surface);border:1px solid var(--line);
 border-radius:19px;box-shadow:var(--shadow)
}
.tg-game-page .tg-game-panel{min-height:var(--tg-game-panel-height)}
.tg-game-page .tg-game-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tg-game-page .tg-game-toolbar h2{margin:0;font-size:20px;letter-spacing:-.5px;line-height:1.25;font-weight:750}
.tg-game-page .tg-game-round-badge{
 flex:none;background:var(--tg-game-badge-bg);color:var(--tg-game-badge-ink);
 border-radius:999px;padding:7px 11px;font-size:11px;font-weight:750;line-height:1.2
}
/* First view = STATIC PREVIEW OF THE REAL PLAYFIELD, no fake mini-icon/tiles. */
.tg-game-page .tg-game-intro{
 display:flex;flex-direction:column;align-items:center;text-align:center;
 padding:18px 4px 10px;gap:0
}
.tg-game-page .tg-game-stage-preview{
 margin:0 auto;pointer-events:none;user-select:none;-webkit-user-select:none
}
.tg-game-page .tg-memory-preview,.tg-game-page .tg-memory-board{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:13px;width:min(100%,340px);max-width:340px;
 margin-left:auto;margin-right:auto;transform:none
}
.tg-game-page .tg-memory-preview .memory-tile,.tg-game-page .tg-memory-board .memory-tile{
 box-sizing:border-box;display:block;width:100%;height:auto;aspect-ratio:1/1;
 border-radius:20px;border:3px solid rgba(255,255,255,.7);
 box-shadow:0 7px 0 rgba(40,65,72,.10),0 12px 20px rgba(40,65,72,.06);opacity:1
}
.tg-game-page .tg-memory-preview .memory-tile{cursor:default}
/* Buttons and actions are canonical across all games. */
.tg-game-page .tg-game-actions{
 display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
 gap:10px;margin:22px auto 0
}
.tg-game-page .tg-game-button{
 min-height:43px;border-radius:10px;padding:10px 20px;
 font:inherit;font-size:13px;font-weight:750;line-height:1.3;
 border:1px solid var(--line);background:var(--surface);color:var(--text);
 box-shadow:none;cursor:pointer;
 transition:background .15s ease,transform .15s ease,box-shadow .15s ease
}
.tg-game-page .tg-game-button-primary{
 background:var(--text)!important;border-color:var(--text)!important;
 color:var(--canvas)!important;box-shadow:none!important;
}
.tg-game-page .tg-game-button-primary:hover:not(:disabled){
 background:color-mix(in srgb,var(--text) 90%,var(--surface))!important;
 transform:translateY(-1px)
}
.tg-game-page .tg-game-button-primary:active:not(:disabled){
 transform:translateY(1px);box-shadow:none!important
}
.tg-game-page .tg-game-button-secondary{
 background:var(--surface);color:var(--text);border-color:var(--line);box-shadow:none
}
.tg-game-page .tg-game-button-secondary:hover:not(:disabled){background:var(--surface-soft)}
.tg-game-page .tg-game-button:focus-visible{outline:3px solid var(--tg-game-action);outline-offset:3px}
.tg-game-page .tg-game-button:disabled{opacity:.55;cursor:default}
.tg-game-page .tg-game-button[data-busy="true"]:disabled{cursor:wait}
/* Exactly square in pre-game and live play, with one muted palette. */
.tg-game-page .tg-reaction-preview{width:min(100%,360px);max-width:360px}
.tg-game-page .tg-reaction-preview .reaction-target,
.tg-game-page .reaction-play .reaction-target{
 box-sizing:border-box;display:flex;align-items:center;justify-content:center;
 width:min(100%,360px);height:auto;min-height:0;max-height:none;aspect-ratio:1/1;
 margin:0 auto;padding:14px;border:0;border-radius:20px;
 background:var(--tg-game-mint);color:var(--tg-game-stage-ink)
}
.tg-game-page .tg-reaction-preview .reaction-target{width:100%;max-width:none;pointer-events:none;cursor:default;transition:none}
.tg-game-page .reaction-play .reaction-target[data-state="go"]{background:var(--tg-game-coral);color:var(--tg-game-stage-ink)}
.tg-game-page .reaction-play .reaction-target[data-state="early"],
.tg-game-page .reaction-play .reaction-target[data-state="done"]{background:var(--surface-soft);color:var(--text)}
.tg-game-page .reaction-play{padding-top:18px}
/* Hero art alignment uses the same 138px region as Sequence Memory.
   Lightning icon is standalone: NO surrounding square/plaque. */
.tg-game-page .reaction-hero-icon{
 display:grid;place-items:center;box-sizing:border-box;
 flex:0 0 142px;width:142px;height:124px;padding:0;
 border:0;border-radius:0;background:transparent!important;transform:none
}
@media(max-width:950px){
 .tg-game-page .tg-game-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
 .tg-game-page{--tg-game-panel-height:440px;--tg-game-banner-height:130px}
 .tg-game-page .tg-game-banner{margin:13px 0 18px;padding:23px 20px;border-radius:17px}
 .tg-game-page .tg-game-banner h1{font-size:clamp(29px,7vw,37px);letter-spacing:-1.3px}
 .tg-game-page .tg-game-banner .eyebrow{font-size:9px;margin-bottom:9px}
 .tg-game-page .tg-game-banner .tg-game-banner-copy>p:last-child{font-size:13px}
 .tg-game-page .memory-hero-art,.tg-game-page .reaction-hero-icon{display:none}
 .tg-game-page .tg-game-panel,.tg-game-page .tg-game-aside{padding:17px;border-radius:16px}
 .tg-game-page .tg-game-toolbar h2{font-size:19px}
 .tg-game-page .tg-memory-preview,.tg-game-page .tg-memory-board{
  width:min(100%,320px);max-width:320px;gap:10px
 }
 .tg-game-page .tg-memory-preview .memory-tile,.tg-game-page .tg-memory-board .memory-tile{border-radius:17px}
 .tg-game-page .tg-reaction-preview,.tg-game-page .reaction-play .reaction-target{width:min(100%,320px);max-width:320px}
 .tg-game-page .tg-game-intro{padding:21px 1px 10px}
 .tg-game-page .tg-game-playfield--tall{height:420px;max-width:400px}}
@media(prefers-reduced-motion:reduce){.tg-game-page .tg-game-button{transition:none}}

/* Shared secondary is always a quiet, light surface (dark surface in dark mode). */
.tg-game-page .tg-game-actions .tg-game-button-secondary{
 background:var(--surface)!important;color:var(--text)!important;
 border-color:var(--line)!important;box-shadow:none!important
}
.tg-game-page .tg-game-actions .tg-game-button-secondary:hover:not(:disabled){background:var(--surface-soft)!important}

/* Timing critical: never animate the signal change, especially not its colour.
   Red onset and the high resolution clock are set on the same animation frame. */
.tg-game-page .reaction-play .reaction-target,
.tg-game-page .reaction-play .reaction-target[data-state="go"]{
 transition:none!important;
 animation:none!important;
}

/* Shared chart token and isolation: generic SVG icon strokes must not affect
   chart type. Fill and line both use this deliberate per-visualisation blue. */
:root{--tg-chart-blue:#97B9E9}
.reaction-chart svg.tg-reaction-distribution-plot{
 width:100%;height:auto;max-height:270px;overflow:visible;
 stroke:none;fill:none
}
.reaction-chart svg.tg-reaction-distribution-plot text{
 stroke:none!important;paint-order:normal;
 font-family:inherit;letter-spacing:normal
}


/* GAME ICON COMPONENT - single source of truth.
   Every game uses the same square container. Consumers set only size tokens,
   never SVG transforms, child positioning or game-specific backgrounds.
   The reference is Sequence Memory's four correctly centred tiles. */
.tg-game-icon{
 --tg-icon-size:36px;
 --tg-icon-art-size:calc(var(--tg-icon-size) * .75);
 display:grid;place-items:center;box-sizing:border-box;
 position:relative;flex:0 0 var(--tg-icon-size);
 width:var(--tg-icon-size);height:var(--tg-icon-size);
 min-width:var(--tg-icon-size);min-height:var(--tg-icon-size);
 margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
 background:transparent;color:var(--tg-icon-color,var(--accent));
 transform:none;pointer-events:none;
}
.tg-game-icon[data-game="sequence-memory"]{
 --tg-icon-gap:calc(var(--tg-icon-art-size) * .063);
 grid-template-columns:repeat(2,calc((var(--tg-icon-art-size) - var(--tg-icon-gap))/2));
 grid-template-rows:repeat(2,calc((var(--tg-icon-art-size) - var(--tg-icon-gap))/2));
 gap:var(--tg-icon-gap);place-content:center;
}
.tg-game-icon[data-game="sequence-memory"] i{
 display:block;width:100%;height:100%;min-width:0;min-height:0;
 border-radius:calc(var(--tg-icon-art-size) * .105);box-shadow:none;
}
.tg-game-icon[data-game="sequence-memory"] i:nth-child(1){background:#EEA78B}
.tg-game-icon[data-game="sequence-memory"] i:nth-child(2){background:#EBC969}
.tg-game-icon[data-game="sequence-memory"] i:nth-child(3){background:#75BEA2}
.tg-game-icon[data-game="sequence-memory"] i:nth-child(4){background:#87ACE2}
.tg-game-icon[data-game="reaction-time"]{--tg-icon-color:#D58F45}
.tg-game-icon[data-game="reaction-time"] svg{
 display:block;width:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale, 1));
 height:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale, 1));
 max-width:none;max-height:none;margin:0;position:static;
 fill:currentColor;stroke:none;transform:none;
}
/* Shared Colour Memory artwork across navigation, statistics and banners. */
.tg-game-icon[data-game="colour-memory"] .tg-colour-wheel-art{
 display:block;width:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale, 1));
 height:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale, 1));
 border-radius:50%;background:conic-gradient(#ed5574,#f1ca65,#6ed079,#54bec3,#6385e9,#b36fd3,#ed5574);
 position:relative;
}
.tg-game-icon[data-game="colour-memory"] .tg-colour-wheel-art::after{
 content:"";position:absolute;inset:33%;border-radius:50%;background:var(--surface);
}
.tg-game-icon[data-game="pitchline"]{
 --tg-icon-color:#a274d0;
 display:flex;align-items:center;justify-content:center;
 gap:calc(var(--tg-icon-art-size) * .1);
}
.tg-game-icon[data-game="pitchline"] i{
 display:block;flex:0 0 calc(var(--tg-icon-art-size) * .12);
 width:calc(var(--tg-icon-art-size) * .12);
 height:calc(var(--tg-icon-art-size) * var(--tg-bar-height));
 background:currentColor;border:0;box-shadow:none;
 border-radius:999px;transform:none;
}
.tg-game-icon[data-game="pitchline"] i:nth-child(1),
.tg-game-icon[data-game="pitchline"] i:nth-child(5){--tg-bar-height:.25}
.tg-game-icon[data-game="pitchline"] i:nth-child(2),
.tg-game-icon[data-game="pitchline"] i:nth-child(4){--tg-bar-height:.65}
.tg-game-icon[data-game="pitchline"] i:nth-child(3){--tg-bar-height:1}
/* Shared Game Icon API: independent artwork X/Y scale inside standard cell. */
.tg-game-icon[data-game="cattiles"] svg{
 display:block;
 width:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale-x, var(--tg-icon-art-scale, 1)));
 height:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale-y, var(--tg-icon-art-scale, 1)));
 max-width:none;max-height:none;margin:0;position:static;
 object-fit:contain;transform:none;pointer-events:none;
}
/* Grouplet inherits the site's default SVG stroke unless explicitly reset.
   Enforce true fill-only artwork everywhere: sidebar, stats, hero and cards. */
.tg-game-icon[data-game="grouplet"]{
 background:transparent!important;border:0!important;box-shadow:none!important;
}
.tg-game-icon[data-game="grouplet"] svg{
 display:block;width:var(--tg-icon-art-size);height:var(--tg-icon-art-size);
 max-width:none;max-height:none;margin:0;position:static;
 overflow:visible;pointer-events:none;
 border:0!important;outline:0!important;box-shadow:none!important;
 stroke:none!important;stroke-width:0!important;
}
.tg-game-icon[data-game="grouplet"] rect{
 stroke:none!important;stroke-width:0!important;stroke-opacity:0!important;
}
/* Game Presentation: every new game's splash occupies the playfield width. */
/* Inherited site SVG strokes must not outline Cattiles' three floating
   coloured tiles. Shared everywhere: sidebar, catalogue, stats and title. */
.tg-game-icon[data-game="cattiles"] .ct-icon-art,
.tg-game-icon[data-game="cattiles"] .ct-icon-art rect{
 stroke:none;stroke-width:0;stroke-opacity:0;
}
.tg-game-icon[data-game="cattiles"]:not(.tg-game-icon--stats){
 background:transparent;border:0;box-shadow:none;
}
.tg-game-page .tg-game-stage-preview[data-game-preview="full"]{
 box-sizing:border-box;width:100%;max-width:100%;min-width:0;
 display:flex;justify-content:center;align-items:center;
}
body:not(.float-ui) .tg-game-page .float-title-emblem{display:none}
/* Sideweave uses the standard icon dimensions, without resizing exceptions. */
.tg-game-icon[data-game="sideweave"] img{
 display:block;width:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale, 1));
 height:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale, 1));
 max-width:none;max-height:none;margin:0;position:static;
 object-fit:contain;transform:none;pointer-events:none;
}
/* Navigation always uses exactly the same 24px icon cell as ordinary links. */
.sidebar .sidebar-game-list .side-nav a[data-game]>.tg-game-icon{
 --tg-icon-size:24px;--tg-icon-art-size:19px;
 grid-column:1;grid-row:1;justify-self:center;align-self:center;
}
.nav-flyout .tg-game-icon{--tg-icon-size:24px;--tg-icon-art-size:19px}
.page-stats .tg-game-icon--stats{
 --tg-icon-size:36px;--tg-icon-art-size:25px;
 background:var(--surface-soft);border-radius:11px;
}
.game-catalog-card .tg-game-icon{
 --tg-icon-size:76px;--tg-icon-art-size:58px;
}
.game-catalog-card .pitch-icons .tg-game-icon{
 --tg-icon-size:85px;--tg-icon-art-size:65px;
}
.tg-pitch-banner-art .tg-game-icon,
.tg-game-page .reaction-hero-icon .tg-game-icon{
 --tg-icon-size:120px;--tg-icon-art-size:106px;
}
/* Game Icon API: all direct SVG motifs inherit the emblem's icon-size
   tokens automatically; individual artwork retains its own stroke/fill. */
.tg-game-page .float-title-emblem .tg-game-icon > svg{
 display:block;width:var(--tg-icon-art-size);height:var(--tg-icon-art-size);
 max-width:none;max-height:none;min-width:0;min-height:0;
 margin:auto;position:static;opacity:1;transform:none;overflow:visible
}
.tg-game-icon[data-game="pinpoint"] svg,
.tg-game-icon[data-game="oddlings"] svg{
 display:block;width:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale, 1));
 height:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale, 1));
 max-width:none;max-height:none;fill:none;stroke:none;
}
/* This decorative frame is scaled by its wrapper only. No child transforms. */
body.float-ui .tg-game-page .float-title-emblem .tg-game-icon{
 --tg-icon-size:360px;--tg-icon-art-size:301px;
}
@media(max-width:700px){
 body.float-ui .tg-game-page .float-title-emblem .tg-game-icon{
  --tg-icon-size:265px;--tg-icon-art-size:221px;
 }
 .game-catalog-card .pitch-icons .tg-game-icon{
  --tg-icon-size:59px;--tg-icon-art-size:45px;
 }}

/* Extracted game presentation from public/float-gui.css */

/* Float game treatment. Existing controller DOM + IDs are deliberately unchanged. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page{
  --tg-game-panel-height:0;--tg-game-banner-height:0;
  --tg-game-action:var(--text);--tg-game-action-hover:var(--text);
  --tg-game-action-shadow:transparent;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner{
  display:flex;align-items:flex-start;justify-content:flex-start;
  height:auto;min-height:0;max-height:none;margin:13px auto 2px;
  padding:12px 10px 6px;background:transparent!important;border-radius:0;
  overflow:visible;color:var(--text)!important;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner-copy{color:var(--text)}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1{
  font-size:clamp(34px,3.7vw,52px);line-height:1.04;letter-spacing:-.07em;
  margin:4px 0 5px;font-weight:835;color:var(--text)
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner .eyebrow{
  margin:0 0 6px;color:var(--muted);opacity:1;letter-spacing:.15em;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner .tg-game-banner-copy>p:last-child{
  color:var(--muted);font-size:13px;opacity:1;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.memory-hero-art,.reaction-hero-icon,.tg-pitch-banner-art){display:none}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-layout{
  grid-template-columns:minmax(0,1fr);display:grid;gap:0;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel{
  position:relative;display:flex;flex-direction:column;align-items:center;
  width:100%;min-width:0;max-width:none;
  min-height:clamp(465px,calc(100dvh - 270px),770px);
  background:var(--float-gradient)!important;box-shadow:none;
  border:0;border-radius:24px;padding:14px 28px 23px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-toolbar{
  width:min(100%,560px);min-height:38px;padding:0 1px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-toolbar h2{
  font-size:0;width:1px;height:1px;overflow:hidden;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-round-badge{
  background:var(--surface-soft);color:var(--muted);border-radius:30px;
  padding:7px 13px;font-size:11px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel>div:not(.tg-game-toolbar):not(.memory-error){
  max-width:100%;margin-inline:auto;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro{
  width:100%;flex:1;justify-content:center;padding:18px 0 14px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-memory-preview,
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-memory-board{
  width:min(100%,min(37vw,39vh,414px));max-width:414px;gap:14px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-memory-preview .memory-tile,
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-memory-board .memory-tile{
  border:0;border-radius:21%;box-shadow:inset 0 -5px rgba(41,58,64,.06);
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-reaction-preview,
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .reaction-play .reaction-target{
  width:min(100%,min(37vw,39vh,414px));max-width:414px;border-radius:22%;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .reaction-play{
  margin-inline:auto;width:100%;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding-top:8px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-playfield--tall{
  width:min(100%,min(66vw,650px));max-width:650px;height:clamp(340px,43vh,500px)
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.tg-pitch-stage,.tg-pitch-preview){
  border:0!important;box-shadow:none!important;background:transparent!important;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-button{
  border-radius:30px;min-height:42px;padding:10px 20px;
  transition:background .18s,transform .18s,box-shadow .18s;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-button-primary{
  border-color:var(--text)!important;background:var(--text)!important;
  color:var(--canvas)!important;box-shadow:none!important
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-button-primary:active:not(:disabled){transform:scale(.96)!important}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-button-secondary{background:var(--surface)!important}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-aside{display:none}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results{
  width:100%;min-height:0;max-width:900px;margin:auto
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .reaction-chart-card{
  box-shadow:none;background:transparent
}
/* Live leaderboard strip + optional ten-player float. Data remains sourced from the
 * existing per-game leaderboard nodes, never copied from static mock scores. */
body.float-ui .float-leader-ribbon{
  width:100%;min-height:55px;margin:6px auto 0;padding:8px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;gap:16px;
}
body.float-ui .float-leader-ribbon .float-ribbon-label{font-size:12px;font-weight:810;white-space:nowrap}
body.float-ui .float-leader-ribbon .float-ribbon-label:before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:9px;background:var(--accent);
}
body.float-ui .float-ribbon-list{display:flex;flex:1;gap:clamp(12px,3vw,34px);justify-content:center;white-space:nowrap;overflow:hidden}
body.float-ui .float-ribbon-player{font-size:12px;font-weight:700}
body.float-ui .float-ribbon-player small{color:var(--muted);margin-right:7px}
body.float-ui .float-ribbon-player em{font-style:normal;font-size:11px;color:var(--muted);margin-left:6px}
body.float-ui .float-ribbon-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
body.float-ui .float-leader-ribbon :is(button,a),body.float-ui .float-leader-panel :is(button,a){
  color:var(--text);font-weight:760;font-size:12px;white-space:nowrap;
}
body.float-ui .float-leader-ribbon button,body.float-ui .float-leader-panel button{
  background:transparent;border:0;cursor:pointer;padding:8px 5px;border-radius:8px;
}
body.float-ui .float-leader-ribbon button:hover,body.float-ui .float-leader-panel button:hover{
  background:var(--surface-soft)
}
body.float-ui .float-board-host{position:relative;max-width:1280px;margin:auto}
body.float-ui .float-leader-panel{
  position:absolute;top:16px;right:12px;width:min(290px,32%);
  padding:14px 16px;border-radius:19px;z-index:5;
  background:color-mix(in srgb,var(--surface) 95%,transparent);
  border:1px solid var(--line);box-shadow:0 16px 48px rgba(30,49,61,.11);
  backdrop-filter:blur(18px);animation:float-board-in .28s ease both;
}
body.float-ui .float-board-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
body.float-ui .float-board-head strong{font-size:13px}
body.float-ui .float-board-rows{display:flex;flex-direction:column}
body.float-ui .float-board-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;
  font-size:11px;padding:7px 2px;border-bottom:1px solid var(--line)}
body.float-ui .float-board-row:last-child{border-bottom:0}
body.float-ui .float-board-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.float-ui .float-board-row strong{font-weight:var(--tg-rank-score-weight)}
body.float-ui .float-board-row small{color:var(--muted)}
body.float-ui .float-board-foot{display:flex;justify-content:flex-end;margin-top:10px}
body.float-ui .float-board-foot button,body.float-ui .float-board-foot a{font-size:11px}
body.float-ui .float-leader-ribbon[data-view="float"]{opacity:.95}
@keyframes float-board-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

@media(max-width:1050px){
  body.float-ui .float-leader-panel{display:none}
  body.float-ui .float-leader-ribbon [data-float-view="float"]{display:none}}
@media(max-width:700px){
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner{
    margin:2px 0 7px;padding:8px 5px 6px;
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1{font-size:35px}
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel{
    padding:9px 9px 18px;border-radius:20px;
    min-height:clamp(335px,calc(100dvh - 280px),680px);
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-memory-preview,
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-memory-board{
    width:min(100%,min(76vw,34vh,310px));max-width:310px;gap:10px
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-reaction-preview,
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .reaction-play .reaction-target{
    width:min(100%,min(76vw,34vh,310px));max-width:310px
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-playfield--tall{
    width:min(100%,360px);height:min(44vh,410px)
  }
  body.float-ui .float-leader-ribbon{padding:8px 11px;gap:10px;margin-top:5px}
  body.float-ui .float-ribbon-list{justify-content:flex-start;gap:12px}
  body.float-ui .float-ribbon-player:nth-child(n+2){display:none}
  body.float-ui .float-leader-ribbon [data-float-view="float"]{display:none}}
body.float-ui .app-shell:not(.admin-mode) .float-ribbon-actions>a:hover,
body.float-ui .app-shell:not(.admin-mode) .float-board-foot>a:hover{
  color:var(--accent);text-decoration:underline
}
/* One viewport-fit contract for every playable game. The page distributes
   height between its title, board and leaderboard; the board never imposes
   a 545/610px minimum independently of the available screen. */
body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden])){
  height:100dvh;min-height:0;
}
body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden])) main#main-content{
  flex:1 1 auto;height:auto;min-height:0;box-sizing:border-box;padding-bottom:0;
}
/* The original site footer is a separate, quiet viewport row, not a
   replacement for or overlay on the game's live scoreboard. */
body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden]))>.footer{
  display:flex;flex:0 0 32px;min-height:32px;box-sizing:border-box;
  padding:4px clamp(22px,3.8vw,64px) 6px;border:0;
  color:#858d92;font-size:11px;line-height:1.3;
}
body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden]))>.footer a{
  color:inherit;
}
body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden]))>.footer a:hover{
  color:var(--text);
}
:root[data-theme="dark"] body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden]))>.footer{
  color:#919a9d;
}
body.float-ui .app-shell:not(.admin-mode) #main-content>.tg-game-page:not([hidden]){
  --float-header-height:clamp(105px,17dvh,158px);
  --float-square-size:min(48vw,550px,max(170px,calc(100dvh - 370px)));
  --float-tall-height:min(600px,max(200px,calc(100dvh - 390px)));
  --float-art-height:var(--float-square-size);
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--float-header-height) minmax(0,1fr) auto;
  width:100%;max-width:100%;height:100%;min-height:0;min-width:0;overflow:visible;
}
body.float-ui .app-shell:not(.admin-mode) #main-content>.tg-game-page[data-page="pitchline"]:not([hidden]){
  --float-art-height:var(--float-tall-height);
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-board-host{
  width:100%;height:100%;min-height:0;min-width:0;
  margin:0 auto;box-sizing:border-box;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-leader-ribbon:not([hidden]){
  margin:4px 0 3px;min-height:56px;box-sizing:border-box;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner{
  height:100%;min-height:0;max-height:100%;margin:0;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-layout{
  width:100%;height:100%;min-height:0;min-width:0;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel{
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:0px minmax(0,1fr) 42px;
  box-sizing:border-box;width:100%;height:100%;min-height:0;
  align-items:stretch;padding:5px clamp(12px,2vw,28px) 7px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-toolbar{
  display:none!important;
  position:relative;z-index:3;grid-row:1;grid-column:1;
  left:auto;top:auto;transform:none;justify-self:center;
  width:min(100%,650px);min-height:30px;max-height:32px;
  flex:0 0 auto;align-self:center;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro{
  flex:1 1 auto;display:flex;flex-direction:column;
  grid-row:2;grid-column:1;position:relative;height:100%;align-items:center;justify-content:center;
  width:100%;min-height:0;margin:0 auto;padding:0 0 2px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .float-board-content{
  display:flex;flex:1 1 auto;min-height:0;
  width:100%;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .float-board-content>p{
  margin:4px 0 0;max-width:480px;text-align:center;color:var(--muted);
  font-size:12px;line-height:1.5
}
/* Pitchline's instructions belong to the bottom control region, never in
   the visual board's vertical centering calculation. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-pitch-instructions{
 position:absolute;bottom:70px;left:50%;right:auto;
 transform:translateX(-50%);width:min(100%,480px);
 margin:0;max-width:480px;text-align:center;pointer-events:none;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .tg-game-actions{
  position:absolute;bottom:0;left:0;right:0;
  margin:0 auto!important;padding:10px 0 0;flex:0 0 auto;
  min-height:53px;width:100%;justify-content:center;
  align-items:center;gap:10px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.tg-memory-preview,.tg-memory-board){
  width:var(--float-square-size);height:var(--float-square-size);max-width:100%;max-height:100%;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.tg-reaction-preview,.reaction-play .reaction-target){
  width:var(--float-square-size);height:var(--float-square-size);max-width:100%;max-height:100%;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-playfield--tall{
  width:min(100%,720px);max-width:720px;
  height:var(--float-tall-height);min-height:0;max-height:100%;
}
/* Preview and active boards occupy the identical centred square. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.tg-memory-preview,.tg-memory-board,
  .tg-reaction-preview,.reaction-play .reaction-target){
  flex:0 0 auto;aspect-ratio:1;min-height:0;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-reaction-preview .reaction-target{
  width:100%;height:100%;min-height:0;max-height:100%;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-stage-preview{
  flex-shrink:0;margin:0 auto;
}
/* Intro and play occupy the SAME grid row, so entering a game doesn't
   change the preview's centre. Status and instructions use the edges. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.tg-game-play,.tg-game-results){
  grid-row:2;grid-column:1;min-height:0;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.tg-game-play):not([hidden]){
  height:100%;width:100%;margin:0;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.memory-progress,.reaction-progress){
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:center;pointer-events:none;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.memory-hint,.reaction-play-hint,.tg-pitch-hint){
  position:absolute;bottom:0;left:0;right:0;
  text-align:center;margin:0;pointer-events:none;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-progress-footer{
  grid-row:3;grid-column:1;align-self:center;justify-self:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:min(100%,560px);height:42px;min-height:0;margin:0 auto;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-progress-footer[hidden],
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-restart[hidden]{display:none!important}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel:has(.tg-game-restart:not([hidden])){
  grid-template-rows:0px minmax(0,1fr) 76px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-progress-footer:has(.tg-game-restart:not([hidden])){
  height:76px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-game-progress{
  align-self:center;margin:0 auto;width:100%;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-restart{
  flex:none;min-height:32px;padding:5px 18px;
  font-size:12px;font-weight:740;white-space:nowrap;
}
@keyframes tg-game-enter{from{opacity:.55}to{opacity:1}}
body.float-ui .tg-game-page :is(.tg-game-play):not([hidden]){
 animation:tg-game-enter .18s ease-out both;
}
@media(prefers-reduced-motion:reduce){
 body.float-ui .tg-game-page :is(.tg-game-play):not([hidden]){animation:none}}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .reaction-play{
  align-self:stretch;justify-content:center;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.tg-game-button,.tg-game-round-badge){
  font-variant-numeric:tabular-nums
}
/* Native dialog is a top-layer element: it does not remount or interrupt games. */
body.float-ui .float-full-leaderboard{
  --float-dialog-panel:var(--surface);
  width:min(740px,calc(100vw - 36px));height:calc(100dvh - 30px);max-height:1100px;
  padding:0;border:1px solid var(--line);border-radius:24px;
  background:var(--float-dialog-panel);color:var(--text);
  box-shadow:0 28px 95px rgba(10,25,30,.25);
  overflow:hidden;
}
body.float-ui .float-full-leaderboard[open]{
  display:flex;flex-direction:column;
  animation:float-dialog-enter .28s cubic-bezier(.16,1,.3,1) both
}
@keyframes float-dialog-enter{
  from{opacity:0;transform:translateY(20px) scale(.98)}
  to{opacity:1;transform:none}
}
body.float-ui .float-dialog-heading{
  padding:20px 30px 13px;display:flex;flex-shrink:0;gap:18px;
  align-items:flex-start;justify-content:space-between;
}
body.float-ui .float-dialog-eyebrow{
  color:var(--muted);font-size:10px;font-weight:820;letter-spacing:.15em
}
body.float-ui .float-dialog-title-row{
  display:flex;align-items:center;gap:11px;min-width:0;margin:6px 0 7px;
}
body.float-ui .float-dialog-title-row .float-dialog-game-icon{
  flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;
}
body.float-ui .float-dialog-game-icon .tg-game-icon{
  --tg-icon-size:38px;--tg-icon-art-size:29px;
}
body.float-ui .float-dialog-heading h2{
  font-size:clamp(27px,3.3vw,40px);line-height:1.1;
  font-weight:830;letter-spacing:-.055em;margin:0;min-width:0
}
body.float-ui .float-dialog-heading p{
  font-size:12px;color:var(--muted);margin:0
}
body.float-ui .float-dialog-close{
  flex:0 0 auto;display:grid;place-items:center;
  border:0;border-radius:11px;color:var(--muted);
  background:var(--surface-soft);width:36px;height:36px;
  cursor:pointer;transition:background .2s,transform .2s
}
body.float-ui .float-dialog-close:hover{
  background:var(--selected);transform:scale(1.06);color:var(--text)
}
body.float-ui .float-dialog-list{
  flex:1 1 0;min-height:0;overflow-y:auto;
  padding:0 30px;scrollbar-width:none;transition:opacity .2s ease
}
/* Keep the loading message visible while a Play/Daily request is pending. */
body.float-ui .float-dialog-list.is-loading{opacity:1}
body.float-ui .float-dialog-row{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;gap:12px;padding:8px 10px;min-height:43px;
  border-bottom:1px solid var(--line);font-size:13px;
}
body.float-ui .float-dialog-row:last-child{border-bottom:0}
body.float-ui .float-dialog-rank{
  color:var(--muted);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums
}
body.float-ui .float-dialog-name{
  font-weight:var(--tg-rank-name-weight);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
body.float-ui .float-dialog-name small{
  font-size:10px;margin-left:6px;color:var(--muted)
}
body.float-ui .float-dialog-score{
  font-weight:var(--tg-rank-score-weight);font-variant-numeric:tabular-nums;white-space:nowrap
}
body.float-ui .float-dialog-empty{
  padding:36px 10px;color:var(--muted);font-size:13px;text-align:center
}
body.float-ui .float-dialog-retry{
  display:block;margin:0 auto 20px;padding:9px 18px;
  border:1px solid var(--line);border-radius:11px;
  background:var(--surface-soft);color:var(--text);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;
}
body.float-ui .float-dialog-retry:hover{background:var(--selected)}
body.float-ui .float-dialog-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 30px 14px;border-top:1px solid var(--line);flex-shrink:0;
  gap:18px;color:var(--muted);font-size:11px
}
body.float-ui .float-dialog-done{
  border:0;border-radius:30px;background:var(--text);color:var(--canvas);
  padding:10px 21px;font-weight:760;cursor:pointer
}
body.float-ui .float-dialog-done:hover{transform:translateY(-1px)}
body.float-ui .float-leader-ribbon button[data-float-view="full"]{
  background:transparent;border:0
}
body.float-ui .float-leader-ribbon{transition:background .2s}
@media(max-width:700px){
  /* Reserve the fixed mobile navigation separately; distribute the remaining
     space among the topbar, game and understated footer without scrolling. */
  body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden])){
    height:calc(100dvh - 70px - env(safe-area-inset-bottom));
  }
  body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden])) main#main-content{
    height:auto;flex:1 1 auto;min-height:0;padding:0 13px;
  }
  body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden]))>.footer{
    flex-basis:28px;min-height:28px;padding:3px 13px 5px;font-size:10px;
  }
  body.float-ui .app-shell:not(.admin-mode) #main-content>.tg-game-page:not([hidden]){
    --float-header-height:clamp(93px,16dvh,125px);
    --float-square-size:min(85vw,480px,max(120px,calc(100dvh - 420px)));
    --float-tall-height:min(480px,max(195px,calc(100dvh - 420px)));
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel{
    height:100%;min-height:0;padding:4px 9px 6px;
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro{
    padding:2px 0 4px
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.tg-memory-preview,.tg-memory-board,
    .tg-reaction-preview,.reaction-play .reaction-target){
    width:var(--float-square-size);height:var(--float-square-size);max-width:100%;max-height:100%
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-playfield--tall{
    width:min(100%,480px);max-width:480px;height:var(--float-tall-height);min-height:0;max-height:100%
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .float-board-content{gap:6px}
  body.float-ui .float-full-leaderboard{height:calc(100dvh - 26px);max-height:calc(100dvh - 26px);border-radius:21px}
  body.float-ui .float-dialog-heading{padding:22px 20px 14px}
  body.float-ui .float-dialog-list{padding:0 14px}
  body.float-ui .float-dialog-row{padding:11px 6px}
  body.float-ui .float-dialog-foot{padding:15px 19px 22px}}


@media(max-width:700px) and (max-height:710px){
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .float-board-content{gap:4px}
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .float-board-content>p{
    font-size:11px;line-height:1.4
  }}

/* Extracted game presentation from public/float-refinements.css */

body.float-ui .app-shell:not(.admin-mode) .float-leader-ribbon[hidden],
body.float-ui .app-shell:not(.admin-mode) .float-leader-panel[hidden]{display:none!important}
/* Only the centred handle initiates a drag: the Play/Daily switch is always clickable. */
body.float-ui .app-shell:not(.admin-mode) .float-board-head{
  position:relative;min-height:40px;padding-top:12px;user-select:none
}
body.float-ui .app-shell:not(.admin-mode) .float-board-handle{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;
  width:48px;height:17px;border-radius:9px;
  cursor:grab;touch-action:none;
}
body.float-ui .app-shell:not(.admin-mode) .float-board-handle::before{
  content:"";width:30px;height:4px;border-radius:999px;
  background:var(--muted);opacity:.48;
}
body.float-ui .app-shell:not(.admin-mode) .float-board-handle:active{cursor:grabbing}
body.float-ui .app-shell:not(.admin-mode) .float-board-handle:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px
}
body.float-ui .app-shell:not(.admin-mode) .float-board-head button{cursor:pointer}
body.float-ui .app-shell:not(.admin-mode) .float-board-reset{
  margin-left:auto;min-width:25px;min-height:25px;
  border-radius:50%;font-size:17px;font-weight:600;line-height:1;
  color:var(--muted);opacity:.65;
}
body.float-ui .app-shell:not(.admin-mode) .float-board-reset:hover{opacity:1}
body.float-ui .app-shell:not(.admin-mode) .float-leader-panel{
  width:clamp(245px,26vw,310px);right:12px;left:auto;top:16px;
}
body.float-ui .app-shell:not(.admin-mode) .float-leader-panel .float-board-row{
  grid-template-columns:22px 17px minmax(0,1fr) auto;gap:7px;
  padding:7px 15px;
}body.float-ui .app-shell:not(.admin-mode) .float-ribbon-icon{
  color:var(--muted);font-size:14px;text-align:center
}
body.float-ui .app-shell:not(.admin-mode) .float-board-row>span:nth-last-child(2){
  font-weight:var(--tg-rank-name-weight)
}
body.float-ui .app-shell:not(.admin-mode) .float-leader-ribbon[data-view="float"]{
  display:none!important
}
body.float-ui .float-dialog-row{
  grid-template-columns:35px 23px minmax(0,1fr) auto;gap:11px
}
body.float-ui .float-dialog-kind{
  display:inline-flex;justify-content:center;align-items:center;
  color:var(--muted);font-size:15px
}
body.float-ui .float-dialog-name{display:inline-flex;align-items:center;gap:4px}
/* Float decorative game title: quiet, angled mark, never obscures information. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner{
  min-height:145px;align-items:center;position:relative;overflow:hidden;
  padding-left:clamp(26px,4.5vw,62px);isolation:isolate;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner-copy{
  position:relative;z-index:2
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem{
  display:flex;align-items:center;justify-content:center;
  position:absolute;top:-50px;left:-58px;width:270px;height:250px;
  opacity:.13;transform:rotate(-24deg);z-index:0;pointer-events:none;
  color:var(--text)
}
body.float-ui .app-shell:not(.admin-mode) .rankings-combined-row .memory-rank-player{font-size:13px}
body.float-ui .app-shell:not(.admin-mode) .game-rankings-detail .memory-ranking{
  max-width:none;background:transparent;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:none
}
@media(max-width:700px){
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner{
    min-height:125px;padding-left:23px
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem{
    top:-10px;left:-42px;width:175px;height:160px;opacity:.12
  }}
@media(prefers-reduced-motion:reduce){body.float-ui .float-dialog-row,
body.float-ui .float-board-row{transition:none}}
/* Consistent hero identity: all marks use one centered 330px icon box,
   upscaled and partly bleeding off the page under the legible title. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner{
  position:relative;height:100%;min-height:0;max-height:100%;
  margin:0;padding:clamp(9px,2dvh,20px) 12px 8px clamp(37px,5vw,85px);
  overflow:visible;isolation:isolate
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner-copy{
  position:relative;z-index:2
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem{
  display:grid!important;place-items:center!important;
  position:absolute;z-index:0;top:-160px;left:-174px;
  width:510px;height:510px;opacity:.16;transform:rotate(-21deg);
  pointer-events:none;overflow:visible;color:var(--text)
}
/* The header artwork stays behind the text and never touches controls. */
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner{
   height:100%;min-height:0;max-height:100%;padding:10px 7px 5px 28px;overflow:visible
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem{
   top:-97px;left:-126px;width:350px;height:350px;opacity:.14
 }}
/* Leaderboard strapline: each ranked player's icon, name and result
   has deliberate spacing and a three-place medal accent. */
body.float-ui .app-shell:not(.admin-mode) .float-leader-ribbon{
  cursor:pointer;gap:19px;padding:11px 18px;min-height:62px;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
body.float-ui .app-shell:not(.admin-mode) .float-leader-ribbon:hover{
  background:var(--surface-soft);border-color:color-mix(in srgb,var(--accent) 22%,var(--line));
  box-shadow:0 7px 23px rgba(20,32,40,.035)
}
body.float-ui .app-shell:not(.admin-mode) .float-ribbon-list{
  flex:1 1 auto;gap:clamp(18px,2.2vw,34px);
  justify-content:flex-start;align-items:center;
}
body.float-ui .app-shell:not(.admin-mode) .float-ribbon-player{
  display:inline-flex;align-items:center;gap:10px;
  flex:0 0 auto;font-size:12px;font-weight:var(--tg-rank-name-weight);min-width:0;
}
body.float-ui .app-shell:not(.admin-mode) .float-ribbon-player small{
  font-weight:900;font-size:11px;margin:0;min-width:15px;text-align:center;
}
body.float-ui .app-shell:not(.admin-mode) .float-ribbon-icon{
  display:inline-grid;place-items:center;min-width:16px;
  margin:0;font-size:14px;color:var(--muted)
}
body.float-ui .app-shell:not(.admin-mode) .float-ribbon-player em{
  margin-left:3px;color:var(--muted);font-size:11px;font-weight:var(--tg-rank-score-weight)
}
body.float-ui .app-shell:not(.admin-mode) .float-leader-panel{
  cursor:pointer;transition:box-shadow .2s,border-color .2s
}
body.float-ui .app-shell:not(.admin-mode) .float-leader-panel:hover{
  box-shadow:0 20px 58px rgba(24,39,48,.16)
}
body.float-ui .app-shell:not(.admin-mode) .float-leader-ribbon:focus-visible,
body.float-ui .app-shell:not(.admin-mode) .float-leader-panel:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px
}
body.float-ui .app-shell:not(.admin-mode) .float-ribbon-actions button{
  border-radius:9px;padding:9px 8px
}
body.float-ui .float-dialog-rank{font-weight:900}
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) .float-leader-ribbon{
   gap:10px;padding:10px 12px;min-height:56px
 }
 body.float-ui .app-shell:not(.admin-mode) .float-ribbon-list{gap:10px}
 body.float-ui .app-shell:not(.admin-mode) .float-ribbon-player{gap:8px}}
/* A single progress track for all staged gameplay; the game controller's
   existing round label drives its fill and ARIA value. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-game-progress{
  position:relative;flex:0 0 auto;align-self:center;
  display:flex;flex-direction:column;justify-content:center;gap:7px;
  width:min(100%,560px);height:34px;min-height:34px;
  margin:0 auto;overflow:visible;background:transparent
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-game-progress[hidden]{
  display:none!important
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-game-progress-caption{
  font-size:11px;font-weight:740;line-height:1.2;color:var(--muted);
  text-align:center;font-variant-numeric:tabular-nums
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-game-progress-track{
  display:block;width:100%;height:4px;min-height:4px;overflow:hidden;
  border-radius:8px;background:color-mix(in srgb,var(--text) 11%,transparent)
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-game-progress-fill{
  display:block;width:0;height:100%;border-radius:8px;
  background:var(--tg-game-ink,var(--accent));
  transition:width .38s cubic-bezier(.2,.9,.26,1)
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel> :is(.tg-game-play):not([hidden]){
  flex:1 1 auto;min-height:0;align-self:stretch;
}
body.float-ui .app-shell:not(.admin-mode) #pitch-feedback{
  pointer-events:auto!important
}
body.float-ui .app-shell:not(.admin-mode) #pitch-feedback:not([hidden]) #pitch-next{
  position:relative;z-index:15;pointer-events:auto!important;
  touch-action:manipulation;cursor:pointer
}
body.float-ui .app-shell:not(.admin-mode) #pitch-feedback:not([hidden]) .tg-pitch-feedback-bottom{
  position:absolute;z-index:12;pointer-events:auto
}

/* Pitchline root cause: its flexible #pitch-play had 0px intrinsic width.
   Give every live playable section a deterministic cross-axis width so
   absolute result controls always live inside an actual playfield. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel > :is(.tg-game-play):not([hidden]){
  display:flex;flex-direction:column;
  width:100%!important;max-width:100%!important;min-width:0;
  box-sizing:border-box;align-self:stretch!important;
  margin-inline:0!important
}
body.float-ui .app-shell:not(.admin-mode) #pitch-play{
  width:100%!important;max-width:100%!important;min-width:0!important;
  box-sizing:border-box;align-self:stretch!important
}
body.float-ui .app-shell:not(.admin-mode) #pitch-play .tg-pitch-stage{
  flex:0 0 auto;align-self:center;position:relative;
  box-sizing:border-box;width:min(100%,720px)!important;
  max-width:720px!important;min-width:min(100%,280px)!important;
  margin:0 auto!important;overflow:hidden
}
body.float-ui .app-shell:not(.admin-mode) #pitch-play .tg-pitch-feedback{
  width:100%!important;min-width:0;box-sizing:border-box
}
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) #pitch-play .tg-pitch-stage{
   width:min(100%,480px)!important;max-width:480px!important;
   min-width:min(100%,260px)!important
 }}
/* Game colour is declared once at the emblem wrapper; the SVG inherits it. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page[data-page="pitchline"] .float-title-emblem{
  color:#a274d0!important;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-toolbar{
  align-self:center!important;justify-content:flex-start!important;
  align-items:center!important;min-height:30px!important;
  width:min(100%,650px)!important;margin:0!important;
  padding:0 4px!important
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-toolbar .tg-game-round-badge{
  flex:0 0 auto;margin:0!important;
  padding:7px 13px!important;text-align:left!important;
  font-size:12px;letter-spacing:.01em;font-weight:750;
  font-variant-numeric:tabular-nums
}
body.float-ui .app-shell:not(.admin-mode) #memory-play .memory-progress #memory-round,
body.float-ui .app-shell:not(.admin-mode) #reaction-play .reaction-progress #reaction-round,
body.float-ui .app-shell:not(.admin-mode) #pitch-play .tg-pitch-status #pitch-round{
  display:none!important
}
/* Keep contextual statuses but remove second round-label slots. */
body.float-ui .app-shell:not(.admin-mode) #pitch-play .tg-pitch-status{
  justify-content:flex-end!important
}
body.float-ui .app-shell:not(.admin-mode) #memory-play .memory-progress,
body.float-ui .app-shell:not(.admin-mode) #reaction-play .reaction-progress{
  justify-content:flex-end!important;
}


/* Backdrop scale is now expressed in one shared transform contract.
   Scaling its decorative layer never affects playfield or title hitboxes. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem{
  --tg-emblem-scale:1;
  --tg-emblem-shift:0px;
  transform:translateX(var(--tg-emblem-shift)) rotate(-21deg) scale(var(--tg-emblem-scale))!important;
  transform-origin:50% 50%;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page[data-page="pitchline"] .float-title-emblem{
  --tg-emblem-scale:1.25;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page[data-page="reaction-time"] .float-title-emblem{
  --tg-emblem-scale:1.4;
  --tg-emblem-shift:-62px;
}
@media(max-width:700px){
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page[data-page="reaction-time"] .float-title-emblem{
    --tg-emblem-shift:-40px;
  }}

/* Unified game completion: one flexible, viewport-safe design for all games. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results{
  box-sizing:border-box;display:flex;flex-direction:column;align-items:center;
  justify-content:safe center;gap:clamp(10px,1.4vh,18px);width:min(100%,680px);
  height:100%;min-height:0;max-width:680px;padding:12px 14px 18px;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;text-align:center
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results[hidden]{display:none!important}
/* All 14 result screens can gain sections after completion: leaderboard charts,
   account handoff, verified score receipts, recaps and action bars. Those sections
   must occupy their full measured height before the result panel scrolls. The
   default flex-shrink:1 used to collapse tall receipts to zero height, letting
   the trophy and text paint over the guest account prompt beneath them. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
  .tg-game-results > :not([hidden]){
  box-sizing:border-box;min-width:0;flex-shrink:0;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
  .tg-game-results > :is(.memory-save-status,#pitch-save-message){
  display:flex;justify-content:center;align-items:center;
  width:min(100%,520px);min-height:0;margin:0;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
  .tg-game-results > :is(.memory-save-status,#pitch-save-message):empty{
  min-height:0;padding:0;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
  .tg-game-results > .tg-guest-save-account{
  margin:0 auto;flex:0 0 auto;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
  .tg-game-results .tg-save-feedback-content{
  box-sizing:border-box;max-width:100%;min-width:0;
}

body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-result-overview{
  width:100%;max-width:480px;display:flex;flex-direction:column;
  align-items:center;gap:5px;flex:0 0 auto
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-result-eyebrow{
  font-size:11px;letter-spacing:.14em;font-weight:780;color:var(--muted);margin:0 0 9px
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-result-value{
  position:relative;isolation:isolate;display:block;
  font-size:clamp(45px,6vw,76px);line-height:1.07;
  letter-spacing:-.07em;font-weight:820;color:var(--text);font-variant-numeric:tabular-nums
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-result-value::before{
  content:"";position:absolute;inset:-18px -45px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--tg-result-glow,rgba(140,164,184,.13)),transparent 72%);
  filter:blur(9px)
}
body.float-ui .tg-game-page[data-page="sequence-memory"]{--tg-result-glow:rgba(102,178,158,.16)}
body.float-ui .tg-game-page[data-page="reaction-time"]{--tg-result-glow:rgba(233,166,105,.15)}
body.float-ui .tg-game-page[data-page="pitchline"]{--tg-result-glow:rgba(160,114,208,.16)}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-result-description{
  font-size:13px;color:var(--muted);font-weight:620
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-result-detail{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  width:min(100%,390px);margin:14px auto 0;padding:13px 4px;
  border-top:1px solid var(--line);font-size:13px;color:var(--muted)
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-result-detail strong{
  font-size:16px;color:var(--text);font-weight:750;font-variant-numeric:tabular-nums
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-game-actions{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin:8px 0 0;flex:0 0 auto
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results :is(.memory-save-status,#pitch-save-message){
  font-size:12px;color:var(--muted);line-height:1.5;margin:0;min-height:0
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .memory-guest-result{
  margin:2px 0 0;max-width:440px;width:100%;box-shadow:none
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .memory-link{
  font-size:12px;color:var(--muted)
}
body.float-ui .app-shell:not(.admin-mode) .reaction-results .reaction-chart-card{
  box-sizing:border-box;width:min(100%,480px);margin:0;padding:8px 0;
  border:0;border-top:1px solid var(--line);border-radius:0;flex:0 1 auto
}
body.float-ui .app-shell:not(.admin-mode) .reaction-results .reaction-chart{min-height:55px;margin:6px 0 0}
body.float-ui .app-shell:not(.admin-mode) .reaction-results .reaction-chart svg{max-height:150px}

/* Game Presentation result-chart slot: Reaction Time's chart language reused
   without per-game chart cards, SVG stroke overrides or duplicate labels. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-result-chart-card{
 box-sizing:border-box;width:min(100%,480px);max-width:480px;
 margin:4px 0 0;padding:10px 0 0;flex:0 0 auto;
 border:0;border-top:1px solid var(--line);border-radius:0;
 background:transparent;box-shadow:none;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-result-chart-card[hidden]{
 display:none!important;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-result-chart-card .reaction-chart{
 min-height:55px;margin:5px 0 0;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-result-chart-card .reaction-chart svg{
 max-height:150px;
}
.tg-game-page .tg-result-description strong{font-weight:820;color:var(--text);}

/* Pitchline recap: five numbered results with breathing room, not a bare row of digits. */
body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results{gap:clamp(16px,2.3vh,26px)}
body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results .tg-result-overview{gap:8px}
body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results .tg-result-round-recap{
  box-sizing:border-box;width:min(100%,440px);margin-top:19px;
  padding:17px 0 0;border-top:1px solid var(--line)
}
body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results .tg-result-recap-label{
  display:block;margin-bottom:13px;color:var(--muted);font-size:11px;
  font-weight:720;letter-spacing:.08em;text-transform:uppercase
}
body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results .tg-pitch-round-summary{
  counter-reset:pitch-round;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;width:100%;margin:0
}
body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results .tg-pitch-round-summary span{
  counter-increment:pitch-round;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;min-width:0;padding:11px 3px 10px;
  background:var(--surface-soft);color:var(--text);border-radius:12px;
  font-size:13px;font-weight:730;font-variant-numeric:tabular-nums
}
body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results .tg-pitch-round-summary span::before{
  content:counter(pitch-round,decimal-leading-zero);font-size:10px;
  font-weight:760;letter-spacing:.08em;color:var(--muted)
}
body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results #pitch-save-message{margin:0}

/* A result page can return to the game introduction via its main title. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1 .tg-game-title-home{
  appearance:none;display:inline-flex;align-items:center;vertical-align:baseline;
  padding:0;margin:0;border:0;border-radius:6px;background:transparent;
  color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:left
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1 .tg-game-title-home:disabled{
  opacity:1;cursor:inherit
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1 .tg-game-title-home:not(:disabled){
  cursor:pointer;transition:color .2s ease
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1 .tg-game-title-home:not(:disabled)::after{
  content:"↶";display:inline-block;margin-left:12px;font-size:.4em;opacity:.45;
  transform:translateX(-2px);transition:transform .22s ease,opacity .22s ease
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1 .tg-game-title-home:not(:disabled):hover::after,
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1 .tg-game-title-home:not(:disabled):focus-visible::after{
  transform:translateX(2px);opacity:1
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1 .tg-game-title-home:focus-visible{
  outline:2px solid var(--accent);outline-offset:5px
}

/* Playful, short entry animation shared by every completed game. */
@keyframes tg-result-rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes tg-result-pop{
  0%{opacity:0;transform:translateY(12px) scale(.89)}
  65%{opacity:1;transform:translateY(0) scale(1.035)}
  100%{opacity:1;transform:none}
}
@keyframes tg-result-details{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results:not([hidden]) .tg-result-overview{
  animation:tg-result-rise .5s cubic-bezier(.22,1,.36,1) both
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results:not([hidden]) .tg-result-value{
  animation:tg-result-pop .65s cubic-bezier(.2,1,.3,1) .09s both
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results:not([hidden]) .tg-result-detail,
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results:not([hidden]) .tg-result-round-recap{
  animation:tg-result-details .44s ease-out .23s both
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results:not([hidden]) .reaction-chart-card{
  animation:tg-result-details .5s ease-out .25s both
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results:not([hidden]) > :is(.tg-game-actions,.memory-start-actions,#pitch-again,.memory-save-status,#pitch-save-message,.memory-guest-result){
  animation:tg-result-details .45s ease-out .3s both
}

/* Smooth reset and feedback; the red timing state has no entrance transition. */
@keyframes tg-reaction-soft-enter{
  from{opacity:.45;transform:translateY(5px)}
  to{opacity:1;transform:none}
}
@keyframes tg-reaction-score-pop{
  0%{opacity:.45;transform:scale(.94)}
  65%{opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:none}
}
body.float-ui .tg-game-page .reaction-play .reaction-target[data-state="wait"] :is(span,small){
  animation:tg-reaction-soft-enter .32s ease-out both
}
body.float-ui .tg-game-page .reaction-play .reaction-target[data-state="done"] span,
body.float-ui .tg-game-page .reaction-play .reaction-target[data-state="early"] span{
  animation:tg-reaction-score-pop .34s cubic-bezier(.2,1,.3,1) both
}
body.float-ui .tg-game-page .reaction-play .reaction-target[data-state="countdown"]{
  background:color-mix(in srgb,var(--tg-game-mint) 70%,var(--surface));
  color:var(--tg-game-stage-ink)
}
body.float-ui .tg-game-page .reaction-play .reaction-target[data-state="go"]{transition:none!important}
body.float-ui .app-shell:not(.admin-mode) :is(.tg-game-page .tg-game-banner h1,.rankings-hub>.page-header h1){
  font-size:clamp(40px,4.7vw,64px);font-weight:810;
  letter-spacing:-.065em;line-height:1.04
}
body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden]))>.footer{
  color:#a5adb2;font-size:10px
}:root[data-theme="dark"] body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden]))>.footer{
  color:#818b92
}
@media(max-width:700px){
  body.float-ui .app-shell:not(.admin-mode) :is(.tg-game-page .tg-game-banner h1,.rankings-hub>.page-header h1){
    font-size:clamp(38px,8.5vw,47px)
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results{
    padding:8px 10px 14px;gap:9px
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-result-value{
    font-size:clamp(44px,12vw,62px)
  }
  body.float-ui .app-shell:not(.admin-mode) .reaction-results .reaction-chart svg{max-height:110px}
  body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results .tg-result-round-recap{
    margin-top:10px;padding-top:12px
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results .tg-pitch-round-summary{
    gap:5px
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results .tg-pitch-round-summary span{
    padding:8px 2px;font-size:11px
  }}
@media(max-height:720px){
  body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results{gap:10px}
  body.float-ui .app-shell:not(.admin-mode) .tg-pitch-results .tg-result-round-recap{
    margin-top:6px;padding-top:10px
  }}
@media(prefers-reduced-motion:reduce){
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results *,
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-result-overview,
  body.float-ui .tg-game-page .reaction-play .reaction-target :is(span,small){
    animation:none!important;transition:none!important
  }}

/* Float mobile: a proper independent drawer, never the desktop collapsed rail.
   Desktop collapse preference stays saved without changing the phone layout. */
@media(max-width:700px){body.float-ui .app-shell:not(.admin-mode) #main-content>.tg-game-page:not([hidden]),
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-board-host,
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-layout,
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel{
    box-sizing:border-box;min-width:0;max-width:100%
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-layout{
    grid-template-columns:minmax(0,1fr)
  }
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(
    .tg-memory-preview,.tg-memory-board,.tg-reaction-preview,
    .reaction-play .reaction-target,.tg-pitch-preview,.tg-pitch-stage){
    box-sizing:border-box;min-width:0;max-width:100%
  }}

/* A clickable game heading must not become one unbreakable flex item.
   Shorter mobile titles remain one line; long ones may wrap cleanly. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner-copy,
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1{
  min-width:0;max-width:100%
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1 .tg-game-title-home{
  max-width:100%;white-space:normal;overflow-wrap:normal;text-wrap:balance
}
@media(max-width:370px){
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1{
    font-size:clamp(32px,9.25vw,38px)
  }}

/* Hero emblems deliberately overscale behind text; their transformed pixels
   must not widen narrow phone pages or create horizontal scrolling. */
@media(max-width:700px){
  body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner{
    overflow-x:clip;overflow-y:visible
  }}

/* Compact mobile chrome and edge-to-edge title artwork. */
@media(max-width:700px){body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden]))>.footer{display:none!important}
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner{
   box-sizing:border-box;width:calc(100% + 26px);max-width:none;
   margin-inline:-13px;padding-left:41px
 }}
body.float-ui .app-shell:not(.admin-mode) .float-leader-ribbon .float-ribbon-label{
 display:inline-flex;align-items:center;flex:0 0 auto;
 padding-right:17px;margin-right:1px;min-height:25px;border-right:1px solid var(--line)
}
body.float-ui .float-leader-ribbon .float-ribbon-label::before{background:#55ac80}
body.float-ui .app-shell:not(.admin-mode) .float-ribbon-actions button[data-float-view="float"],
body.float-ui .app-shell:not(.admin-mode) .float-ribbon-actions button[data-float-view="full"]{
 width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;
 padding:7px;border-radius:10px;flex:0 0 35px
}
body.float-ui .app-shell:not(.admin-mode) .float-ribbon-actions button svg{
 width:19px;height:19px;display:block;stroke-width:1.8
}
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) .float-leader-ribbon .float-ribbon-label{
  padding-right:11px;margin-right:0
 }}

/* Extracted game presentation from public/data-layout.css */


/* Lists and rankings: the board's geometry is independent of row count. */
.memory-rank-rows.tg-data-region{min-height:240px}
.game-rankings-detail .memory-rank-rows{
  height:auto;max-height:none;min-height:0;overflow:visible;
  scrollbar-width:none
}

/* Float data animates only inside already laid-out score regions. */
body.float-ui :is(.float-ribbon-list,.float-board-rows){transition:opacity 220ms ease}
body.float-ui :is(.float-ribbon-list,.float-board-rows)[data-tg-loading="true"]{opacity:0}
/* Floating leaderboards and strips never grow when their row data arrives. */
body.float-ui .float-board-rows{
  height:340px;min-height:340px;overflow:hidden;scrollbar-width:none
}
body.float-ui .float-board-row{
  height:34px;min-height:34px;flex:0 0 34px;box-sizing:border-box
}
body.float-ui .float-ribbon-list{min-height:26px;align-items:center}
/* Reaction-time charts receive results inside a pre-existing plot region. */
.rankings-reaction-curve .reaction-chart{height:clamp(260px,37dvh,345px);min-height:0;overflow:hidden}
.rankings-reaction-curve .reaction-chart-note{min-height:1.8em}
.rankings-reaction-curve .reaction-chart-header{min-height:24px}
.reaction-chart.tg-data-region > *{transition:opacity 220ms ease}
/* Canonical Play/Daily presentation, shared across every game. */
/* Daily shares Play's theme-inverted foreground/background tokens.
   Its animated perimeter distinguishes the mode without hard-coded light
   colours, so changing the global theme updates both actions together. */
@property --tg-daily-angle {
 syntax:"<angle>";
 inherits:false;
 initial-value:0deg;
}
@keyframes tg-daily-edge-travel{to{--tg-daily-angle:360deg}}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
 :is(.tg-game-intro .tg-game-actions [data-game-mode="daily"],.tg-game-results .tg-result-play-daily){
 position:relative;isolation:isolate;overflow:visible;
 background:var(--text)!important;color:var(--canvas)!important;
 border:1px solid var(--text)!important;
 box-shadow:none!important;white-space:nowrap;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
 :is(.tg-game-intro .tg-game-actions [data-game-mode="daily"],.tg-game-results .tg-result-play-daily):not(:disabled):hover{
 /* Identical hover tone to the canonical Play button in either theme. */
 background:color-mix(in srgb,var(--text) 90%,var(--surface))!important;
 transform:translateY(-1px);
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
 :is(.tg-game-intro .tg-game-actions [data-game-mode="daily"],.tg-game-results .tg-result-play-daily):not(:disabled)::before{
 content:"";position:absolute;inset:-3px;border-radius:inherit;padding:3px;
 pointer-events:none;
 background:conic-gradient(from var(--tg-daily-angle),
  transparent 0deg,transparent 230deg,
  #f49aaa 247deg,#f3cb75 267deg,#9cd9aa 287deg,
  #86bee9 307deg,#c5a0e9 327deg,transparent 346deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask-composite:exclude;
 animation:tg-daily-edge-travel 3.1s linear infinite;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
 .tg-game-intro .tg-game-actions [data-game-mode="daily"]:disabled{
 background:var(--surface-soft)!important;border-color:var(--line)!important;
 color:var(--muted)!important;opacity:.7;cursor:default;transform:none;
}
@media(prefers-reduced-motion:reduce){
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page
  :is(.tg-game-intro .tg-game-actions [data-game-mode="daily"],.tg-game-results .tg-result-play-daily)::before{
  animation:none;--tg-daily-angle:320deg;
 }
}
/* The floaty uses the same sliding toggle component as other leaderboards,
   merely reduced to fit beside its two header tools. */
body.float-ui .float-board-head .float-board-mode-tabs.tg-segment{
  width:max-content;max-width:calc(100% - 66px);
  flex:0 0 auto;align-self:center;
  margin:0;padding:3px;gap:2px;border-radius:10px;
}
body.float-ui .float-board-head .float-board-mode-tabs.tg-segment>button{
  padding:6px 10px;min-width:44px;font-size:11px;
  font-weight:750;border-radius:7px;
}
body.float-ui .app-shell:not(.admin-mode) .float-leader-panel .float-board-row{
  position:relative;border-bottom:0;
}
body.float-ui .app-shell:not(.admin-mode) .float-leader-panel .float-board-row:not(:last-child)::after{
  content:"";position:absolute;bottom:0;left:15px;right:15px;
  border-bottom:1px solid var(--line);pointer-events:none;
}

/* All Play/Daily leaderboard switches use the site's segmented-control API. */
.tg-board-modes.tg-segment{
  display:inline-flex;align-items:center;justify-content:flex-start;
  flex:0 0 auto;align-self:flex-start;width:max-content;max-width:100%;
  gap:4px;padding:4px;background:var(--surface-soft);
  border:1px solid var(--line);border-radius:12px;margin:8px 0 12px;
}
.tg-board-modes.tg-segment>button{
  appearance:none;border:0;background:transparent;
  border-radius:9px;padding:9px 19px;font:inherit;font-size:13px;
  font-weight:750;min-width:66px;color:var(--muted);cursor:pointer;
}
.tg-board-modes.tg-segment>button[aria-selected="true"]{color:var(--text);opacity:1}
.tg-board-modes.tg-segment>button[aria-selected="false"]{opacity:.72;transition:color 170ms ease,opacity 170ms ease}
.tg-board-modes.tg-segment>button[aria-selected="false"]:is(:hover,:focus-visible){opacity:1}
.tg-board-modes-dialog.tg-segment{margin:0 0 14px 30px}
@media(max-width:700px){.tg-board-modes-dialog.tg-segment{margin-left:20px}}
.float-game-progress[hidden]{display:none!important}
@media(max-width:700px){.tg-board-modes{margin-block:7px 10px}}

/* Shared leaderboard identity language: account = filled, high-contrast
   star badge; guest = unfilled, dashed diamond. Neither depends on colour
   alone. These styles override legacy podium avatar tints intentionally. */
body.float-ui .tg-rank-identity{
  display:inline-grid;place-items:center;box-sizing:border-box;flex:none;
  width:28px;height:28px;border-radius:9px;line-height:1;
  font-size:16px;font-weight:760;letter-spacing:0;
}
body.float-ui .tg-rank-identity[data-player-kind="member"]:not([data-avatar-icon]){
  background:#dfe7f2!important;color:#3c5877!important;
  border:1px solid #bfd0e1!important;
}
body.float-ui .tg-rank-identity[data-player-kind="guest"]{
  background:transparent!important;color:#697988!important;
  border:0!important;font-size:17px;font-weight:600;
}
:root[data-theme="dark"] body.float-ui .tg-rank-identity[data-player-kind="member"]:not([data-avatar-icon]){
  background:#43556d!important;color:#f0f4fb!important;
  border-color:#7185a1!important;
}
:root[data-theme="dark"] body.float-ui .tg-rank-identity[data-player-kind="guest"]{
  background:transparent!important;color:#bec7d1!important;border:0!important;
}
body.float-ui :is(.float-player-kind,.float-ribbon-icon).tg-rank-identity{
  width:18px;height:19px;border-radius:5px;font-size:13px;
}
/* The same quiet self-row tint everywhere; no outline, indicator bar,
   oversized font-weight or badge. Rankings keep their editorial row style. */
body.float-ui :is(.memory-rank-row[data-viewer="true"],.float-dialog-row.is-you,.float-board-row.is-you){
  background:color-mix(in srgb,#97b9e9 5%,var(--surface-soft))!important;
  border-radius:11px;
}
body.float-ui .rankings-combined-row[data-viewer="true"]{
  background:color-mix(in srgb,#97b9e9 5%,transparent)!important;
  border-radius:11px;
}
/* Modal and float have separate highlight geometry: the float has its own
   15px row padding, while the modal retains its original 10px grid spacing. */
body.float-ui .float-dialog-row.is-you,
body.float-ui .float-leader-panel .float-board-row.is-you{
  position:relative;isolation:isolate;background:transparent!important;
}
body.float-ui .float-dialog-row.is-you::before,
body.float-ui .float-leader-panel .float-board-row.is-you::before{
  content:"";position:absolute;inset-block:0;inset-inline:-4px;
  border-radius:11px;
  background:color-mix(in srgb,#97b9e9 5%,var(--surface-soft));
  pointer-events:none;z-index:-1;
}
/* User-tested inset refinement belongs ONLY to the floating leaderboard. */
body.float-ui .float-leader-panel .float-board-row.is-you::before{
  margin-right:5px;margin-left:5px;
}
body.float-ui .float-ribbon-player.is-you{
  background:color-mix(in srgb,#97b9e9 5%,transparent);
  border-radius:5px;
}
/* Rank is the only podium decoration; all boards use identical plain
   numeric labels with a little extra size and colour for 1, 2 and 3. */
body.float-ui .tg-rank-number{
  color:var(--muted);font-weight:750;font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
body.float-ui .tg-rank-number[data-rank="1"],
body.float-ui .tg-rank-number[data-rank="2"],
body.float-ui .tg-rank-number[data-rank="3"]{
  font-weight:900!important;font-size:13px!important;
}
body.float-ui .tg-rank-number[data-rank="1"]{color:var(--rank-gold)!important}
body.float-ui .tg-rank-number[data-rank="2"]{color:var(--rank-silver)!important}
body.float-ui .tg-rank-number[data-rank="3"]{color:var(--rank-bronze)!important}


/* Shared rank component: a small, perfectly centred, solid circle.
   No ribbon, outlines or decorative pseudo-elements. Light mode uses
   delicate pastel fills with readable ink; dark mode uses stronger fills. */
body.float-ui .tg-rank-number{
  display:inline-grid;place-items:center;justify-self:center;
  box-sizing:border-box;text-align:center;line-height:1;
}
body.float-ui .tg-rank-number.tg-rank-medal{
  display:inline-grid!important;place-items:center!important;
  width:22px;min-width:22px;height:22px;
  border-radius:50%;margin:0;padding:0;
  background:var(--tg-medal-fill);
  color:var(--tg-medal-ink)!important;
  font-size:11px!important;font-weight:800!important;
  line-height:1;font-variant-numeric:tabular-nums;
}
body.float-ui .tg-rank-medal[data-rank="1"]{
  --tg-medal-fill:#FFE29A;--tg-medal-ink:#6B4B13;
}
body.float-ui .tg-rank-medal[data-rank="2"]{
  --tg-medal-fill:#DDE8F4;--tg-medal-ink:#51667F;
}
body.float-ui .tg-rank-medal[data-rank="3"]{
  --tg-medal-fill:#F6CCB7;--tg-medal-ink:#75482E;
}
:root[data-theme="dark"] body.float-ui .tg-rank-medal[data-rank="1"]{
  --tg-medal-fill:var(--rank-gold);--tg-medal-ink:#35291b;
}
:root[data-theme="dark"] body.float-ui .tg-rank-medal[data-rank="2"]{
  --tg-medal-fill:var(--rank-silver);--tg-medal-ink:#2e3339;
}
:root[data-theme="dark"] body.float-ui .tg-rank-medal[data-rank="3"]{
  --tg-medal-fill:var(--rank-bronze);--tg-medal-ink:#352820;
}
/* Tiny circles in the compact footer strip; numerals stay legible. */
body.float-ui .float-ribbon-player .tg-rank-medal{
  width:16px;min-width:16px;height:16px;
  font-size:9px!important;
}

/* Play and ready Daily share one compact width. A completed Daily alone may
   expand to fit the countdown, avoiding narrow/tiny numerals. */
.tg-game-page .tg-game-intro .tg-game-actions :is([data-game-mode="daily"],[data-game-mode="play"]){
 min-width:104px;width:104px;font-variant-numeric:tabular-nums;
}
.tg-game-page .tg-game-intro .tg-game-actions [data-game-mode="daily"][data-daily-completed="true"]{
 width:auto;min-width:170px;
}


/* Social sharing - the result action and dialog are shared across all games. */
body.float-ui .tg-game-page .tg-share-result-actions{display:flex;gap:10px;align-items:center;justify-content:center}
body.float-ui .tg-game-page .tg-share-trigger{white-space:nowrap}
.tg-share-dialog{box-sizing:border-box;color:var(--text);background:var(--surface);
 border:1px solid var(--line);box-shadow:0 30px 90px rgba(10,24,50,.28);
 border-radius:22px;padding:0;width:min(900px,calc(100vw - 28px));max-height:min(94dvh,900px);overflow:auto}
.tg-share-dialog *{box-sizing:border-box}
.tg-share-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:25px 30px 16px}
.tg-share-eyebrow{font-size:10px;letter-spacing:.13em;color:var(--muted);font-weight:800;margin:0 0 5px}
.tg-share-head h2{font-size:25px;letter-spacing:-.045em;line-height:1.15;margin:0;font-weight:780}
.tg-share-close{border:0;background:var(--surface-soft);color:var(--text);width:34px;height:34px;
 border-radius:10px;font-size:25px;line-height:1;flex:none}
.tg-share-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:0 30px 28px}
.tg-share-visual{min-width:0;align-self:start}
.tg-share-theme-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;margin-bottom:12px}
.tg-share-theme-row>.tg-share-field-label{margin:0;font-size:11px;color:var(--muted)}
.tg-share-theme-switch.tg-segment{display:inline-flex;align-items:center;gap:3px;
 flex:none;padding:3px;border:1px solid var(--line);background:var(--surface-soft);border-radius:10px}
.tg-share-theme-switch.tg-segment>button{appearance:none;border:0;cursor:pointer;border-radius:8px;
 background:transparent;padding:7px 14px;font:inherit;font-size:12px;font-weight:740;color:var(--muted)}
.tg-share-theme-switch.tg-segment>button[aria-selected="true"]{color:var(--text)}
.tg-share-theme-switch.tg-segment>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tg-share-canvas{display:block;max-width:100%;width:100%;height:auto;border-radius:12px;border:0;
 box-shadow:0 10px 24px rgba(10,20,30,.10)}
.tg-share-plain,.tg-share-native{border:0;background:transparent;color:var(--accent);font-size:12px;
 font-weight:750;padding:10px 0;cursor:pointer}
.tg-share-options{min-width:0;display:flex;flex-direction:column}
.tg-share-field-label{font-size:12px;font-weight:770;margin:0 0 9px}
.tg-share-platforms{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.tg-share-platform{border:1px solid var(--line);border-radius:9px;background:var(--surface);
 color:var(--muted);font-weight:680;font-size:12px;padding:9px 11px;cursor:pointer}
.tg-share-platform[aria-pressed=true]{background:var(--accent-soft);color:var(--text);border-color:var(--accent)}
.tg-share-caption{font:inherit;font-size:13px;line-height:1.5;resize:vertical;background:var(--surface);
 color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:16px;width:100%;min-height:86px}
.tg-share-caption:focus-visible,.tg-share-platform:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tg-share-message{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-soft);
 border-radius:10px;padding:12px;font-size:12px;line-height:1.55;min-height:75px}
.tg-share-note{font-size:11px;line-height:1.55;color:var(--muted);margin:12px 0}
.tg-share-buttons{display:flex;gap:8px;flex-wrap:wrap}
.tg-share-dialog .tg-game-button{border-radius:23px;min-height:39px;padding:9px 15px;
 font:inherit;font-size:12px;font-weight:750;border:1px solid var(--line);
 background:var(--surface);color:var(--text);box-shadow:none;cursor:pointer}
.tg-share-dialog .tg-game-button-primary{background:var(--text);color:var(--canvas);border-color:var(--text)}
.tg-share-dialog .tg-game-button-secondary:hover{background:var(--surface-soft)}
.tg-share-buttons .tg-game-button{font-size:12px;min-height:37px;padding:9px 13px}
.tg-share-native{align-self:flex-start}
.tg-share-status{font-size:12px;color:var(--accent);min-height:19px;margin:3px 0 0}
.tg-share-status[data-error=true]{color:#bd5252}
@media(max-width:700px){
 .tg-share-dialog{max-height:96dvh;border-radius:16px}
 .tg-share-head{padding:19px 18px 15px}
 .tg-share-head h2{font-size:21px}
 .tg-share-body{grid-template-columns:minmax(0,1fr);gap:17px;padding:0 18px 20px}
 .tg-share-visual{max-width:480px}
 .tg-share-platforms{margin-bottom:14px}
 .tg-share-buttons .tg-game-button{flex:1 1 auto}
}

/* The shared result receipt is the sole source of success presentation. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-feedback-content{
 display:inline-flex;align-items:center;gap:13px;max-width:min(100%,500px);
 padding:10px 13px;text-align:left;vertical-align:middle;
 animation:tg-status-appear .54s ease-out both
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-feedback-copy{
 display:flex;flex-direction:column;gap:3px;min-width:0;color:var(--muted);
 font-size:13px;line-height:1.4
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-feedback-copy strong{
 color:var(--text);font-size:18px;font-weight:830;letter-spacing:-.035em;line-height:1.18
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-feedback-icon{
 display:inline-grid;place-items:center;flex:none;position:relative;
 width:47px;height:47px;border-radius:14px;
 color:#22a06a;background:color-mix(in srgb,#29b677 12%,var(--surface-soft))
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-feedback-icon svg{
 display:block;width:27px;height:27px;overflow:visible;position:relative;z-index:1
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-feedback-best .tg-save-feedback-icon{
 color:#bd8717;background:color-mix(in srgb,#e9bc48 15%,var(--surface-soft));
 animation:tg-trophy-charge 2.2s cubic-bezier(.2,.8,.2,1) both
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-feedback-best .tg-save-feedback-copy strong{
 color:color-mix(in srgb,#c69828 78%,var(--text))
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-feedback-recorded .tg-save-feedback-icon{
 color:#16945a;background:color-mix(in srgb,#27bf76 12%,var(--surface-soft));
 animation:tg-check-enter .56s ease-out both
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-feedback-recorded .tg-save-feedback-copy strong{
 color:color-mix(in srgb,#1d9e65 72%,var(--text))
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-particles{
 position:absolute;inset:0;z-index:2;pointer-events:none
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-particles i{
 position:absolute;left:50%;top:50%;width:6px;height:8px;border-radius:2px;
 background:#e6b136;opacity:0;
 animation:tg-trophy-confetti 1.42s cubic-bezier(.16,.6,.45,1) 1.22s both;
 transform-origin:center
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-particles i:nth-child(3n){background:#f5d778}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-particles i:nth-child(4n){background:#e99d55}
@keyframes tg-status-appear{
 from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}
}
@keyframes tg-trophy-charge{
 0%{opacity:0;transform:scale(.62) rotate(-12deg)}
 28%{opacity:1;transform:scale(.83) rotate(-8deg)}
 50%{transform:scale(.89) rotate(-12deg)}
 66%{transform:scale(.76) rotate(-14deg)}
 82%{transform:scale(1.2) rotate(8deg)}
 92%{transform:scale(.94) rotate(-3deg)}
 100%{transform:scale(1) rotate(0)}
}
@keyframes tg-check-enter{
 0%{opacity:0;transform:translateY(5px) scale(.82)}
 70%{opacity:1;transform:translateY(0) scale(1.06)}
 100%{transform:scale(1)}
}
@keyframes tg-trophy-confetti{
 0%,18%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
 28%{opacity:1;transform:translate(-50%,-50%) scale(1)}
 58%{opacity:1;transform:translate(-50%,-50%) rotate(var(--angle))
  translateY(calc(-1 * var(--travel))) rotate(75deg)}
 100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle))
  translateY(calc(-1 * var(--travel))) translateY(44px) rotate(220deg)}
}
@media(prefers-reduced-motion:reduce){
 body.float-ui .app-shell:not(.admin-mode) .tg-game-results :is(
 .tg-save-feedback-content,.tg-save-feedback-icon,.tg-save-particles i){animation:none!important}
 body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-save-particles{display:none}
}

/* Guest identity editor is owned by Game Presentation, not individual games. */
.tg-guest-editor{color:var(--text);background:var(--surface);border:1px solid var(--line);
 border-radius:18px;max-width:calc(100vw - 28px);width:360px;
 padding:23px;box-shadow:0 24px 70px rgba(0,0,0,.25)}
.tg-guest-editor h2{font-size:21px;margin:0 0 8px}
.tg-guest-editor p{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 15px}
.tg-guest-editor input{width:100%;border:1px solid var(--line);border-radius:9px;
 padding:12px;background:var(--surface);color:var(--text);font-size:17px;text-align:center;
 text-transform:uppercase;letter-spacing:.18em}
.tg-guest-editor-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:12px}
.tg-guest-editor-actions button{border:1px solid var(--line);border-radius:9px;
 padding:10px 14px;cursor:pointer;background:var(--surface-soft);color:var(--text);
 font-weight:710}
.tg-guest-editor-actions button[type="submit"]{background:var(--text);color:var(--canvas)}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-guest-edit-initials{
 border:0;background:transparent;padding:2px 10px;font:inherit;font-size:11px;
 color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-guest-edit-initials[hidden]{display:none!important}

/* GAME COLOUR API: Colour Memory's original six-stop splash wheel is
   the site-wide hue reference. All board art and icons use its tokens. */
.tg-game-page .memory-tile-0,
:root[data-theme="dark"] .tg-game-page .memory-tile-0{background:var(--tg-sequence-0,#ef826b)}
.tg-game-page .memory-tile-1,
:root[data-theme="dark"] .tg-game-page .memory-tile-1{background:var(--tg-sequence-1,#efca53)}
.tg-game-page .memory-tile-2,
:root[data-theme="dark"] .tg-game-page .memory-tile-2{background:var(--tg-sequence-2,#70cf9e)}
.tg-game-page .memory-tile-3,
:root[data-theme="dark"] .tg-game-page .memory-tile-3{background:var(--tg-sequence-3,#6da6ef)}
.tg-game-page .reaction-play .reaction-target[data-state="go"]{
 background:var(--tg-reaction-red,#ef6d74)
}
.tg-game-icon[data-game="reaction-time"]{--tg-icon-color:var(--tg-reaction-icon,#ed9357)}
.tg-game-icon[data-game="colour-memory"] .tg-colour-wheel-art{
 background:var(--tg-colour-wheel-stops,conic-gradient(#ec657e,#eac763,#7bd17b,#61b9db,#7979dc,#bc71d4,#ec657e))
}
.tg-shared-colour-wheel{
 display:block;aspect-ratio:1;width:min(100%,280px);border:0;border-radius:50%;
 cursor:crosshair;position:relative;
}
.tg-shared-colour-wheel::after{
 content:"";position:absolute;inset:29%;border-radius:50%;background:var(--surface,#fff);
 pointer-events:none;
}
.tg-shared-colour-wheel[aria-hidden="true"]{cursor:default}
.tg-shared-colour-wheel:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.float-empty-message{
 display:block;margin:0 auto;align-self:center;max-width:100%;
 font-size:11px;line-height:1.5;color:var(--muted);text-align:center;font-weight:500;
 overflow-wrap:anywhere;
}
.float-board-rows .float-empty-message{padding:18px 10px}
.float-ribbon-track>.float-empty-message{white-space:nowrap;font-size:11px}
.tg-game-icon:has(>svg){display:flex;align-items:center;justify-content:center}
.tg-game-icon:has(>svg)>svg{flex:none;min-width:0;position:relative;inset:auto;transform:none;margin:auto}

/* Shared Game Layout API v3. Controllers provide their visual; the shell
   owns its centred art region and uses the same sizing for splash and play. */
body.float-ui .app-shell:not(.admin-mode) #main-content>.tg-game-page:not([hidden]){
 --tg-game-visual-size:var(--float-square-size);
 --tg-game-visual-tall:var(--float-tall-height);
}
/* No progress display does NOT mean no progress-slot geometry.
   The 42px footer track is the shared splash-controls baseline. Removing
   the row shifted Cattiles' Daily action 42px below other games and made
   its intro reflow differently during scroll and route transitions.
   Keep the slot empty; never render an invisible progress indicator. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel--no-progress{
 grid-template-rows:0px minmax(0,1fr) 42px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page :is(.tg-memory-preview,.tg-memory-board,
 .tg-reaction-preview,.reaction-play .reaction-target){
 width:var(--tg-game-visual-size);height:var(--tg-game-visual-size);
 max-width:100%;max-height:100%;
}
/* The Reaction preview and active waiting/countdown target have the same
   full-colour appearance as the other games, in either theme. */
body.float-ui .app-shell:not(.admin-mode) .page-reaction .tg-reaction-preview .reaction-target,
body.float-ui .app-shell:not(.admin-mode) .page-reaction .reaction-play .reaction-target[data-state="wait"],
body.float-ui .app-shell:not(.admin-mode) .page-reaction .reaction-play .reaction-target[data-state="countdown"]{
 background:var(--tg-reaction-green,#71d3ab);color:#183a32;opacity:1;filter:none;
}
body.float-ui .app-shell:not(.admin-mode) .page-reaction .reaction-play .reaction-target[data-state="go"]{
 background:var(--tg-reaction-red,#ef6575);color:#421521;opacity:1;filter:none;
 transition:none!important;
}
/* The Memory squares in the shared icon match their visible board. */
.tg-game-icon[data-game="sequence-memory"] i:nth-child(1){background:var(--tg-sequence-0,#ef6b84)}
.tg-game-icon[data-game="sequence-memory"] i:nth-child(2){background:var(--tg-sequence-1,#efb953)}
.tg-game-icon[data-game="sequence-memory"] i:nth-child(3){background:var(--tg-sequence-2,#70cfbd)}
.tg-game-icon[data-game="sequence-memory"] i:nth-child(4){background:var(--tg-sequence-3,#896def)}
/* Leaderboard empty state: the generous line-height keeps short
   messages vertically balanced where container centring was insufficient. */
body.float-ui .float-empty-message{line-height:3;}

/* Pitchline art and nav now use the same stronger shared palette in both themes. */
.page-pitchline,.tg-game-page.page-pitchline,
:root[data-theme="dark"] .page-pitchline{
 --tg-pitch-wave-violet:var(--tg-pitchline-violet,#896def);
 --tg-pitch-wave-teal:var(--tg-pitchline-teal,#52bce2);
 --tg-pitch-marker:var(--tg-pitchline-teal,#52bce2);
}
.tg-game-icon[data-game="pitchline"]{
 --tg-icon-color:var(--tg-pitchline-violet,#896def);
}

/* Icon Studio batch, 2026-10-14. All multipliers are relative to the
   existing shared art cell (never change its layout or alignment). */
.tg-game-icon[data-game="cattiles"]{
 --tg-studio-nav-size:1;--tg-studio-nav-width:1.19;--tg-studio-nav-height:.99;
}
.tg-game-icon[data-game="colour-memory"]{
 --tg-studio-nav-size:.99;--tg-studio-nav-width:1;--tg-studio-nav-height:1;
}
.tg-game-icon[data-game="pitchline"]{
 --tg-studio-nav-size:1.06;--tg-studio-nav-width:.91;--tg-studio-nav-height:1;
}
.tg-game-icon[data-game="reaction-time"]{
 --tg-studio-nav-size:1.1;--tg-studio-nav-width:1.26;--tg-studio-nav-height:1;
}
.tg-game-icon[data-game="sequence-memory"]{
 --tg-studio-nav-size:1;--tg-studio-nav-width:1;--tg-studio-nav-height:1;
}
.tg-game-icon[data-game="sideweave"]{
 --tg-studio-nav-size:1.01;--tg-studio-nav-width:1;--tg-studio-nav-height:1;
}
.sidebar .sidebar-game-list .side-nav a[data-game]>.tg-game-icon,
.nav-flyout .tg-game-icon{
 transform:scale(
  calc(var(--tg-studio-nav-size,1) * var(--tg-studio-nav-width,1)),
  calc(var(--tg-studio-nav-size,1) * var(--tg-studio-nav-height,1))
 )!important;
 transform-origin:50% 50%;justify-self:center;align-self:center;
}
/* A single transform contract supports separate X/Y scale and signed offsets
   without defeating the per-game base scale or mobile responsive alignment. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem{
 transform:translate(
  calc(var(--tg-emblem-shift,0px) + var(--tg-studio-bg-x,0px)),
  var(--tg-studio-bg-y,0px)
 ) rotate(-21deg) scale(
  calc(var(--tg-emblem-scale,1) * var(--tg-studio-bg-size,1) * var(--tg-studio-bg-width,1)),
  calc(var(--tg-emblem-scale,1) * var(--tg-studio-bg-size,1) * var(--tg-studio-bg-height,1))
 )!important;
}
.tg-game-page[data-page="cattiles"] .float-title-emblem{
 --tg-studio-bg-size:1.15;--tg-studio-bg-width:.96;--tg-studio-bg-height:.89;
 --tg-studio-bg-x:-2px;--tg-studio-bg-y:2px;
}
.tg-game-page[data-page="colour-memory"] .float-title-emblem{
 --tg-studio-bg-size:1;--tg-studio-bg-width:1;--tg-studio-bg-height:1;
 --tg-studio-bg-x:0px;--tg-studio-bg-y:0px;
}
.tg-game-page[data-page="pitchline"] .float-title-emblem{
 --tg-studio-bg-size:1;--tg-studio-bg-width:.89;--tg-studio-bg-height:1.08;
 --tg-studio-bg-x:0px;--tg-studio-bg-y:0px;
}
.tg-game-page[data-page="reaction-time"] .float-title-emblem{
 --tg-studio-bg-size:1.2;--tg-studio-bg-width:1;--tg-studio-bg-height:.91;
 --tg-studio-bg-x:64px;--tg-studio-bg-y:0px;
}
.tg-game-page[data-page="sequence-memory"] .float-title-emblem{
 --tg-studio-bg-size:1;--tg-studio-bg-width:1;--tg-studio-bg-height:1;
 --tg-studio-bg-x:0px;--tg-studio-bg-y:0px;
}
.tg-game-page[data-page="sideweave"] .float-title-emblem{
 --tg-studio-bg-size:1;--tg-studio-bg-width:1;--tg-studio-bg-height:1;
 --tg-studio-bg-x:0px;--tg-studio-bg-y:0px;
}

/* The playfield must share the playable viewport with the action row.
   Screens around 1080p (including Firefox's taller browser chrome) have less
   content height than the CSS art token assumes. Reserve the bottom control
   lane inside the actual flex/grid content, rather than shifting the fixed
   Play/Daily buttons or moving the entire page with transforms. */
@media (min-width:701px) and (max-height:1150px) {
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page
  .tg-game-intro .float-board-content{
   box-sizing:border-box;
   padding-bottom:70px;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page
  .tg-game-play:not([hidden]){
   box-sizing:border-box;
   padding-bottom:38px;
 }
 /* In Pitchline the hint is pinned below the playable area; the stage needs
    clearance so this copy never rides on top of the board's controls. */
 body.float-ui .app-shell:not(.admin-mode) #pitch-play:not([hidden]){
   padding-bottom:52px;
 }
}
/* The same Classic and Hard Pitchline board stays within the allocated
   middle row. Tall 1440p+ viewports continue to use the original geometry. */

/* Oddlings uses a real frozen board image instead of the generic landscape card. */
/* Oddlings portrait shares the same visible Light/Dark control as all games. */
.tg-share-dialog[data-finished-board="true"] .tg-share-canvas{
 width:auto;max-width:100%;max-height:min(62dvh,560px);
 margin:0 auto;object-fit:contain
}
@media(max-width:700px){
 .tg-share-dialog[data-finished-board="true"] .tg-share-canvas{
  max-height:min(47dvh,430px)
 }
}

/* Solid icon marks: global game SVG strokes must never outline circles. */
.tg-game-icon[data-game="pinpoint"] svg circle,
.tg-game-icon[data-game="oddlings"] svg circle{stroke:none!important}

/* Shared result summaries are a single replaceable slot, not an accumulating
   list of DOM nodes across multiple rounds or practice restarts. */
.tg-game-page .tg-result-extra[hidden]{display:none!important}
.tg-game-page .tg-result-extra{max-width:100%;min-width:0}

/* Mobile game viewport contract: compact heading, flexible full-size art and
   controls fixed to the bottom of their own play region (not the screen). */
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) #main-content>.tg-game-page:not([hidden]){
   --float-header-height:clamp(76px,11dvh,93px);
   --float-square-size:min(calc(100vw - 42px),500px,max(165px,calc(100dvh - 245px)));
   --float-tall-height:min(560px,max(170px,calc(100dvh - 248px)));
   --tg-game-visual-size:var(--float-square-size);
   --tg-game-visual-tall:var(--float-tall-height);
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner{
   align-items:flex-start;justify-content:flex-start;
   padding-top:0;padding-bottom:0;min-height:0;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner-copy{
   align-self:flex-start;margin:0;padding:0;min-width:0;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner .eyebrow{
   font-size:9px;line-height:1.2;margin:0 0 4px;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner h1{
   font-size:clamp(25px,7.5vw,31px)!important;
   line-height:1.08;letter-spacing:-.055em;margin:0 0 4px;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner .tg-game-banner-copy>p:last-child{
   font-size:11px;line-height:1.28;margin:0;
   max-width:min(100%,calc(100vw - 85px));
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-board-host,
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-layout{
   height:100%;min-height:0;align-self:stretch;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel{
   padding-bottom:4px;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .tg-game-actions{
   bottom:0;min-height:50px;padding-top:4px;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-stage-preview{
   max-width:100%;max-height:100%;
 }
}
/* A short phone still keeps the title readable without a fixed board height
   pushing active controls under the mobile navigation. */
@media(max-width:700px) and (max-height:620px){
 body.float-ui .app-shell:not(.admin-mode) #main-content>.tg-game-page:not([hidden]){
   --float-header-height:70px;
   --float-square-size:min(calc(100vw - 42px),500px,max(120px,calc(100dvh - 255px)));
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner .tg-game-banner-copy>p:last-child{
   font-size:10px;
 }
}

/* Never display the phone-only mirrored title in desktop chrome. */
body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar .tg-mobile-game-title{display:none!important}

/* Mobile play pages: true edge-to-edge game area.
   The legacy per-page leaderboard strap is hidden by the persistent ribbon;
   letting its invisible grid row survive reserved empty space beneath controls.
   Remove only that redundant row and size main against the real phone viewport. */
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden])){
   height:calc(100dvh - 70px - env(safe-area-inset-bottom));
   min-height:0;
 }
 body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden])) main#main-content{
   box-sizing:border-box;flex:0 0 auto!important;
   height:calc(100dvh - 124px - env(safe-area-inset-bottom))!important;
   min-height:0;max-height:none;padding:0 13px;
 }
 body.float-ui .app-shell:not(.admin-mode) #main-content>.tg-game-page:not([hidden]){
   --float-header-height:0px;
   --float-square-size:min(calc(100vw - 25px),530px,max(130px,calc(100dvh - 190px)));
   --float-tall-height:min(580px,max(165px,calc(100dvh - 205px)));
   --tg-game-visual-size:var(--float-square-size);
   --tg-game-visual-tall:var(--float-tall-height);
   grid-template-rows:0px minmax(0,1fr) 0px;
 }
 body.float-ui .app-shell:not(.admin-mode) #main-content>.tg-game-page:not([hidden])>.float-leader-ribbon{
   display:none!important;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner{
   z-index:3;min-height:0;height:0;max-height:0;
   margin:0;padding-top:0;padding-bottom:0;
   overflow:visible;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner-copy{
   display:none!important;
 }
 /* Help shares the mobile top row with the hamburger and route title. */
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-banner>.tg-game-help-button{
   top:-44px;right:12px;z-index:12;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel{
   height:100%;min-height:0;padding-top:2px;padding-bottom:2px;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .tg-game-actions{
   bottom:0;
 }
 /* The menu and game name share the same 54px row, even if the name wraps
    elsewhere in the desktop heading. */
 body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar .tg-mobile-game-title{
   appearance:none;display:inline-flex;align-items:center;justify-content:flex-start;
   min-width:0;flex:0 1 auto;max-width:calc(100vw - 142px);
   margin:0;padding:0 2px;border:0;background:transparent;color:var(--text);
   font-family:inherit;font-size:clamp(19px,5.6vw,24px);font-weight:800;line-height:1.1;
   letter-spacing:-.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
   text-align:left;opacity:1!important;cursor:default;
 }
 body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar .tg-mobile-game-title:not(:disabled){
   cursor:pointer;
 }
 body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar .tg-mobile-game-title[hidden]{
   display:none!important;
 }
}
@media(max-width:700px) and (max-height:580px){
 body.float-ui .app-shell:not(.admin-mode) #main-content>.tg-game-page:not([hidden]){
   --float-square-size:min(calc(100vw - 25px),530px,max(110px,calc(100dvh - 205px)));
 }
}

/* Phone layout v5 - applies equally to touch devices and resized desktops.
   The mobile title is explicitly promoted over the desktop !important hide,
   but the hidden attribute must still win for non-game routes. */
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar .tg-mobile-game-title:not([hidden]){
   display:inline-flex!important;
 }
 /* Intro actions no longer need an empty 42px progress row. Every splash
    now reaches the mobile navbar; active games retain their real progress. */
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page
   .tg-game-panel:has(>.tg-game-intro:not([hidden])){
   grid-template-rows:0px minmax(0,1fr) 0px!important;
 }
 /* Shared control spacing also applies to end-of-game action arrays. */
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-actions{
   gap:7px;
 }
 /* Intro and play use the same remaining vertical play area. Reserve a real
    start-button lane so an enlarged preview cannot collide with Play/Daily. */
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro{
   box-sizing:border-box;padding:0!important;height:100%;min-height:0;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .float-board-content{
   box-sizing:border-box;flex:1 1 0;height:100%;min-height:0;min-width:0;
   width:100%;padding:2px 0 46px;
   display:flex;flex-direction:column;align-items:center;justify-content:center;
   container-type:size;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .float-board-content>.tg-game-stage-preview{
   flex:0 1 auto;min-height:0;max-width:100%;max-height:100%;
   margin:auto;
 }
 /* Preserve the same square geometry and board sizing on splash and in play.
    Both axes fit the REAL remaining board slot, not a viewport subtraction. */
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .float-board-content
   :is(.tg-memory-preview,.tg-reaction-preview){
   width:min(100cqw,100cqh,var(--tg-game-visual-size))!important;
   height:min(100cqw,100cqh,var(--tg-game-visual-size))!important;
 }
 /* Cattiles' older mobile art token subtracts 370px regardless of available
    space. Use the shared mobile art size and the actual preview container. */
 body.float-ui .app-shell:not(.admin-mode)
   #main-content>.tg-game-page.page-cattiles:not([hidden]){
   --tg-game-visual-size:var(--float-square-size);
 }
 body.float-ui .app-shell:not(.admin-mode) .page-cattiles .tg-game-intro
   .tg-game-stage-preview[data-game-preview="full"]{
   width:min(100cqw,100cqh,var(--tg-game-visual-size))!important;
   height:min(100cqw,100cqh,var(--tg-game-visual-size))!important;
 }
 /* A portrait game fills the remaining height, up to its aspect-ratio-safe
    width limit. It is never stretched independently on the two axes. */
 body.float-ui .app-shell:not(.admin-mode) .page-oddlings .tg-game-intro .od-preview{
   --od-board-height:min(100cqh,calc(100cqw * 1.4));
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .tg-game-actions{
   bottom:0;min-height:43px;height:43px;gap:7px;
   padding:0!important;flex-wrap:nowrap;align-items:center;justify-content:center;
 }
 /* One compact game-button contract for mobile splash, gameplay and results.
    Keep a usable 40px touch surface rather than shrinking controls to text. */
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page
   :is(.tg-game-intro,.tg-game-play,.tg-game-results) .tg-game-button{
   box-sizing:border-box;min-height:40px;
   padding:7px 12px;font-size:12px;line-height:1.25;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .tg-game-actions
   :is([data-game-mode="daily"],[data-game-mode="play"]){
   width:90px;min-width:90px;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .tg-game-actions
   [data-game-mode="daily"][data-daily-completed="true"]{
   width:auto;min-width:140px;
 }
}


/* Guest completion: conversion is optional; original guest submission stays. */
.tg-game-results .tg-guest-save-account{
 display:flex;flex-direction:column;gap:7px;
 width:min(100%,480px);margin:14px auto 12px;
 padding:14px 16px;border-radius:14px;
 border:1px solid var(--line);
 background:var(--surface);text-align:center;box-sizing:border-box;
}
.tg-game-results .tg-guest-save-account[hidden]{display:none!important}
.tg-guest-save-account>strong{font-size:14px;font-weight:650;color:var(--text)}
.tg-guest-save-account>p{font-size:12px;line-height:1.5;color:var(--muted);margin:0}
.tg-guest-save-actions{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.tg-guest-save-actions>.tg-game-button{font-size:12px;min-height:36px;padding:7px 12px;white-space:nowrap}
.tg-guest-save-guest{
 appearance:none;background:transparent;border:0;border-radius:8px;padding:7px 10px;
 color:var(--muted);font:inherit;font-size:12px;cursor:pointer;
}
.tg-guest-save-guest:hover{text-decoration:underline}
.tg-guest-save-note{font-size:11px;color:var(--muted)}
@media(max-width:520px){
 .tg-game-results .tg-guest-save-account{padding:12px}
 .tg-guest-save-actions>.tg-game-button{flex:1 1 auto;min-width:0}
}

/* Catalogue/home Grouplet artwork: the same fill-only icon as the navigation,
   enlarged and gently turned anticlockwise like the other game cover motifs. */
.game-catalog-card[data-game="grouplet"] .game-card-art > .tg-game-icon{
 --tg-icon-size:146px;
 --tg-icon-art-size:126px;
 transform:rotate(-8deg);
 transform-origin:center;
 border:0!important;
 outline:0!important;
 box-shadow:none!important;
 background:transparent!important;
}
@media(max-width:700px){
 .game-catalog-card[data-game="grouplet"] .game-card-art > .tg-game-icon{
  --tg-icon-size:112px;
  --tg-icon-art-size:96px;
 }
}

/* Phone game chrome: the route title in the top bar carries identity.
   Hide every decorative background emblem, not just Sideweave's.
   The slightly thinner navbar gives the intro actions a real 9px gap. */
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem{
  display:none!important;
 }
 body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden])){
  height:calc(100dvh - 54px - env(safe-area-inset-bottom));
 }
 body.float-ui .app-shell:not(.admin-mode) .workspace:has(.tg-game-page:not([hidden])) main#main-content{
  height:calc(100dvh - 108px - env(safe-area-inset-bottom))!important;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .tg-game-actions{
  bottom:9px;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-intro .float-board-content{
  padding-bottom:55px;
 }
}

/* MULTI-MODE GAME RULE - Game Presentation API.
   Identical size, position and slide treatment to Pitchline Classic/Hard.
   Absolutely overlaid inside the introductory game slot; never participates
   in flex/grid layout, so the preview and playing board remain aligned. */
.tg-game-page .tg-game-intro{position:relative}
.tg-game-page .tg-game-mode-switch{
 display:flex;justify-content:center;position:absolute;z-index:5;
 top:12px;left:50%;transform:translateX(-50%);
 width:max-content;max-width:95%;min-height:0;margin:0;pointer-events:auto;
}
.tg-game-page .tg-game-mode-switch[hidden],
.tg-game-page .tg-game-intro[hidden] .tg-game-mode-switch{display:none!important}
.tg-game-page .tg-game-mode-switch .tg-segment{
 display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:4px;
 background:var(--surface-soft);border:1px solid var(--line);border-radius:12px;
 overflow:hidden;box-sizing:border-box;position:relative;isolation:isolate;
}
.tg-game-page .tg-game-mode-switch .tg-segment>button{
 appearance:none;position:relative;z-index:1;min-width:76px;padding:9px 17px;
 border:0;border-radius:9px;background:transparent;color:var(--muted);
 font:inherit;font-size:13px;font-weight:750;cursor:pointer;
}
.tg-game-page .tg-game-mode-switch .tg-segment>button[aria-selected="true"]{
 color:var(--canvas)!important;
}
.tg-game-page .tg-game-mode-switch .tg-segment:not(.tg-segment-ready)>button[aria-selected="true"]{
 background:var(--text)!important;
}
.tg-game-page .tg-game-mode-switch .tg-segment>button:focus-visible{
 outline:2px solid var(--text);outline-offset:1px;
}
.tg-game-page .tg-game-mode-switch .tg-segment::before{
 content:"";position:absolute;top:4px;bottom:4px;left:0;
 transform:translateX(var(--tg-segment-x,0px));
 width:var(--tg-segment-width,0px);border-radius:9px;background:var(--text);
 box-shadow:none;transition:transform .19s ease,width .19s ease,opacity .15s;
}
.tg-game-page .tg-game-mode-switch .tg-segment>button:disabled{cursor:default}
@media(max-width:700px){.tg-game-page .tg-game-mode-switch{top:9px}}
@media(prefers-reduced-motion:reduce){
 .tg-game-page .tg-game-mode-switch .tg-segment::before{transition:none}
}

/* Kata icon: the shared icon registry already assigns artworkScale=1.3.
   Include Kata in the SVG size contract (previously omitted), rather than
   scaling its cell or silently falling back to the unscaled default. */
.tg-game-icon[data-game="katana-kata"] > svg{
  display:block!important;
  width:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale,1))!important;
  height:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale,1))!important;
  max-width:none!important;max-height:none!important;
  flex:none;position:static;inset:auto;margin:auto;transform:none!important;
  overflow:visible;stroke:none;
}


/* Sequence Memory: state feedback without moving the established four-tile board. */
.page-memory .memory-tile.is-wrong{filter:saturate(.58) brightness(.78);border-color:#dc625c;box-shadow:inset 0 0 0 3px rgba(220,80,75,.55),0 0 0 4px rgba(220,80,75,.12)}
.page-memory .memory-round-clear .memory-progress span{color:var(--accent);animation:tg-memory-round-clear .44s ease-out}
@keyframes tg-memory-round-clear{0%{opacity:.55;transform:translateY(3px)}100%{opacity:1;transform:translateY(0)}}
.page-reaction .reaction-consistency{margin-top:6px}
.page-reaction #reaction-last{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
@media(prefers-reduced-motion:reduce){.page-memory .memory-round-clear .memory-progress span{animation:none}}


/* Number Memory / Shape Memory · shared vivid-but-considered Tegazumi styling.
   These controls intentionally inherit the established game panels and buttons. */
.page-number-memory .tg-game-panel,.page-shape-memory .tg-game-panel{min-width:0}
.md-game-error{padding:12px 15px;margin:10px 0 14px;border-radius:12px;
 color:var(--text);background:var(--surface-soft);border:1px solid var(--line);font-size:13px}
.md-game-error[hidden]{display:none}
.md-roundline{display:flex;align-items:center;justify-content:space-between;gap:12px;
 width:100%;margin:0 auto 18px;padding:0 2px;font-size:12px}
.md-round-count{font-weight:850;letter-spacing:.11em;color:var(--text);white-space:nowrap}
.md-round-instruction{color:var(--muted);text-align:right}
.md-result-line{display:flex;flex-direction:column;gap:6px;text-align:center;margin:15px auto 0}
.md-result-line strong{font-size:15px;color:var(--text)}
.md-result-line span{font-size:12px;color:var(--muted)}
/* Number: floating typography, subtle time indicator and a tactile 3x4 keypad. */
.nm-preview{position:relative;display:flex;min-height:270px;flex-direction:column;
 align-items:center;justify-content:center;gap:20px;overflow:hidden;
 width:100%;border-radius:19px;background:linear-gradient(137deg,#e4eafb 0%,#dcecf9 47%,#f5e6f5 100%);color:#2f4169}
.nm-preview-orbit{position:absolute;width:220px;height:220px;pointer-events:none;
 border:1px solid rgba(78,96,157,.12);border-radius:50%;box-shadow:0 0 0 43px rgba(255,255,255,.12),
 0 0 0 84px rgba(255,255,255,.10)}
.nm-preview-number{position:relative;font-size:clamp(37px,6vw,62px);font-variant-numeric:tabular-nums;
 letter-spacing:.1em;line-height:1.15;font-weight:790;text-align:center}
.nm-preview-caption{position:relative;font-size:10px;font-weight:850;letter-spacing:.22em;opacity:.65}
.nm-stage{width:min(100%,490px);margin:4px auto 0}
.nm-view{min-height:390px;display:flex;justify-content:center;align-items:flex-start}
.nm-number{position:relative;display:flex;min-height:260px;width:100%;overflow:hidden;
 align-items:center;justify-content:center;padding:35px 12px;box-sizing:border-box;
 border-radius:20px;background:linear-gradient(130deg,#dfe7fc,#e4f5f3 55%,#efe4ff);
 color:#293c6d;font-size:clamp(26px,6vw,66px);font-weight:800;
 line-height:1.1;letter-spacing:.06em;font-variant-numeric:tabular-nums;
 overflow-wrap:anywhere;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.nm-study-timer{position:absolute;bottom:0;left:0;width:100%;height:5px;
 background:linear-gradient(90deg,#5bc5c2,#8972ee,#ee8bb3);transform-origin:left center}
@keyframes nm-study-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.nm-answer{width:min(100%,350px);margin:0 auto}
.nm-answer[hidden],.nm-number[hidden]{display:none!important}
.nm-entry{display:flex;align-items:center;justify-content:center;min-height:72px;
 text-align:center;font-variant-numeric:tabular-nums;font-size:clamp(29px,6vw,43px);
 letter-spacing:.12em;font-weight:780;color:var(--text);overflow-wrap:anywhere}
.nm-entry.is-empty{color:var(--muted)}
.nm-entry.is-correct{color:#38ab80}
.nm-entry.is-wrong{color:#df637d}
.nm-length{display:block;text-align:center;color:var(--muted);font-size:12px;margin-bottom:14px}
.nm-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.nm-key{min-height:58px;border:1px solid var(--line);border-radius:13px;
 background:var(--surface);color:var(--text);font-size:24px;font-weight:720;
 font-variant-numeric:tabular-nums;box-shadow:0 3px 0 rgba(50,70,95,.08);
 transition:transform .1s,background .1s;touch-action:manipulation;cursor:pointer}
.nm-key:hover{background:var(--surface-soft)}
.nm-key:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(50,70,95,.08)}
.nm-key:focus-visible,.sm-tool-heading:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nm-key-utility{font-size:19px;color:var(--muted);background:var(--surface-soft)}
.nm-confirm{width:100%;margin-top:12px;min-height:44px}
.nm-confirm:disabled{opacity:.5;cursor:default}
/* Shape: layered pastel art board with saturated flat geometric solids. */
.sm-preview{width:100%;display:flex;align-items:center;justify-content:center;
 background:linear-gradient(140deg,#eee2fb,#e5f4f5 70%,#ffeadc);
 border-radius:20px;padding:16px;box-sizing:border-box}
.sm-preview .sm-board{width:min(100%,278px);border:0;box-shadow:none;background:transparent}
.sm-stage{width:min(100%,860px);margin:0 auto}
.sm-surface{display:flex;align-items:center;justify-content:center;min-height:340px;margin:auto}
.sm-board{position:relative;flex:none;width:min(100%,420px);aspect-ratio:1;isolation:isolate;
 overflow:hidden;box-sizing:border-box;border-radius:22px;border:1px solid var(--line);
 background:radial-gradient(circle at 18% 15%,rgba(246,196,213,.20),transparent 34%),
 radial-gradient(circle at 88% 84%,rgba(107,201,210,.15),transparent 45%),var(--surface)}
.sm-board::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.34;
 background-image:radial-gradient(var(--muted) .6px,transparent .7px);background-size:23px 23px}
.sm-object{position:absolute;display:block;z-index:1;
 width:20%;aspect-ratio:1;padding:0;border:0;background:transparent;
 transform:translate(-50%,-50%) rotate(var(--sm-angle,0deg)) scale(var(--sm-scale,1));
 touch-action:none;-webkit-tap-highlight-color:transparent}
.sm-editor .sm-object{cursor:grab}
.sm-editor .sm-object:active{cursor:grabbing}
.sm-object-ink{position:absolute;display:block;inset:1%;background:var(--sm-ink,#ef5962);
 filter:drop-shadow(0 5px 4px rgba(0,0,0,.08));}
.sm-editor .sm-object.is-selected::after{content:'';position:absolute;inset:-9px;pointer-events:none;
 border:2px dashed var(--text);border-radius:50%;opacity:.52}
.sm-editor .sm-object:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:50%}
.sm-feedback{width:100%;max-width:660px;margin:0 auto;text-align:center}
.sm-feedback-info{display:flex;align-items:center;justify-content:center;gap:16px;margin:10px 0 15px}
.sm-feedback-info span{font-size:12px;color:var(--muted)}
.sm-feedback-score{font-size:clamp(31px,5vw,51px);font-weight:850;letter-spacing:-.055em}
.sm-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sm-compare-side{min-width:0}
.sm-compare-title{display:block;font-size:10px;font-weight:820;letter-spacing:.12em;
 color:var(--muted);padding-bottom:8px}
.sm-compare-board{width:100%;border-radius:16px}
.sm-feedback>.tg-game-button{margin-top:18px}
.sm-workbench{margin:0;padding:18px;box-sizing:border-box;
 border:1px solid var(--line);background:var(--surface);
 box-shadow:0 8px 30px rgba(37,55,72,.04);border-radius:18px;max-width:660px}
.sm-tool-heading,.sm-control-caption{display:block;color:var(--muted);font-size:10px;
 font-weight:850;letter-spacing:.13em;margin-bottom:9px}
.sm-layers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sm-layer{display:flex;align-items:center;justify-content:center;gap:7px;
 width:55px;height:41px;box-sizing:border-box;
 border:1px solid var(--line);background:var(--surface-soft);color:var(--text);
 border-radius:10px;font-size:11px;font-weight:750;cursor:pointer}
.sm-layer.is-current{border:2px solid var(--accent);background:var(--surface)}
.sm-layer-ink{display:block;width:19px;height:19px}
.sm-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 column-gap:18px;row-gap:10px;align-items:start}
.sm-tools>.sm-control-caption{margin:4px 0 0}
.sm-kind-grid,.sm-colour-grid{display:flex;align-items:stretch;gap:5px;flex-wrap:wrap;min-width:0}
.sm-kind-button{display:flex;align-items:center;justify-content:center;gap:6px;flex-direction:column;
 width:49px;min-height:56px;border:1px solid var(--line);background:var(--surface-soft);
 color:var(--text);border-radius:10px;cursor:pointer}
.sm-kind-button.is-current,.sm-colour-button.is-current{outline:2px solid var(--accent);outline-offset:1px}
.sm-kind-art{width:21px;height:21px;background:linear-gradient(130deg,#a785ed,#ef83a5)}
.sm-kind-button small{font-size:9px;color:var(--muted)}
.sm-colour-button{position:relative;width:32px;height:32px;border:2px solid var(--surface);
 border-radius:50%;background:var(--sm-swatch);cursor:pointer;
 box-shadow:0 0 0 1px var(--line)}
.sm-colour-button.is-current::after{content:'';position:absolute;inset:9px;
 border-radius:50%;background:#fff;box-shadow:0 0 2px rgba(0,0,0,.15)}
.sm-sliders{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px;
 padding:13px 0}
.sm-slider-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.sm-slider-head{display:flex;align-items:center;justify-content:space-between;gap:6px;
 font-size:11px;color:var(--text);font-weight:600}
.sm-slider-head output{font-weight:800;font-variant-numeric:tabular-nums;color:var(--muted)}
.sm-slider{display:block;width:100%;accent-color:#9277e7;cursor:pointer;touch-action:pan-y}
.sm-edit-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.sm-result-recap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:18px}
.sm-result-chip{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;
 padding:12px 3px;border:1px solid var(--line);border-radius:12px;
 background:var(--surface-soft);font-variant-numeric:tabular-nums}
.sm-result-chip small{font-size:9px;color:var(--muted);letter-spacing:.06em}
.sm-result-chip strong{font-size:20px}
.sm-workbench[hidden],.sm-reference[hidden],.sm-editor[hidden],.sm-feedback[hidden]{display:none!important}
@media(max-width:700px){
 .md-roundline{flex-direction:column;gap:5px;align-items:center;text-align:center}
 .md-round-instruction{text-align:center}
 .sm-surface{min-height:275px}
 .sm-board{width:min(100%,355px)}
 .sm-workbench{padding:13px;border-radius:14px}
 .sm-tools{grid-template-columns:1fr;gap:7px}
 .sm-sliders,.sm-edit-actions{grid-column:auto}
 .sm-sliders{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px}
 .sm-compare{gap:9px}
 .sm-feedback-info{gap:9px;flex-wrap:wrap}
 .nm-view{min-height:380px}
 .nm-number{min-height:235px;letter-spacing:.035em}
}
@media(max-width:390px){
 .sm-kind-button{width:46px;min-height:52px}
 .sm-layers{gap:5px}.sm-layer{width:48px;height:38px}
 .sm-result-chip strong{font-size:15px}
 .sm-result-chip small{font-size:8px}
 .nm-key{min-height:53px}
}
@media(prefers-reduced-motion:reduce){
 .nm-key{transition:none}
}


/* Memory duo refinement: keep splash proportions identical to the canonical
   square game previews, rather than stretching artwork over the full panel. */
:is(.page-number-memory,.page-shape-memory) .tg-game-stage-preview[data-game-preview="full"]{
 box-sizing:border-box;
 width:min(100%,var(--tg-game-visual-size,var(--float-square-size,550px)));
 max-width:none;
 aspect-ratio:1;min-height:0;max-height:100%;
 align-self:center;flex:0 1 auto;
}
:is(.page-number-memory,.page-shape-memory) .tg-game-stage-preview[data-game-preview="full"] > :is(.nm-preview,.sm-preview){
 width:100%;height:100%;min-height:0;aspect-ratio:1;
 box-sizing:border-box;flex:none;margin:0;
}
.page-number-memory .nm-preview{
 background:linear-gradient(144deg,#e4eafb 0%,#deeff8 55%,#f3e4f4 100%);
}
.page-number-memory .nm-preview-number{
 font-size:clamp(30px,clamp(6vw,55px),62px);
 letter-spacing:.075em;max-width:95%;overflow-wrap:anywhere;
}
.page-shape-memory .sm-preview{
 padding:clamp(12px,5%,28px);
 background:linear-gradient(135deg,#eee5fa 0%,#e9f3f5 56%,#f7e8e5 100%);
}
.page-shape-memory .sm-preview .sm-board{
 width:100%;max-width:100%;aspect-ratio:1;background:transparent;
 border:0;box-shadow:none;
}
.page-shape-memory .sm-preview .sm-board::before{opacity:.18}
.page-number-memory .nm-stage{width:min(100%,390px)}
.page-number-memory .nm-number{
 width:min(100%,380px);aspect-ratio:1;min-height:0;max-height:380px;
 margin:0 auto;border-radius:20px;
 background:linear-gradient(145deg,#e4eafa,#e2f0f3 56%,#f0e6f8);
}
.page-number-memory .nm-view{min-height:min(400px,80vh)}
.page-number-memory .nm-number-digits{
 display:block;width:100%;min-width:0;max-width:100%;
 text-align:center;white-space:normal;overflow-wrap:anywhere;
 font-size:clamp(22px,calc(75px - var(--nm-digits,2) * 2.55px),61px);
 line-height:1.42;letter-spacing:.075em;word-spacing:.12em;
 font-variant-numeric:tabular-nums;font-weight:800;
 animation:md-number-appear .28s cubic-bezier(.2,.7,.2,1) both;
}
.page-number-memory .nm-entry{
 max-width:100%;white-space:normal;overflow-wrap:anywhere;
 font-size:clamp(21px,calc(51px - var(--nm-entry-digits,2) * 1.15px),40px);
 line-height:1.4;
}
.nm-correction{
 margin:-4px 0 10px;text-align:center;
 font-size:12px;font-weight:740;letter-spacing:.03em;line-height:1.5;
 color:var(--text);overflow-wrap:anywhere;
}
.nm-correction[hidden]{display:none!important}
.nm-stage[data-phase="answer"] .nm-answer{animation:md-answer-appear .22s ease-out both}
.nm-stage.nm-success .nm-entry{animation:md-success .38s ease-out}
.page-number-memory .nm-key{
 border-color:var(--line);transition:transform .12s,box-shadow .12s,background-color .12s,border-color .12s;
}
.page-number-memory .nm-key:focus-visible,
.page-shape-memory :is(.sm-layer,.sm-kind-button,.sm-colour-button,.sm-slider):focus-visible{
 outline:2px solid var(--accent);outline-offset:3px;
}
.page-number-memory .nm-key:active{background:color-mix(in srgb,#6ebdec 18%,var(--surface))}
.page-number-memory .nm-study-timer{box-shadow:0 0 10px rgba(148,116,231,.21)}
/* Real study, input and result phases use quick opacity/position transitions,
   never slow scripted tweening or extra timers. */
.sm-stage[data-phase="study"] .sm-reference .sm-object{
 animation:md-shape-appear .36s ease-out both;
}
.sm-stage[data-phase="study"] .sm-reference .sm-object:nth-child(2n){animation-delay:.07s}
.sm-stage[data-phase="answer"] .sm-editor,
.sm-stage[data-phase="answer"] .sm-workbench{animation:md-answer-appear .24s ease-out both}
.sm-stage[data-phase="feedback"] .sm-feedback{animation:md-answer-appear .2s ease-out both}
.page-shape-memory .sm-workbench{max-width:none}
.page-shape-memory .sm-edit-hint{
 margin:0 0 16px;color:var(--muted);font-size:12px;line-height:1.5;
}
.page-shape-memory .sm-layer,
.page-shape-memory .sm-kind-button{
 transition:background-color .13s,border-color .13s,transform .13s;
}
.page-shape-memory .sm-layer:hover,
.page-shape-memory .sm-kind-button:hover{transform:translateY(-2px);border-color:var(--accent)}
.page-shape-memory .sm-layer.is-current,
.page-shape-memory .sm-kind-button.is-current{
 background:color-mix(in srgb,#9b8ae9 9%,var(--surface));border-color:var(--accent);
}
.page-shape-memory .sm-colour-button{transition:transform .14s,outline-color .14s}
.page-shape-memory .sm-colour-button:hover{transform:scale(1.13)}
.page-shape-memory .sm-feedback-score{color:var(--text)}
/* Colour is the accent, not the surface. The entire game stays genuinely dark. */
:root[data-theme="dark"] .page-number-memory .nm-preview{
 background:linear-gradient(135deg,#262d40 0%,#21333e 55%,#32253e 100%);
 color:#dce8ff;
}
:root[data-theme="dark"] .page-number-memory .nm-preview-orbit{
 border-color:rgba(142,170,238,.13);
 box-shadow:0 0 0 43px rgba(166,146,239,.035),0 0 0 84px rgba(115,202,220,.025);
}
:root[data-theme="dark"] .page-number-memory .nm-preview-caption{color:#b6b9d8;opacity:1}
:root[data-theme="dark"] .page-number-memory .nm-number{
 background:linear-gradient(135deg,#242d3d 0%,#20323c 58%,#30263e 100%);
 color:#eef4ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
:root[data-theme="dark"] .page-number-memory .nm-entry{color:var(--text)}
:root[data-theme="dark"] .page-number-memory .nm-entry.is-correct{color:#72dbb3}
:root[data-theme="dark"] .page-number-memory .nm-entry.is-wrong{color:#f18d9f}
:root[data-theme="dark"] .page-shape-memory .sm-preview{
 background:linear-gradient(136deg,#2c283d 0%,#22353b 57%,#392b39 100%);
}
:root[data-theme="dark"] .page-shape-memory .sm-preview .sm-board{
 background:transparent;box-shadow:none;border:0;
}
:root[data-theme="dark"] .page-shape-memory .sm-board{
 background:radial-gradient(circle at 20% 20%,rgba(184,143,229,.1),transparent 45%),
 radial-gradient(circle at 80% 79%,rgba(100,218,191,.06),transparent 48%),var(--surface);
}
:root[data-theme="dark"] .page-shape-memory .sm-board::before{opacity:.18}
:root[data-theme="dark"] .page-shape-memory .sm-object-ink{
 filter:drop-shadow(0 6px 7px rgba(0,0,0,.20));
}
@keyframes md-number-appear{
 from{opacity:0;filter:blur(5px);transform:translateY(7px) scale(.985)}
 to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
}
@keyframes md-answer-appear{
 from{opacity:0;transform:translateY(9px)}
 to{opacity:1;transform:translateY(0)}
}
@keyframes md-shape-appear{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@keyframes md-success{40%{transform:scale(1.035)}100%{transform:scale(1)}}
@media(max-width:700px){
 :is(.page-number-memory,.page-shape-memory) .tg-game-stage-preview[data-game-preview="full"]{
   width:min(100cqw,100cqh,var(--tg-game-visual-size,var(--float-square-size,500px)))!important;
   height:min(100cqw,100cqh,var(--tg-game-visual-size,var(--float-square-size,500px)))!important;
   max-width:100%;max-height:100%;
 }
 .page-number-memory .nm-number{width:min(100%,340px)}
 .page-shape-memory .sm-preview{padding:clamp(12px,4vw,22px)}
 .page-shape-memory .sm-workbench{padding:12px}
 .page-number-memory .nm-view{min-height:330px}
}
@media(prefers-reduced-motion:reduce){
 .page-number-memory .nm-number-digits,.nm-stage[data-phase="answer"] .nm-answer,
 .nm-stage.nm-success .nm-entry,.sm-stage[data-phase="study"] .sm-reference .sm-object,
 .sm-stage[data-phase="answer"] .sm-editor,.sm-stage[data-phase="answer"] .sm-workbench,
 .sm-stage[data-phase="feedback"] .sm-feedback{animation:none!important}
 .page-shape-memory :is(.sm-layer,.sm-kind-button,.sm-colour-button){transition:none}
}


/* A filled game motif is exactly that: flat paint, no inherited SVG strokes.
   The shared cell remains 24/36/76 px; art scales in the same way as its peers. */
.tg-game-icon[data-icon-style="solid"]>svg{
 width:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale,1))!important;
 height:calc(var(--tg-icon-art-size) * var(--tg-icon-art-scale,1))!important;
 max-width:none!important;max-height:none!important;
 flex:none;fill:none!important;stroke:none!important;stroke-width:0!important;
 overflow:visible!important;transform:none!important;
}
.tg-game-icon[data-icon-style="solid"]>svg *,
.tg-game-icon[data-icon-style="solid"]>svg :is(text,path,rect,circle,polygon,ellipse){
 stroke:none!important;stroke-width:0!important;paint-order:normal!important;
}
/* Shape Memory: the canvas itself selects a piece. There is no separate layer
   selector or fine-position form; dragging and arrow nudges handle X/Y. */
.page-shape-memory .sm-stage>.sm-workbench{gap:7px}
.page-shape-memory .sm-workbench>.sm-tools{gap:12px}
.page-shape-memory .sm-kind-button .sm-kind-art{
 background:var(--sm-picker-ink,var(--sm-placeholder-ink,#d9dee4));
 filter:none;box-shadow:none;border:0;
}
.page-shape-memory .sm-colour-button,
.page-shape-memory .sm-kind-button{
 box-shadow:none;
}
.page-shape-memory .sm-edit-actions{margin-top:auto}
/* The shared progress footer observes the presentation API's round label.
   Do not introduce a second custom progress bar for these two games. */


/* Shape Memory v2: the persistent footer is the only round counter.
   The upper line now carries a concise study/edit prompt only. */
.page-number-memory .md-roundline,
.page-shape-memory .sm-stage>.md-roundline{
 justify-content:center;min-height:20px;text-align:center;
}
.page-number-memory .md-round-instruction,
.page-shape-memory .sm-stage>.md-roundline .md-round-instruction{
 width:100%;text-align:center;
}
/* Handles live on each selected shape. Move by dragging its body, rotate
   from the upper-left, resize from lower-right. No overlay covers the board. */
.page-shape-memory .sm-editor .sm-object{overflow:visible}
.page-shape-memory .sm-editor .sm-object-ink{pointer-events:none}
.page-shape-memory .sm-editor .sm-object:not(.is-selected) .sm-handle{display:none}
.page-shape-memory .sm-editor .sm-object.is-selected .sm-handle{
 display:flex;align-items:center;justify-content:center;
}
.page-shape-memory .sm-editor .sm-handle{
 position:absolute;z-index:6;box-sizing:border-box;
 width:30px;height:30px;border-radius:50%;
 border:1px solid color-mix(in srgb,var(--text) 28%,var(--surface));
 background:var(--surface);color:var(--text);
 box-shadow:0 2px 12px rgba(0,0,0,.22);
 font-size:21px;line-height:1;font-weight:750;
 cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
 padding:0;pointer-events:auto;-webkit-tap-highlight-color:transparent;
}
.page-shape-memory .sm-editor .sm-handle:active{cursor:grabbing}
.page-shape-memory .sm-editor .sm-handle:focus-visible{
 outline:2px solid var(--accent);outline-offset:3px;
}
.page-shape-memory .sm-editor .sm-handle-angle{left:-18px;top:-18px}
.page-shape-memory .sm-editor .sm-handle-size{right:-18px;bottom:-18px}
.page-shape-memory .sm-editor .sm-object.is-selected{
 z-index:8;
}
.page-shape-memory .sm-editor .sm-object.is-selected::after{
 pointer-events:none;
}
/* Ten-round summaries occupy two balanced rows on desktop and on mobile. */
.page-shape-memory .sm-result-recap{
 grid-template-columns:repeat(5,minmax(0,1fr));
}
@media(max-width:500px){
 .page-shape-memory .sm-editor .sm-handle{width:28px;height:28px;font-size:19px}
 .page-shape-memory .sm-editor .sm-handle-angle{left:-15px;top:-15px}
 .page-shape-memory .sm-editor .sm-handle-size{right:-15px;bottom:-15px}
}


/* Shared game shell still owns the title and persistent leaderboard. */
body.float-ui .app-shell:not(.admin-mode) .page-shape-memory .tg-game-play:not([hidden]){
 min-height:0;overflow:hidden;
}
body.float-ui .app-shell:not(.admin-mode) .page-shape-memory .tg-game-play>.sm-stage{
 flex:1 1 auto;min-height:0;max-height:100%;height:100%;
}
.page-shape-memory .sm-editor .sm-object.sm-is-circle .sm-handle-angle{display:none!important}
.page-shape-memory .sm-editor .sm-handle-size svg{
 width:21px;height:21px;pointer-events:none;
}
.page-shape-memory .sm-feedback-score{font-variant-numeric:tabular-nums}
.page-shape-memory .sm-result-chip strong{font-variant-numeric:tabular-nums;font-size:17px}

/* Shape Memory v5: canvas-first layout and genuinely centred dock.
   Groups use their own widths, rather than stretching to unequal columns. */
.page-shape-memory .sm-stage{
 display:block;position:relative;box-sizing:border-box;
 width:min(100%,736px);max-width:736px;
 height:100%;min-height:0;max-height:100%;
 margin:0 auto;padding:0;overflow:hidden;
}
.page-shape-memory .sm-studio{
 position:relative;display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:minmax(0,1fr) auto;
 width:100%;height:100%;min-height:0;max-height:100%;
 overflow:hidden;border:1px solid var(--line);
 border-radius:20px;background:var(--surface);
 box-shadow:0 10px 30px rgba(13,22,38,.05);
}
.page-shape-memory .sm-studio>.md-roundline{
 position:absolute;top:0;left:0;right:0;z-index:5;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
 min-height:45px;width:100%;box-sizing:border-box;
 margin:0;padding:4px 12px;
 border:0;background:transparent;pointer-events:none;
}
.page-shape-memory .sm-studio>.md-roundline .md-round-instruction{
 width:auto;margin:0;padding:2px 8px;
 font-size:11px;color:var(--muted);text-align:center;
 background:color-mix(in srgb,var(--surface) 88%,transparent);
 border-radius:999px;
}
.page-shape-memory .sm-rule-note{
 display:block;font-size:10px;line-height:1.3;
 font-weight:650;text-align:center;color:var(--muted);
 padding:1px 8px;background:color-mix(in srgb,var(--surface) 88%,transparent);
 border-radius:99px;
}
.page-shape-memory .sm-studio>.sm-surface{
 display:flex;align-items:center;justify-content:center;
 grid-column:1;grid-row:1;
 width:100%;height:100%;min-width:0;min-height:0;max-height:100%;
 margin:0;padding:48px 12px 8px;overflow:hidden;
 box-sizing:border-box;container-type:size;
}
.page-shape-memory .sm-studio>.sm-surface>.sm-board{
 display:block;flex:none;
 width:min(100cqw,100cqh,760px);
 height:auto;max-width:100%;max-height:100%;
 aspect-ratio:1;margin:0;
 border:0;border-radius:15px;box-shadow:none;
}
.page-shape-memory .sm-studio>.sm-surface>.sm-feedback{
 flex:0 1 auto;max-width:min(100%,680px);
 overflow-y:auto;max-height:100%;scrollbar-width:thin;
}
.page-shape-memory .sm-studio>.sm-workbench{
 grid-column:1;grid-row:2;
 display:block;position:relative;
 width:100%;height:auto;min-width:100%;min-height:0;max-width:100%;max-height:none;
 justify-self:stretch;align-self:end;box-sizing:border-box;
 margin:0;padding:9px 12px 10px;
 border:0;border-top:1px solid var(--line);
 background:color-mix(in srgb,var(--surface-soft) 28%,var(--surface));
 box-shadow:none;border-radius:0;
 overflow:visible;overscroll-behavior:auto;
}
.page-shape-memory .sm-studio>.sm-workbench[hidden]{display:none!important}
.page-shape-memory .sm-workbench>.sm-tools{
 display:flex;flex-wrap:wrap;
 align-items:center;justify-content:center;
 width:100%;max-width:690px;gap:10px 26px;
 margin:0 auto;padding:0;
}
.page-shape-memory .sm-tool-group{min-width:0}
.page-shape-memory .sm-kind-group,
.page-shape-memory .sm-colour-group{
 flex:0 0 auto;width:auto;max-width:100%;
 display:flex;align-items:center;justify-content:center;
}
.page-shape-memory .sm-control-caption{display:none}
.page-shape-memory .sm-kind-grid{
 display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
 gap:7px;width:auto;height:47px;min-width:0;margin:0;
}
.page-shape-memory .sm-kind-button{
 flex:0 0 48px;width:48px;height:47px;min-height:47px;
 padding:2px 0;gap:3px;border-radius:9px;
}
.page-shape-memory .sm-kind-art{width:24px;height:24px}
.page-shape-memory .sm-kind-button small{font-size:9px;line-height:1}
.page-shape-memory .sm-colour-grid{
 display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
 gap:8px;width:auto;height:47px;min-width:0;margin:0;
}
.page-shape-memory .sm-colour-button{
 flex:0 0 29px;width:29px;height:29px;min-width:0;
}
.page-shape-memory .sm-edit-actions{
 display:flex;flex:0 0 100%;flex-wrap:nowrap;
 align-items:center;justify-content:center;
 gap:10px;margin:0;padding:0;
 width:auto;height:auto;min-width:0;max-width:none;
 border:0;position:static;bottom:auto;background:transparent;
}
.page-shape-memory .sm-edit-actions .tg-game-button{
 flex:0 1 160px;margin:0;min-height:36px;height:36px;
 width:160px;padding:7px 10px;min-width:0;
 font-size:12px;white-space:nowrap;text-align:center;
}
.page-shape-memory .sm-edit-actions .tg-game-button-primary{min-width:0}
.page-shape-memory .sm-result-summary{
 margin:8px 0 0;text-align:center;color:var(--muted);font-size:13px;
}
.page-shape-memory .sm-sliders,.page-shape-memory .sm-edit-hint{display:none!important}
/* Unassigned neutral shells; their outlines trace their current shape.
   Shape-first stays off-white/charcoal; colour-first fills the soft square. */
.page-shape-memory{--sm-placeholder-ink:#d9dee4}
:root[data-theme="dark"] .page-shape-memory{--sm-placeholder-ink:#323d4b}
.page-shape-memory .sm-editor .sm-object.sm-placeholder .sm-object-ink{filter:none}
.page-shape-memory .sm-editor .sm-object.sm-placeholder .sm-selection-outline{display:block!important;opacity:.5}
.page-shape-memory .sm-editor .sm-object.sm-placeholder.is-selected .sm-selection-outline{opacity:1}
.page-shape-memory .sm-edit-actions .tg-game-button:disabled{opacity:.42;cursor:not-allowed}
/* The marching outline traces the actual filled shape rather than a
   circular bounding-box border. It updates whenever the shape changes. */
.page-shape-memory .sm-editor .sm-object.is-selected::after{
 content:none!important;display:none!important;
}
.page-shape-memory .sm-editor .sm-object:focus-visible{
 outline:none!important;
}
.page-shape-memory .sm-selection-outline{
 position:absolute;inset:-6%;z-index:3;
 display:none;pointer-events:none;
}
.page-shape-memory .sm-editor .sm-object.is-selected .sm-selection-outline{display:block}
.page-shape-memory .sm-selection-outline svg{
 display:block;width:100%;height:100%;overflow:visible;
 fill:none;stroke:var(--text);stroke-width:1.65;
 stroke-dasharray:3 3.4;
 opacity:.65;
 animation:sm-shape-march .9s linear infinite;
}
@keyframes sm-shape-march{to{stroke-dashoffset:-12.8}}
.page-shape-memory .sm-editor .sm-object.is-selected .sm-handle{
 z-index:7;
}
.page-shape-memory .sm-editor .sm-handle-colour{top:-18px;right:-18px}
.page-shape-memory .sm-editor .sm-handle-colour-dot{
 display:block;width:17px;height:17px;border-radius:50%;
 background:var(--sm-ink,#ef5962);
 border:2px solid color-mix(in srgb,var(--surface) 60%,transparent);
 box-sizing:border-box;pointer-events:none;
}
.page-shape-memory .sm-editor .sm-handle-colour::after{
 content:"↻";position:absolute;right:-6px;top:-7px;
 display:flex;align-items:center;justify-content:center;
 font-size:11px;line-height:1;width:14px;height:14px;
 border-radius:50%;color:var(--text);
 background:var(--surface);
 box-shadow:0 0 0 1px var(--line);
}
/* Phone dock: shapes centred above a jointly centred colours/actions row.
   Smallest phones wrap naturally instead of overflowing or scrolling. */
@media(max-width:640px){
 .page-shape-memory .sm-stage{height:100%;overflow:hidden;padding:0;max-width:100%}
 .page-shape-memory .sm-studio{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  height:100%;overflow:hidden;border-radius:16px;
 }
 .page-shape-memory .sm-studio>.sm-surface{
  width:100%;height:100%;min-height:0;max-height:100%;
  padding:47px 8px 7px;overflow:hidden;container-type:size;
 }
 .page-shape-memory .sm-studio>.sm-surface>.sm-board{
  width:min(100cqw,100cqh,600px);
  height:auto;max-width:100%;max-height:100%;
 }
 .page-shape-memory .sm-studio>.sm-workbench{
  width:100%;min-width:100%;max-width:100%;height:auto;min-height:0;max-height:none;
  margin:0;padding:8px 8px 9px;
  border:0;border-top:1px solid var(--line);
  overflow:visible;background:color-mix(in srgb,var(--surface-soft) 28%,var(--surface));
 }
 .page-shape-memory .sm-workbench>.sm-tools{
  display:flex;flex-wrap:wrap;width:100%;
  gap:7px 8px;align-items:center;justify-content:center;
 }
 .page-shape-memory .sm-kind-group{flex:0 0 100%;max-width:100%}
 .page-shape-memory .sm-kind-grid{gap:6px;height:42px}
 .page-shape-memory .sm-kind-button{
  flex:0 0 43px;width:43px;height:42px;min-height:42px;
 }
 .page-shape-memory .sm-kind-art{width:21px;height:21px}
 .page-shape-memory .sm-colour-group{flex:0 0 auto;width:auto}
 .page-shape-memory .sm-colour-grid{gap:4px;height:33px}
 .page-shape-memory .sm-colour-button{flex:0 0 23px;width:23px;height:23px}
 .page-shape-memory .sm-edit-actions{
  display:flex;flex:0 0 auto;width:auto;height:33px;
  align-items:center;justify-content:center;gap:6px;
 }
 .page-shape-memory .sm-edit-actions .tg-game-button{
  flex:0 0 62px;width:62px;height:33px;min-height:33px;
  padding:5px 4px;font-size:10px;
 }
}
@media(max-width:380px){
 .page-shape-memory .sm-studio>.sm-workbench{padding:7px 6px 8px}
 .page-shape-memory .sm-workbench>.sm-tools{gap:6px 7px}
 .page-shape-memory .sm-kind-grid{gap:5px;height:40px}
 .page-shape-memory .sm-kind-button{
  flex-basis:41px;width:41px;height:40px;min-height:40px;
 }
 .page-shape-memory .sm-kind-art{width:19px;height:19px}
 .page-shape-memory .sm-kind-button small{font-size:8px}
 .page-shape-memory .sm-colour-grid{gap:3px}
 .page-shape-memory .sm-colour-button{flex-basis:22px;width:22px;height:22px}
 .page-shape-memory .sm-edit-actions .tg-game-button{flex-basis:60px;width:60px}
}
/* Fourth canvas grip: cycle form opposite the colour grip.
   Top-left rotate, top-right colour, bottom-left shape, bottom-right resize. */
.page-shape-memory .sm-editor .sm-handle-shape{left:-18px;bottom:-18px}
.page-shape-memory .sm-editor .sm-handle-shape svg{
 display:block;width:21px;height:21px;pointer-events:none;
}
@media(max-width:500px){
 .page-shape-memory .sm-editor .sm-handle-shape{left:-15px;bottom:-15px}
}
@media(prefers-reduced-motion:reduce){
 .page-shape-memory .sm-selection-outline svg{animation:none}
}

/* Borderless cognitive-game splash artwork: large numerals and freely arranged
   shapes, with no card backgrounds, outlines or false preview frame. */
:is(.page-number-memory,.page-shape-memory,.page-timescape) .tg-game-stage-preview[data-game-preview="full"]{
 border:0!important;box-shadow:none!important;background:transparent!important;
}
.page-number-memory .nm-preview.nm-splash-array,
:root[data-theme="dark"] .page-number-memory .nm-preview.nm-splash-array,
.page-shape-memory .sm-preview,
:root[data-theme="dark"] .page-shape-memory .sm-preview{
 border:0!important;box-shadow:none!important;border-radius:0!important;
 background:transparent!important;
}
.page-number-memory .nm-splash-array{
 display:grid;place-items:center;overflow:visible;
 padding:clamp(4px,1.8vw,19px)
}
.page-number-memory .nm-splash-numerals{
 width:95%;height:88%;display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 place-items:center;gap:clamp(2px,1vw,12px);
 transform:rotate(-5deg)
}
.page-number-memory .nm-splash-numeral{
 font-variant-numeric:tabular-nums;font-weight:850;letter-spacing:-.075em;
 font-size:clamp(35px,6.1vw,90px);line-height:1;
 color:#6088c5
}
.page-number-memory .nm-splash-numeral:nth-child(3n+2){color:#977fdd}
.page-number-memory .nm-splash-numeral:nth-child(5n+4){color:#4eaeb4}
.page-number-memory .nm-splash-numeral:nth-child(7n+3){color:#cf7da9}
.page-number-memory .nm-splash-numeral:nth-child(5n+1){opacity:.76}
:root[data-theme="dark"] .page-number-memory .nm-splash-numeral{color:#85b8fa}
:root[data-theme="dark"] .page-number-memory .nm-splash-numeral:nth-child(3n+2){color:#b8a7f7}
:root[data-theme="dark"] .page-number-memory .nm-splash-numeral:nth-child(5n+4){color:#7ad8d1}
:root[data-theme="dark"] .page-number-memory .nm-splash-numeral:nth-child(7n+3){color:#f5aaca}
.page-shape-memory .sm-preview{padding:0!important;overflow:visible}
.page-shape-memory .sm-preview .sm-board,
:root[data-theme="dark"] .page-shape-memory .sm-preview .sm-board{
 width:100%;max-width:none;height:100%;aspect-ratio:1;
 border:0!important;box-shadow:none!important;overflow:visible;
 border-radius:0!important;background:transparent!important;
}
.page-shape-memory .sm-preview .sm-board::before{display:none!important}
.page-shape-memory .sm-preview .sm-object{width:23%}
.page-shape-memory .sm-preview .sm-object-ink{
 filter:drop-shadow(0 7px 11px rgba(21,38,52,.09))
}
@media(max-width:700px){
 .page-number-memory .nm-splash-numerals{width:100%;gap:2px}
 .page-number-memory .nm-splash-numeral{font-size:clamp(26px,10vw,59px)}
}
/* Zoom-in digit comparison remains on the Number Memory end screen until
   the player explicitly navigates away. The wrong digits are crossed out. */
.page-number-memory.nm-review-failure .tg-result-extra,
.page-number-memory.nm-review-failure .md-result-line{
 width:100%;max-width:100%;min-width:0;margin:4px auto 0
}
.nm-failure-review{
 width:min(100%,780px);margin:auto;text-align:center;
 animation:nm-review-focus .38s cubic-bezier(.16,.78,.2,1) both
}
.nm-failure-kicker{
 display:block;font-size:10px;color:var(--muted);font-weight:850;letter-spacing:.20em
}
.nm-failure-title{
 color:var(--text);font-size:clamp(19px,3.2vw,30px);
 line-height:1.2;letter-spacing:-.04em;margin:7px 0 20px
}
.nm-failure-panels{
 display:grid;grid-template-columns:minmax(0,1fr);
 gap:clamp(13px,2.6vh,27px);width:100%
}
.nm-failure-panel{
 min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px
}
.nm-failure-label{
 color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.15em
}
.nm-failure-digits{
 display:flex;max-width:100%;flex-wrap:wrap;justify-content:center;
 gap:clamp(1px,.55vw,8px);
 font-variant-numeric:tabular-nums;font-weight:850;
 font-size:clamp(21px,calc(78px - var(--nm-failure-length,2) * 2.9px),69px);
 line-height:1.2;letter-spacing:.02em;color:var(--text)
}
.nm-failure-digit{
 position:relative;display:inline-grid;place-items:center;min-width:.62em
}
.nm-failure-original .nm-failure-digit.is-target{color:#43a5a9}
.nm-failure-guess .nm-failure-digit.is-wrong{color:#d36b80}
.nm-failure-guess .nm-failure-digit.is-wrong::after{
 content:"";position:absolute;left:-.08em;right:-.08em;top:53%;
 height:clamp(2px,.07em,4px);border-radius:99px;
 background:currentColor;transform:rotate(-13deg)
}
.nm-failure-note{margin:18px 0 0;font-size:13px;color:var(--muted)}
@keyframes nm-review-focus{
 from{opacity:.4;transform:scale(.90) translateY(10px)}
 to{opacity:1;transform:scale(1) translateY(0)}
}
.page-number-memory.nm-review-failure .tg-game-results .tg-game-actions
 [data-result-action="replay"],
.page-number-memory.nm-review-failure .tg-game-results .tg-game-actions
 [data-result-action="daily"]{display:none!important}
@media(prefers-reduced-motion:reduce){.nm-failure-review{animation:none}}

/* Full leaderboard uses one shared, clean filter row, aligned with its
   title and score list. No cached Classic/Hard/Mark/Measure ghosts. */
body.float-ui .float-dialog-filters{
 display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
 flex:0 0 auto;gap:9px;padding:0 30px 14px;min-width:0;
}
body.float-ui .float-dialog-filters .tg-segment{
 width:max-content;max-width:100%;margin:0!important;
 align-self:center;flex:0 1 auto;
}
body.float-ui .float-dialog-filters [hidden]{display:none!important}
@media(max-width:700px){
 body.float-ui .float-dialog-filters{gap:8px;padding:0 20px 12px}
 body.float-ui .float-dialog-filters .tg-segment>button{padding:8px 13px;min-width:58px}
}

/* Native-resolution Bézier heart: no jagged polygon approximation. */
.page-shape-memory :is(.sm-object-ink,.sm-kind-art).sm-heart-vector{
 clip-path:none!important;background:transparent!important;color:var(--sm-ink,var(--sm-placeholder-ink,#d9dee4))
}
.page-shape-memory .sm-heart-vector svg{
 display:block;width:100%;height:100%;overflow:visible;pointer-events:none;
 fill:currentColor;stroke:none;shape-rendering:geometricPrecision
}
.page-shape-memory .sm-kind-art.sm-heart-vector{color:var(--sm-picker-ink,var(--sm-placeholder-ink,#d9dee4))}
.page-shape-memory .sm-object-ink.sm-heart-vector{color:var(--sm-ink,#ef5962)}
/* The full failure comparison overrides inherited .md-result-line span
   typography; digits remain legible and wrap cleanly on narrow screens. */
.page-number-memory .tg-game-results .nm-failure-review{
 width:min(100%,940px);max-width:none
}
.page-number-memory .tg-game-results .nm-failure-panels{gap:clamp(18px,3.2vh,34px)}
.page-number-memory .tg-game-results .nm-failure-digits{
 width:100%;max-width:100%;display:flex;justify-content:center;
 align-items:center;flex-wrap:wrap;gap:clamp(3px,.7vw,10px);
 font-size:clamp(34px,var(--nm-digit-size,68px),82px)!important;
 line-height:1.12!important;letter-spacing:-.015em!important;
}
.page-number-memory .tg-game-results .nm-failure-digits>.nm-failure-digit{
 font-size:inherit!important;line-height:inherit!important;
 font-weight:850!important;letter-spacing:inherit!important;min-width:.65em;
}
.page-number-memory .tg-game-results .nm-failure-digits>.nm-failure-digit::after{
 height:max(3px,.055em)
}
@media(max-width:600px){
 .page-number-memory .tg-game-results .nm-failure-digits{
  font-size:clamp(31px,7.5vw,var(--nm-digit-size,68px))!important
 }
}

/* Match the comparison's digit colours to its enlarged type, overriding
   generic tiny-muted result spans on each individual character. */
.page-number-memory .tg-game-results .nm-failure-digits>.nm-failure-digit.is-match{
 color:var(--text)!important
}
.page-number-memory .tg-game-results .nm-failure-original .nm-failure-digit.is-target{
 color:#43a5a9!important
}
.page-number-memory .tg-game-results .nm-failure-guess .nm-failure-digit.is-wrong{
 color:#d36b80!important
}

/* Number Memory: borderless study presentation, with its timer preserved.
   An animated, desaturated splash-style gradient belongs to the numerals. */
.page-number-memory .tg-game-panel,
.page-number-memory .tg-game-play:not([hidden]){
 background:transparent!important;border:0!important;box-shadow:none!important
}
.page-number-memory .nm-number,
:root[data-theme="dark"] .page-number-memory .nm-number{
 background:transparent!important;border:0!important;box-shadow:none!important;
 border-radius:0!important;overflow:visible!important
}
.page-number-memory .nm-number-digits{
 font-size:clamp(25px,calc(84px - var(--nm-digits,2) * 2.85px),70px);
 line-height:1.34;
 background:linear-gradient(105deg,#547fc6 0%,#9479d5 24%,#358f9d 50%,#c46e9f 75%,#547fc6 100%);
 background-size:230% 100%;background-clip:text;-webkit-background-clip:text;
 color:transparent;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 3px 7px rgba(73,110,165,.10));
 animation:md-number-appear .28s cubic-bezier(.2,.7,.2,1) both,nm-silk-ink 12s ease-in-out infinite alternate
}
:root[data-theme="dark"] .page-number-memory .nm-number-digits{
 background-image:linear-gradient(105deg,#88c1ff 0%,#b4a5f9 24%,#73dcd2 50%,#f3a6c8 75%,#88c1ff 100%)
}
@keyframes nm-silk-ink{from{background-position:0% 50%}to{background-position:100% 50%}}
.page-number-memory .nm-study-timer{border-radius:999px;overflow:hidden}
@media(prefers-reduced-motion:reduce){
 .page-number-memory .nm-number-digits{animation:none!important}
}
/* Recap comparison: one unbroken line per number at every viewport width.
   Container-relative text sizing makes even long numbers fit both panels. */
.page-number-memory .tg-game-results .nm-failure-panel{
 width:100%;container-type:inline-size
}
.page-number-memory .tg-game-results .nm-failure-digits{
 flex-wrap:nowrap!important;white-space:nowrap;overflow:visible;
 gap:clamp(0px,.3cqi,4px);min-width:0;max-width:100%;width:100%;
 font-size:clamp(10px,3vw,38px)!important;
 font-size:clamp(10px,var(--nm-failure-size,24px),74px)!important
}
.page-number-memory .tg-game-results .nm-failure-digits>.nm-failure-digit{
 flex:0 1 auto;min-width:.62em;white-space:nowrap
}


/* Number Memory result viewport safety: the comparison is the scrollable
   region; saving and the Continue/My Stats action remain visible below it.
   In particular, a 1080p desktop browser has less than 1080 CSS px once
   its chrome, site header and footer have taken their space. */
body.float-ui .app-shell:not(.admin-mode) .page-number-memory.nm-review-failure .tg-game-panel{
 grid-template-rows:0px minmax(0,1fr) 0px;
}
body.float-ui .app-shell:not(.admin-mode) .page-number-memory.nm-review-failure .tg-game-results{
 box-sizing:border-box;min-width:0;max-width:100%;min-height:0;
 justify-content:flex-start;gap:clamp(5px,.9vh,12px);
 padding:clamp(6px,1vh,12px) clamp(10px,1.6vw,20px) clamp(9px,1.2vh,16px);
 overflow-x:hidden;overflow-y:hidden;
}
body.float-ui .app-shell:not(.admin-mode) .page-number-memory.nm-review-failure .tg-result-overview{
 box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:0;
 flex:1 1 0;overflow-x:hidden;overflow-y:auto;
 overscroll-behavior:contain;scrollbar-width:thin;
 padding:0 4px 8px;
}
body.float-ui .app-shell:not(.admin-mode) .page-number-memory.nm-review-failure
 :is(.tg-result-extra,.md-result-line,.nm-failure-review,.nm-failure-panels,.nm-failure-panel){
 box-sizing:border-box;min-width:0;width:100%;max-width:100%;
}
body.float-ui .app-shell:not(.admin-mode) .page-number-memory.nm-review-failure
 .tg-game-results .tg-game-actions{
 box-sizing:border-box;position:relative;flex:0 0 auto;
 width:100%;min-width:0;margin:0;padding:4px 0 0;
 justify-content:center;flex-wrap:wrap;
}
body.float-ui .app-shell:not(.admin-mode) .page-number-memory.nm-review-failure
 .tg-game-results .tg-game-actions .memory-link{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:40px;padding:7px 12px;box-sizing:border-box;
}
@media(min-width:701px) and (max-height:1100px){
 body.float-ui .app-shell:not(.admin-mode) .page-number-memory.nm-review-failure .tg-result-eyebrow{
  margin-bottom:2px;
 }
 body.float-ui .app-shell:not(.admin-mode) .page-number-memory.nm-review-failure .tg-result-value{
  font-size:clamp(38px,5vh,54px);
 }
 body.float-ui .app-shell:not(.admin-mode) .page-number-memory.nm-review-failure .nm-failure-title{
  font-size:clamp(18px,2.4vh,24px);margin:4px 0 10px;
 }
 body.float-ui .app-shell:not(.admin-mode) .page-number-memory.nm-review-failure .nm-failure-panels{
  gap:clamp(9px,1.4vh,16px);
 }
 body.float-ui .app-shell:not(.admin-mode) .page-number-memory.nm-review-failure .nm-failure-note{
  margin-top:10px;
 }
}

/* Unified game title / Icon Studio rendering contract. Both use the same
   510px carrier, 360px art cell, rotation, offsets and responsive values. */
:where(.tg-game-page,.studio-page-viewport){--tg-motif-scale:1;--tg-motif-x:0px;--tg-motif-y:0px}
.tg-game-page[data-page="bitnode"],.studio-page-viewport[data-game="bitnode"]{
 --tg-motif-scale:1;--tg-motif-x:-72px}
.tg-game-page[data-page="oddlings"],.studio-page-viewport[data-game="oddlings"]{
 --tg-motif-scale:1.25;--tg-motif-x:-45px}
.tg-game-page[data-page="pinpoint"],.studio-page-viewport[data-game="pinpoint"]{
 --tg-motif-scale:1.15;--tg-motif-x:-38px}
.tg-game-page[data-page="cattiles"],.studio-page-viewport[data-game="cattiles"]{
 --tg-motif-scale:1.25;--tg-motif-x:-48px}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem,
.studio-page-viewport .studio-title-art{
 display:grid!important;place-items:center!important;position:absolute!important;
 z-index:0;top:-160px!important;left:-174px!important;width:510px!important;
 height:510px!important;overflow:visible!important;pointer-events:none;
 transform-origin:50% 50%!important;opacity:.16;color:var(--text);
 transform:translate(
 calc(var(--tg-studio-bg-x,0px) + var(--tg-motif-x,0px) + var(--tg-applied-bg-x,0px) + var(--tg-draft-bg-x,0px) + var(--tg-emblem-shift,0px)),
 calc(var(--tg-studio-bg-y,0px) + var(--tg-motif-y,0px) + var(--tg-applied-bg-y,0px) + var(--tg-draft-bg-y,0px))
 ) rotate(-21deg) scale(
 calc(var(--tg-emblem-scale,1) * var(--tg-studio-bg-size,1) * var(--tg-studio-bg-width,1) * var(--tg-motif-scale,1) * var(--tg-applied-bg-size,1) * var(--tg-applied-bg-width,1) * var(--tg-draft-bg-size,1) * var(--tg-draft-bg-width,1)),
 calc(var(--tg-emblem-scale,1) * var(--tg-studio-bg-size,1) * var(--tg-studio-bg-height,1) * var(--tg-motif-scale,1) * var(--tg-applied-bg-size,1) * var(--tg-applied-bg-height,1) * var(--tg-draft-bg-size,1) * var(--tg-draft-bg-height,1))
 )!important
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-game-icon,
.studio-page-viewport .studio-title-art .tg-game-icon{
 --tg-icon-size:360px!important;--tg-icon-art-size:301px!important;
 width:360px!important;height:360px!important;min-width:360px!important;
 display:grid!important;place-items:center!important;background:transparent!important;
 border:0!important;box-shadow:none!important
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-game-icon>svg,
.studio-page-viewport .studio-title-art .tg-game-icon>svg,
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-game-icon>img,
.studio-page-viewport .studio-title-art .tg-game-icon>img{
 width:301px!important;height:301px!important;max-width:none!important;
 max-height:none!important;margin:auto!important;object-fit:contain;overflow:visible!important
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-bitnode-nav-pixel,
.studio-page-viewport .studio-title-art .tg-bitnode-nav-pixel{
 width:301px!important;height:301px!important;max-width:none!important;
 max-height:none!important;object-fit:contain;image-rendering:pixelated
}
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem{
  top:-97px!important;left:-126px!important;width:350px!important;height:350px!important;opacity:.14
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-game-icon{
  --tg-icon-size:265px!important;--tg-icon-art-size:221px!important;
  width:265px!important;height:265px!important;min-width:265px!important
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-game-icon>svg,
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-game-icon>img,
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-bitnode-nav-pixel{
  width:221px!important;height:221px!important
 }
}

/* Existing studio-tuned games: mirror shipped per-game CSS variables.
   These are inherited by draft adjustments rather than hard-coded JS guesses. */
.studio-page-viewport[data-game="cattiles"] .studio-title-art{
 --tg-studio-bg-size:1.15;--tg-studio-bg-width:.96;--tg-studio-bg-height:.89;--tg-studio-bg-x:-2px;--tg-studio-bg-y:2px
}
.studio-page-viewport[data-game="colour-memory"] .studio-title-art{
 --tg-studio-bg-size:1;--tg-studio-bg-width:1;--tg-studio-bg-height:1
}
.studio-page-viewport[data-game="pitchline"] .studio-title-art{
 --tg-emblem-scale:1.25;--tg-studio-bg-width:.89;--tg-studio-bg-height:1.08
}
.studio-page-viewport[data-game="reaction-time"] .studio-title-art{
 --tg-emblem-scale:1.4;--tg-emblem-shift:-62px;--tg-studio-bg-size:1.2;--tg-studio-bg-height:.91;--tg-studio-bg-x:64px
}
.studio-page-viewport[data-game="sequence-memory"] .studio-title-art,
.studio-page-viewport[data-game="sideweave"] .studio-title-art{
 --tg-studio-bg-size:1;--tg-studio-bg-width:1;--tg-studio-bg-height:1
}
/* Bitnode image retains 40px pixel source, but matches the 301px emblem art cell. */
.studio-page-viewport .studio-title-art .tg-bitnode-nav-pixel,
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-bitnode-nav-pixel{
 image-rendering:pixelated!important;transform:none!important;filter:none!important
}

/* Icon Studio export, 26 Oct 2026. Applied *relative* to existing game motifs:
   preserve approved legacy scaling and allow future Studio drafts on top. */
:where(.tg-game-page[data-page="bitnode"],.studio-page-viewport[data-game="bitnode"]){
 --tg-applied-bg-size:.911;--tg-applied-bg-x:46px;--tg-applied-bg-y:-2px;
}
:where(.tg-game-page[data-page="cattiles"],.studio-page-viewport[data-game="cattiles"]){
 --tg-applied-bg-size:1.081;--tg-applied-bg-width:.96;--tg-applied-bg-height:.89;
 --tg-applied-bg-x:56px;--tg-applied-bg-y:-2px;
}
:where(.tg-game-page[data-page="grouplet"],.studio-page-viewport[data-game="grouplet"]){
 --tg-applied-bg-size:1.215;
}
:where(.tg-game-page[data-page="katana-kata"],.studio-page-viewport[data-game="katana-kata"]){
 --tg-applied-bg-size:1.318;--tg-applied-bg-x:22px;--tg-applied-bg-y:2px;
}
:where(.tg-game-page[data-page="pitchline"],.studio-page-viewport[data-game="pitchline"]){
 --tg-applied-bg-width:.89;--tg-applied-bg-height:1.08;
}
:where(.tg-game-page[data-page="reaction-time"],.studio-page-viewport[data-game="reaction-time"]){
 --tg-applied-bg-size:1.2;--tg-applied-bg-height:.91;--tg-applied-bg-x:-6px;
}
:where(.tg-game-page[data-page="shape-memory"],.studio-page-viewport[data-game="shape-memory"]){
 --tg-applied-bg-size:1.178;--tg-applied-bg-x:-8px;--tg-applied-bg-y:-20px;
}
/* Pitchline consists of five DOM bars, not an SVG. Do not force this icon
   into the grid used for other game title artwork (which stacks all bars). */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-game-icon[data-game="pitchline"],
.studio-page-viewport .studio-title-art .tg-game-icon[data-game="pitchline"]{
 display:flex!important;flex-direction:row!important;align-items:center!important;
 justify-content:center!important;flex-wrap:nowrap!important;
 gap:calc(var(--tg-icon-art-size) * .1)!important;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-game-icon[data-game="pitchline"]>i,
.studio-page-viewport .studio-title-art .tg-game-icon[data-game="pitchline"]>i{
 display:block!important;flex:0 0 calc(var(--tg-icon-art-size) * .12)!important;
 width:calc(var(--tg-icon-art-size) * .12)!important;
 height:calc(var(--tg-icon-art-size) * var(--tg-bar-height))!important;
 border-radius:999px!important;
}
/* Narrow screens use the same bar geometry with mobile icon-size tokens. */

/* Pitchline's five real, filled bars need greater visual mass in title art.
   Scope to the large banner / Studio motifs so sidebar icons remain unchanged.
   Wider bars and a smaller inter-bar gap preserve the 360px artwork cell. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-game-icon[data-game="pitchline"],
.studio-page-viewport .studio-title-art .tg-game-icon[data-game="pitchline"]{
 gap:calc(var(--tg-icon-art-size) * .035)!important;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-title-emblem .tg-game-icon[data-game="pitchline"]>i,
.studio-page-viewport .studio-title-art .tg-game-icon[data-game="pitchline"]>i{
 flex:0 0 calc(var(--tg-icon-art-size) * .19)!important;
 width:calc(var(--tg-icon-art-size) * .19)!important;
 background:currentColor!important;border:0!important;
 box-shadow:none!important;
}


/* Completion Experience API v2: game-specific round results appear immediately.
   Only supplemental charts use an optional native details disclosure. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-result-extra:not([hidden]){display:block}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-result-detail{display:flex}
/* Keep historical/test ranking caveats, but remove routine Play/Daily chatter. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results
 .tg-result-run-context:is([data-competition-mode="daily"],[data-competition-mode="play"]){display:none!important}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-result-run-context-board{display:none!important}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-result-run-context{margin:0 auto;padding:0;gap:6px}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-analytics{
 box-sizing:border-box;width:min(100%,390px);max-width:100%;min-width:0;
 border-top:1px solid var(--line);padding:8px 0 0;margin:0 auto;
 color:var(--text);flex:0 0 auto;text-align:center
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-analytics[hidden]{display:none!important}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-analytics>summary{
 cursor:pointer;display:list-item;list-style:none;padding:7px 14px;
 color:var(--muted);font-size:12px;font-weight:700;
 text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-analytics>summary::marker{content:""}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-analytics>summary::-webkit-details-marker{display:none}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-analytics>summary:hover{color:var(--text);text-decoration-color:currentColor}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-analytics>summary:focus-visible{
 outline:2px solid var(--accent);outline-offset:3px;border-radius:8px
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-analytics .reaction-chart-card{
 box-sizing:border-box;width:100%;margin:4px 0 0;padding:8px 0;
 border:0;background:transparent;box-shadow:none
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-analytics .reaction-chart-card[hidden]{display:none!important}
/* Colourwheel's five colour pairs are a primary recap, not advanced stats. */
body.float-ui .app-shell:not(.admin-mode) .page-colour .tg-game-results .tg-result-overview{max-width:560px}
body.float-ui .app-shell:not(.admin-mode) .page-colour .tg-game-results .tg-result-extra{width:100%;max-width:100%;min-width:0}
body.float-ui .app-shell:not(.admin-mode) .page-colour .tg-game-results .colour-round-summary{max-width:540px;width:100%;margin:12px auto 0}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .memory-guest-result{
 box-sizing:border-box;width:min(100%,440px);margin:4px auto 0;padding:8px 0;
 border:0!important;background:transparent!important;box-shadow:none!important;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .memory-guest-result>label{
 font-size:13px;font-weight:750;line-height:1.4;display:block;margin:0 0 10px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .memory-guest-result-controls{
 justify-content:center;flex-wrap:wrap;gap:10px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-guidance{display:none!important}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-account{
 box-sizing:border-box;width:min(100%,440px);margin:4px auto 0;padding:12px 8px 0;
 border:0;border-top:1px solid var(--line);background:none;text-align:center;
 display:flex;flex-direction:column;align-items:center;gap:8px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-account[hidden]{display:none!important}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-account>p{
 margin:0;color:var(--muted);font-size:12px;line-height:1.45;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-account-actions{
 display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-text-action{
 appearance:none;border:0;background:transparent;padding:7px 3px;color:var(--muted);
 font:inherit;font-size:11px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-account[data-compact="true"]{
 border:0;margin:0;padding:0;
}
/* Compact invitations reduce explanatory copy, not the CTA's affordance.
   Even returning guests should always see a readable gold sign-up button. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-game-actions{
 flex-wrap:wrap;gap:6px 12px;margin:4px 0 0;
}

@keyframes tg-completion-score-reveal{
 from{opacity:.25;transform:translateY(9px) scale(.966);filter:blur(4px)}
 to{opacity:1;transform:none;filter:blur(0)}
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results:not([hidden]) .tg-result-value{
 animation:tg-completion-score-reveal .52s cubic-bezier(.2,1,.3,1) .06s both;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results:not([hidden]) .tg-completion-account{
 animation:tg-result-details .4s ease-out .16s both;
}
@media(max-width:600px){
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-game-actions{
  gap:3px 9px;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-account{
  padding-top:10px;
 }
}
@media(prefers-reduced-motion:reduce){
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-result-value,
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-account{
  animation:none!important;
 }
}


/* The first completed guest run (and a fresh PB) earns a celebratory,
   accessible account invitation. Ordinary subsequent runs stay compact. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-account>.tg-completion-account-title{
 font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--text);line-height:1.35;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
 .tg-completion-account .tg-completion-account-cta{
 position:relative;isolation:isolate;overflow:visible;min-height:40px;
 padding:9px 19px;border:1px solid #f0c46e!important;border-radius:999px;
 background:linear-gradient(145deg,#f6d68e 0%,#e7b154 100%)!important;
 color:#2a2115!important;font-size:12px;font-weight:800!important;
 text-decoration:none!important;
 box-shadow:0 3px 10px rgba(0,0,0,.10),0 0 20px rgba(231,177,84,.17)!important;
 transition:transform .18s ease,box-shadow .18s ease;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
 .tg-completion-account .tg-completion-account-cta:hover{
 transform:translateY(-1px);
 box-shadow:0 5px 14px rgba(0,0,0,.13),0 0 26px rgba(231,177,84,.27)!important;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
 .tg-completion-account .tg-completion-account-cta:focus-visible{
 outline:2px solid var(--text);outline-offset:5px;
}
/* The guest invitation is usually compact after the first completed game.
   Keep the gold highlight on BOTH compact and expanded results. Use only
   widely supported background-position, opacity and scale animation; a
   rotated/masked border or an @property angle can disappear in some browsers. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
 .tg-completion-account .tg-completion-account-cta::before{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(105deg,transparent 24%,rgba(255,255,255,0) 39%,
  rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 61%,transparent 76%);
 background-size:260% 100%;background-position:100% 50%;
 clip-path:inset(0 round 999px);
 opacity:0;animation:tg-completion-cta-sheen 5.2s ease-in-out .5s infinite;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page
 .tg-completion-account .tg-completion-account-cta::after{
 content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
 border:2px solid #fff4cb;box-shadow:0 0 13px 2px rgba(255,202,105,.65);
 opacity:0;animation:tg-completion-cta-halo 5.2s ease-in-out .5s infinite;
}
@keyframes tg-completion-cta-sheen{
 0%,12%{background-position:100% 50%;opacity:0}
 19%{opacity:.9}
 34%{background-position:0% 50%;opacity:.9}
 43%,100%{background-position:0% 50%;opacity:0}
}
@keyframes tg-completion-cta-halo{
 0%,12%,45%,100%{opacity:0;transform:scale(1)}
 20%{opacity:.8;transform:scale(1)}
 30%{opacity:1;transform:scale(1.035)}
 45%{opacity:0;transform:scale(1.065)}
}
@media(prefers-reduced-motion:reduce){
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page
  .tg-completion-account .tg-completion-account-cta{transition:none}
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page
  .tg-completion-account .tg-completion-account-cta::before,
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page
  .tg-completion-account .tg-completion-account-cta::after{
  animation:none!important;opacity:0;transform:none;
 }
}

/* Completion identity is one semantic line: verified initials + editor.
   It belongs between saved-result feedback and the optional signup CTA. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-identity{
 display:flex;flex:0 0 auto;align-items:center;justify-content:center;
 gap:10px;width:min(100%,480px);min-width:0;margin:0 auto;
 font-size:12px;line-height:1.45;white-space:nowrap;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-identity[hidden],
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-edit[hidden]{
 display:none!important;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-confirmation{
 margin:0;padding:0;max-width:100%;min-width:0;color:var(--muted);font-size:12px;
 font-weight:600;line-height:1.45;white-space:nowrap;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-initials{
 color:var(--text);font-weight:800;
}
/* Paused-ranking feedback sits below the single-line score and initials editor.
   Long translations and narrow mobile screens can wrap without collisions. */
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-ranking-notice{
 box-sizing:border-box;width:min(100%,440px);min-width:0;max-width:100%;
 margin:-6px auto 0;padding:0 8px;color:var(--muted);
 font-size:11px;font-weight:550;line-height:1.5;text-align:center;
 white-space:normal;overflow-wrap:break-word;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-ranking-notice[hidden]{
 display:none!important;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-edit{
 display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
 font-size:12px;line-height:1.45;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-edit-separator{
 color:var(--muted);text-decoration:none;
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-completion-edit .tg-guest-edit-initials{
 padding:2px 0;font-size:12px;white-space:nowrap;
}
@media(max-width:390px){
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-results .tg-completion-identity{
  gap:6px;font-size:11px;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-results .tg-completion-edit .tg-guest-edit-initials,
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-confirmation{
  font-size:11px;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-edit{gap:6px}
}
body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-completion-confirmation[hidden]{
 display:none!important;
}


/* Mobile title motifs are part of the decorative panel background, not a
   foreground overlay. The banner has no visible height on phones, so the
   presentation API re-parents each motif to the panel at this breakpoint.
   Game content paints above it even when its artwork has transparent areas. */
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel{
  isolation:isolate;
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel > .float-title-emblem{
  display:grid!important;position:absolute!important;z-index:0!important;
  top:-97px!important;left:-126px!important;
  width:350px!important;height:350px!important;
  opacity:.07!important;pointer-events:none!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 38%,transparent 82%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 38%,transparent 82%);
 }
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .tg-game-panel > :not(.float-title-emblem){
  z-index:1;
 }
}