/* Tegazumi home showcase v1.
 * The Home route is for discovering/starting games. Player analytics,
 * detailed goals and competitive context stay on dedicated pages.
 * Card art always uses real shared game colours, not stock imagery.
 */
body.float-ui .app-shell:not(.admin-mode) .page-home{
 --tg-home-ink:#222629;
 --tg-home-panel:#1d2224;
 --tg-home-muted:#adb6b9;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .home-intro{
 display:block;padding:clamp(24px,4vh,42px) 2px clamp(21px,3.3vh,33px);
}
body.float-ui .app-shell:not(.admin-mode) .page-home .home-intro .eyebrow{
 margin:0 0 8px;font-size:10px;font-weight:700;letter-spacing:.15em;
 color:var(--muted);
}
body.float-ui .app-shell:not(.admin-mode) .page-home .home-intro h1{
 max-width:1000px;margin:0 0 6px;
 font-size:clamp(31px,3.8vw,53px);
 font-weight:760;line-height:1.07;letter-spacing:-.062em;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .home-intro>p:nth-of-type(2){
 font-size:clamp(13px,1.3vw,15px);
 color:var(--muted);margin:0;line-height:1.5;
}
/* A single large focal surface, intentionally deeper than the neutral cards. */
body.float-ui .app-shell:not(.admin-mode) .page-home .home-spotlight{
 --tg-hero-ink:#72cdb3;
 --tg-hero-wash:#1e3430;
 position:relative;isolation:isolate;overflow:hidden;
 display:grid;grid-template-columns:minmax(0,.90fr) minmax(0,1.10fr);
 min-height:clamp(285px,31vw,375px);
 border-radius:clamp(18px,2.4vw,27px);
 background:radial-gradient(ellipse at 80% 63%,
  color-mix(in srgb,var(--tg-hero-wash) 82%,#15181a) 0%,
  #222527 48%,#1a1d1f 100%);
 color:#fff;
 box-shadow:0 14px 30px #11182015;
}
.page-home .home-spotlight[data-game="cattiles"]{--tg-hero-ink:#ed9d7e;--tg-hero-wash:#44302d}
.page-home .home-spotlight[data-game="colour-memory"]{--tg-hero-ink:#cb9ada;--tg-hero-wash:#322a3b}
.page-home .home-spotlight[data-game="pitchline"]{--tg-hero-ink:#a99af3;--tg-hero-wash:#2c294b}
.page-home .home-spotlight[data-game="sideweave"]{--tg-hero-ink:#7ed3d1;--tg-hero-wash:#20403e}
.page-home .home-spotlight[data-game="sequence-memory"]{--tg-hero-ink:#8cc5ef;--tg-hero-wash:#24313e}
.page-home .home-spotlight[data-game="reaction-time"]{--tg-hero-ink:#9bdbb5;--tg-hero-wash:#243b35}
.page-home .home-spotlight[data-game="pinpoint"]{--tg-hero-ink:#79b5eb;--tg-hero-wash:#253640}
/* One semantic full-surface link rather than a clickable non-link section.
   The existing CTA remains independently focusable above this hit area. */
.page-home .home-spotlight{cursor:pointer}
.page-home .home-spotlight-hitarea{
 position:absolute;inset:0;z-index:1;display:block;border-radius:inherit;
 text-decoration:none;cursor:pointer
}
.page-home .home-spotlight-hitarea:focus-visible{
 outline:3px solid var(--tg-hero-ink);outline-offset:-5px
}
.home-spotlight-copy{
 position:relative;z-index:2;align-self:center;
 display:flex;flex-direction:column;align-items:flex-start;
 pointer-events:none;
 gap:0;padding:clamp(27px,4.2vw,58px);
 padding-right:12px;
}
.home-spotlight-eyebrow{
 margin:0;
 color:#cfdae0;font-size:10px;letter-spacing:.14em;font-weight:750;
}
/* Correction: explicit margin declaration rather than a variable token. */
.home-spotlight-copy>.home-spotlight-eyebrow{margin:0 0 24px}
.home-spotlight-title{display:flex;align-items:center;gap:15px;min-width:0}
.home-spotlight-title h2{
 margin:0;font-size:clamp(27px,3vw,45px);line-height:1.05;
 font-weight:770;letter-spacing:-.057em;color:#fff;
}
.home-spotlight-icon{
 --tg-icon-size:56px;--tg-icon-art-size:44px;
 display:inline-flex;align-items:center;justify-content:center;
 flex:none;width:56px;height:56px;border-radius:15px;
 background:color-mix(in srgb,var(--tg-hero-ink) 18%,#ffffff0d);
}
.home-spotlight-icon>.tg-game-icon{
 --tg-icon-size:43px;--tg-icon-art-size:35px;
 flex:none;transform:none;
}
.home-spotlight-copy>#home-spotlight-description{
 max-width:320px;margin:19px 0 22px;color:#cdd4d7;
 font-size:clamp(14px,1.45vw,17px);line-height:1.5;
}
.home-spotlight-button{
 position:relative;z-index:3;pointer-events:auto;
 display:inline-flex;align-items:center;justify-content:center;gap:17px;
 background:#fdfdfc;color:#1c2223;border-radius:999px;
 padding:12px 19px;text-decoration:none;
 font-size:13px;font-weight:740;min-height:43px;line-height:1;
 transition:background .16s ease,transform .16s ease;
}
.home-spotlight-button:hover,
.home-spotlight:hover .home-spotlight-button,
.home-spotlight:focus-within .home-spotlight-button{
 background:#e8edf0;transform:translateY(-1px)
}
.home-spotlight-button:focus-visible{outline:3px solid var(--tg-hero-ink);outline-offset:3px}
.home-spotlight-button span{font-size:17px}
.home-spotlight-visual{
 position:relative;min-width:0;min-height:0;height:100%;
 display:grid;place-items:center;
 overflow:hidden;pointer-events:none;
}
.home-spotlight-visual::before{
 content:"";position:absolute;inset:4% -10% 0 -8%;
 border-radius:50%;
 background:radial-gradient(circle,
  color-mix(in srgb,var(--tg-hero-ink) 21%,transparent),transparent 68%);
 opacity:.28;filter:blur(14px);
}
/* Pinpoint splash: three coloured bullseyes, directly on the same
   charcoal surface as every other game card. No nested arena or border. */
.tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-target{
 position:absolute;display:block;
 transform:translate(-50%,-50%);
 aspect-ratio:1;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,
  #fff 0 12%,
  color-mix(in srgb,var(--tg-pinpoint-target-colour) 45%,white) 13% 37%,
  var(--tg-pinpoint-target-colour) 38% 71%,
  color-mix(in srgb,var(--tg-pinpoint-target-colour) 82%,white) 72% 100%);
 border:2px solid color-mix(in srgb,var(--tg-pinpoint-target-colour) 70%,white);
 box-shadow:0 7px 22px #0005,0 0 20px color-mix(in srgb,var(--tg-pinpoint-target-colour) 20%,transparent);
}
.page-home .featured-grid .tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-target{
 box-shadow:0 5px 15px #0006,0 0 13px color-mix(in srgb,var(--tg-pinpoint-target-colour) 15%,transparent)
}
/* Equal visual hierarchy for the playable cards. */
body.float-ui .app-shell:not(.admin-mode) .page-home .home-main{
 display:block;max-width:none;margin:clamp(29px,4vw,45px) 0 0;padding:0;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .home-featured{padding:0;margin:0;border:0;box-shadow:none;background:none}
body.float-ui .app-shell:not(.admin-mode) .page-home .home-featured .section-header{
 display:flex;align-items:center;justify-content:flex-end;gap:20px;margin:0 0 19px;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .home-featured .section-header a{
 font-size:13px;font-weight:650;text-decoration:none;color:var(--muted);
}
body.float-ui .app-shell:not(.admin-mode) .page-home .home-featured .section-header a:hover{color:var(--text)}
body.float-ui .app-shell:not(.admin-mode) .page-home .home-featured .featured-grid{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 align-items:stretch;gap:26px clamp(13px,1.7vw,24px);
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card,
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card[data-game="sequence-memory"]{
 display:flex;flex-direction:column;width:100%;height:100%;min-width:0;
 padding:0;margin:0;background:transparent;border:0;border-radius:0;
 overflow:visible;box-shadow:none;text-decoration:none;
 transform:none;transition:none;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-art,
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card[data-game="sequence-memory"] .card-art{
 position:relative;
 height:auto;min-height:0;aspect-ratio:1.50;width:100%;flex:none;
 display:grid;place-items:center;overflow:hidden;
 border-radius:clamp(13px,1.4vw,19px);
 background:color-mix(in srgb,var(--game-tint,#e1f1e7) 66%,var(--surface));
 color:var(--game-art-ink);box-shadow:none;
 transition:background .18s ease,transform .22s cubic-bezier(.2,1,.3,1);
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card:hover .card-art,
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card:focus-visible .card-art{
 transform:translateY(-3px);
 background:color-mix(in srgb,var(--game-tint,#e1f1e7) 77%,var(--surface));
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-text,
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card[data-game="sequence-memory"] .card-text{
 padding:13px 2px 2px;flex:1;background:transparent;min-width:0;
 display:flex;flex-direction:column;gap:4px;color:var(--text);
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-heading{
 display:flex;align-items:center;justify-content:space-between;gap:9px;margin:0;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-heading h3{
 font-size:clamp(16px,1.7vw,20px);letter-spacing:-.035em;line-height:1.16;
 margin:0;color:var(--text);font-weight:750;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-arrow{
 opacity:.5;font-size:17px;color:var(--muted);transform:none;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-text>p{
 margin:0;font-size:12px;line-height:1.45;color:var(--muted);
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card:focus-visible{
 outline:2px solid var(--accent);outline-offset:5px;border-radius:14px;
}
/* Game art: same palettes, board classes and relative proportions everywhere.
   Container units let the art fill its slot without changing gameplay size. */
.tg-showcase-art{width:100%;height:100%;min-width:0;min-height:0;
 display:grid;place-items:center;position:relative;
 container-type:size;overflow:hidden;pointer-events:none;}
/* Artwork uses size containment for container-relative board units.
   In aspect-ratio cards, a normal-flow height:100% child can resolve against
   an indefinite height and collapse to zero. Anchor the art absolutely to
   the card's concrete aspect-ratio box; its container units are now definite. */
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-art>.tg-showcase-art{
 position:absolute;inset:0;
 width:100%;height:100%;min-width:0;min-height:0;
 display:grid;place-items:center;
}
.tg-showcase-cat-board{
 --cat-size:max(6px,min(66px,calc((100cqw - 40px)/4.25),
  calc((100cqh - 27px)/4.65)));
 display:grid;grid-template-columns:repeat(4,var(--cat-size));
 grid-template-rows:repeat(3,calc(var(--cat-size)*1.46));
 gap:clamp(3px,.9cqh,8px);padding:5px;
 transform:rotate(-7deg) scale(1.08);
 filter:drop-shadow(0 13px 16px #1014171d);
}
.tg-showcase-cat-stack{
 display:flex;flex-direction:column-reverse;justify-content:flex-start;gap:2px;
 width:var(--cat-size);height:calc(var(--cat-size)*1.46);
 background:#262a30;border:1px solid #353c42;border-radius:7px;
 padding:3px;box-sizing:border-box;overflow:hidden;
}
.tg-showcase-cat-tile{display:block;height:calc((100% - 6px)/4);flex:none;
 border-radius:3px;box-shadow:inset 0 -1px #00000018}
.tg-showcase-memory-board{
 width:min(74cqw,75cqh,245px);aspect-ratio:1;
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(5px,2cqh,12px);
 transform:rotate(-9deg);filter:drop-shadow(0 12px 12px #1014171e)
}
.tg-showcase-memory-tile{width:100%;height:100%;aspect-ratio:1;
 border-radius:17%;box-shadow:inset 0 -6px #0000000e}
.tg-showcase-art[data-game="sequence-memory"] .tg-showcase-memory-tile:first-child{
 animation:tg-showcase-flash 4s ease-in-out infinite;
}
.tg-showcase-art[data-game="sequence-memory"] .tg-showcase-memory-tile:nth-child(3){
 animation:tg-showcase-flash 4s ease-in-out -1.33s infinite;
}
.tg-showcase-art[data-game="sequence-memory"] .tg-showcase-memory-tile:nth-child(2){
 animation:tg-showcase-flash 4s ease-in-out -2.66s infinite;
}
@keyframes tg-showcase-flash{0%,20%,100%{filter:none}9%{filter:brightness(1.30) saturate(1.2);transform:scale(1.025)}}
.tg-showcase-art[data-game="sideweave"] .sw-board{
 width:min(78cqw,82cqh,270px);height:auto;aspect-ratio:1;
 transform:rotate(-7deg);overflow:visible;touch-action:none;
 filter:drop-shadow(0 10px 12px #11182016);
}
.tg-showcase-art .sw-arc{stroke:#8da4a4;stroke-width:2;fill:none}
.tg-showcase-art .sw-pip{fill:#4f9da2;stroke:none}
.tg-showcase-art .sw-letter text{fill:#1d4247;font-size:24px;font-weight:800}
.tg-showcase-art .sw-letter circle{fill:none}
.tg-showcase-art .tg-showcase-word-trace{
 fill:none;stroke:#47b5b9;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
 opacity:.65;stroke-dasharray:430;animation:tg-showcase-draw 7s ease-in-out infinite;
}
@keyframes tg-showcase-draw{
 0%,15%{stroke-dashoffset:430;opacity:.2}
 42%,75%{stroke-dashoffset:0;opacity:.8}
 96%,100%{stroke-dashoffset:430;opacity:.2}
}
.tg-showcase-colour-preview{
 display:grid;place-items:center;position:relative;
 width:min(86cqw,85cqh,278px);aspect-ratio:1;
}
.tg-showcase-wheel{
 width:100%!important;height:100%!important;aspect-ratio:1;
 border-radius:50%;border:0;box-shadow:0 12px 25px #15212a16;
 transform:rotate(-20deg);
}
.tg-showcase-colour-target{
 width:49%;height:49%;aspect-ratio:1;position:absolute;z-index:1;
 border:8px solid var(--surface);border-radius:21%;
 background:#6ea3e9;box-shadow:0 5px 17px #1118211e;transform:rotate(8deg);
}
.tg-showcase-sound{position:relative;width:min(88cqw,90cqh,330px);height:72%;
 display:grid;place-items:center}
.tg-showcase-wave{display:flex;align-items:center;justify-content:center;
 gap:clamp(3px,1.2cqw,8px);width:100%;height:82%}
.tg-showcase-wave-bar{width:clamp(4px,2cqw,11px);flex:none;
 border-radius:999px;background:#8f78ee;
 transform-origin:center;
 animation:tg-showcase-audio 3s ease-in-out infinite;
 animation-delay:calc(var(--wave-index) * -.11s);
}
.tg-showcase-wave-bar:nth-child(3n){background:#5cbedb}
@keyframes tg-showcase-audio{0%,100%{transform:scaleY(.90)}50%{transform:scaleY(1.12)}}
.tg-showcase-note{position:absolute;bottom:0;right:5%;font-weight:800;
 font-size:clamp(17px,4.5cqw,33px);letter-spacing:-.06em;color:#735fbe}
.tg-showcase-reaction-panel{
 width:min(72cqw,78cqh,244px);aspect-ratio:1;
 border-radius:18%;display:grid;place-items:center;
 background:var(--tg-reaction-green,#71d3ab);
 color:#183d34;font-weight:850;
 font-size:clamp(21px,5cqw,38px);letter-spacing:-.05em;
 transform:rotate(7deg);box-shadow:0 14px 20px #1526211c;
 animation:tg-showcase-react 5s steps(1,end) infinite;
}
@keyframes tg-showcase-react{
 0%,54%,100%{background:var(--tg-reaction-green,#71d3ab);color:#15392e}
 55%,76%{background:var(--tg-reaction-red,#ef6575);color:#421b26}
}
/* Hero art uses larger shapes and crops them invitingly inside the surface. */
.home-spotlight-visual>.tg-showcase-art{
 overflow:visible;transform:translate(4%,7%) scale(1.22);
}
.home-spotlight-visual .tg-showcase-cat-board{transform:rotate(-10deg) scale(1.15)}
.home-spotlight-visual .tg-showcase-memory-board{
 width:min(79cqw,82cqh,360px);transform:rotate(-10deg) scale(1.04)}
.home-spotlight-visual .tg-showcase-art[data-game="sideweave"] .sw-board{
 width:min(84cqw,91cqh,380px);filter:drop-shadow(0 15px 24px #0003)}
.home-spotlight-visual .tg-showcase-art .sw-arc{stroke:#acbdc0}
.home-spotlight-visual .tg-showcase-art .sw-pip{fill:#7fd1d5}
.home-spotlight-visual .tg-showcase-art .sw-letter text{fill:#e8fbff}
.home-spotlight-visual .tg-showcase-art .tg-showcase-word-trace{stroke:#8fdce0}
.home-spotlight-visual .tg-showcase-colour-target{border-color:#262b30}
.home-spotlight-visual .tg-showcase-colour-preview{width:min(85cqw,90cqh,365px)}
.home-spotlight-visual .tg-showcase-wave-bar{background:#9d8bff}
.home-spotlight-visual .tg-showcase-note{color:#d0c8ff}
.home-spotlight-visual .tg-showcase-reaction-panel{width:min(75cqw,78cqh,330px)}
/* A quiet completion strip, no goal picker, checklist or miniature dashboard. */
body.float-ui .app-shell:not(.admin-mode) .page-home .home-daily{
 display:grid;gap:11px;min-width:0;
 border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;
 background:transparent;margin:clamp(31px,5vw,54px) 0 0;padding:19px 0 12px;
}
.page-home .home-daily-header{
 display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.page-home .home-daily-header h2{
 font-size:16px;font-weight:760;letter-spacing:-.025em;margin:0 0 3px;
}
.page-home .home-daily-message{
 margin:0;font-size:12px;line-height:1.35;color:var(--muted);
}
.page-home .home-daily-stats-link{
 color:var(--muted);font-size:12px;font-weight:650;text-decoration:none;white-space:nowrap;
}
.page-home .home-daily-stats-link:hover{color:var(--text)}
.page-home .home-daily-progress{
 display:grid;grid-template-columns:auto minmax(0,1fr) auto;
 align-items:center;gap:16px;min-width:0;
}
.page-home .home-daily-count{
 font-size:16px;min-width:46px;letter-spacing:-.03em;font-weight:750;
 color:var(--text);font-variant-numeric:tabular-nums;
}
.page-home .home-daily-track{
 height:6px;width:100%;border-radius:99px;background:var(--surface-soft);
 overflow:hidden;
}
.page-home .home-daily-fill{height:100%;border-radius:99px;background:#72bc9d}
.page-home .home-daily-next{
 display:inline-flex;align-items:center;gap:12px;
 border:1px solid var(--line);border-radius:999px;
 background:transparent;color:var(--text);
 padding:8px 13px;font-size:12px;font-weight:680;white-space:nowrap;
 min-height:34px;text-decoration:none;
}
.page-home .home-daily-next:hover{background:var(--surface-soft)}
.page-home .home-daily-next[hidden]{display:none!important}
/* Goal preferences belong in My Stats, not on the landing page. */
.stats-daily-goal{
 display:flex;align-items:center;flex-wrap:wrap;gap:10px;
 font-size:12px;color:var(--muted);margin:0 0 22px;
}
.stats-daily-goal label{font-size:12px;font-weight:750;color:var(--text)}
.stats-daily-goal select{
 color:var(--text);background:var(--surface);
 border:1px solid var(--line);border-radius:9px;
 padding:8px 26px 8px 10px;font:inherit;font-weight:700;min-height:35px;
}
.stats-daily-goal span{line-height:1.4}
@media(max-width:900px){
 body.float-ui .app-shell:not(.admin-mode) .page-home .home-spotlight{
  grid-template-columns:1fr 1fr;min-height:315px;
 }
 .home-spotlight-copy{padding:clamp(23px,4vw,36px)}
 body.float-ui .app-shell:not(.admin-mode) .page-home .home-featured .featured-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 16px;
 }
}
@media(max-width:600px){
 body.float-ui .app-shell:not(.admin-mode) .page-home .home-intro{padding:26px 0 22px}
 body.float-ui .app-shell:not(.admin-mode) .page-home .home-intro h1{
  font-size:clamp(31px,7vw,43px)
 }
 body.float-ui .app-shell:not(.admin-mode) .page-home .home-spotlight{
  grid-template-columns:1fr;grid-template-rows:auto minmax(190px,1fr);
  min-height:490px;max-height:580px;border-radius:19px;
 }
 .home-spotlight-copy{padding:27px 25px 10px}
 .home-spotlight-copy>.home-spotlight-eyebrow{margin-bottom:17px}
 .home-spotlight-title{gap:10px}
 .home-spotlight-title h2{font-size:clamp(27px,6.5vw,35px)}
 .home-spotlight-icon{width:45px;height:45px;border-radius:12px}
 .home-spotlight-icon>.tg-game-icon{--tg-icon-size:36px;--tg-icon-art-size:29px}
 .home-spotlight-copy>#home-spotlight-description{margin:11px 0 14px;font-size:14px}
 .home-spotlight-button{min-height:38px;padding:10px 17px}
 .home-spotlight-visual{height:100%;min-height:200px}
 .home-spotlight-visual>.tg-showcase-art{transform:translate(0,3%) scale(1.07)}
 body.float-ui .app-shell:not(.admin-mode) .page-home .home-main{margin-top:29px}
 body.float-ui .app-shell:not(.admin-mode) .page-home .home-featured .featured-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;
 }
 body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-heading h3{
  font-size:16px;
 }
 body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-text>p{
  font-size:11px;
 }
 .page-home .home-daily-progress{grid-template-columns:50px minmax(0,1fr);row-gap:12px}
 .page-home .home-daily-next{grid-column:2;justify-self:end}
}
@media(max-width:355px){
 body.float-ui .app-shell:not(.admin-mode) .page-home .home-featured .featured-grid{
  grid-template-columns:1fr;
 }
}
@media(prefers-reduced-motion:reduce){
 .page-home .tg-showcase-art *,
 .page-home .tg-showcase-art *::before,
 .page-home .tg-showcase-art *::after{
  animation:none!important;transition:none!important;
 }
 .page-home .game-catalog-card .card-art,
 .page-home .home-spotlight-button{transition:none!important}
}

/* Home showcase v2 - one premium near-black card language.
   Titles and descriptions live ON the art, like the featured hero.
   Game-specific pigments remain confined to illustration and subtle light. */
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card,
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card[data-game="sequence-memory"]{
 position:relative;isolation:isolate;border-radius:19px;overflow:hidden;
 background:#1b1e20;
 box-shadow:0 9px 25px #0c12171a;
 transition:box-shadow .2s ease,transform .2s ease;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card:hover,
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card:focus-visible{
 box-shadow:0 15px 32px #07101128;
 transform:translateY(-2px);
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-art,
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card[data-game="sequence-memory"] .card-art{
 width:100%;aspect-ratio:1.36;min-height:0;height:auto;
 border-radius:19px;overflow:hidden;
 background:radial-gradient(ellipse at 65% 38%,
  color-mix(in srgb,var(--game-ink,#48545c) 18%,#22272a) 0%,
  #222628 48%,#191c1e 100%);
 color:#f5f7f7;box-shadow:none;
 transition:none;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card:hover .card-art,
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card:focus-visible .card-art{
 transform:none;background:radial-gradient(ellipse at 65% 38%,
  color-mix(in srgb,var(--game-ink,#48545c) 21%,#23282b) 0%,
  #24282a 48%,#1c2022 100%);
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-text,
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card[data-game="sequence-memory"] .card-text{
 position:absolute;left:0;right:0;bottom:0;z-index:4;
 min-width:0;width:100%;height:auto;max-height:50%;
 display:flex;flex-direction:column;gap:5px;
 padding:49px clamp(15px,1.9vw,24px) 20px;
 box-sizing:border-box;pointer-events:none;
 background:linear-gradient(to bottom,transparent 0%,#181b1de6 40%,#181b1d 82%);
 color:#f7f9f8;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-heading{
 gap:10px;min-height:24px;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-heading h3{
 font-size:clamp(17px,1.85vw,22px);color:#f7f9f8;
 letter-spacing:-.045em;line-height:1.2;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-text>p{
 font-size:clamp(11px,1vw,12px);color:#c5cdd0;line-height:1.4;
 margin:0;white-space:normal;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-arrow{
 color:#f5f7f8;opacity:0;transform:translate(-4px,3px);
 transition:opacity .16s,transform .16s;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card:is(:hover,:focus-visible) .card-arrow{
 opacity:1;transform:translate(0,0);
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-art>.tg-showcase-art{
 position:absolute;inset:0;width:100%;height:100%;
 display:grid;place-items:center;
 transform:translateY(-9%) scale(.90);
 transform-origin:50% 38%;
 transition:transform .35s ease;
}
body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card:is(:hover,:focus-visible) .card-art>.tg-showcase-art{
 transform:translateY(-11%) scale(.93);
}
/* Each small artwork is a single static frame until hover or keyboard focus.
   The featured hero continues to animate independently. */
.page-home .featured-grid .tg-showcase-art *,
.page-home .featured-grid .tg-showcase-art *::before,
.page-home .featured-grid .tg-showcase-art *::after{
 animation-play-state:paused!important;
}
.page-home .featured-grid .game-catalog-card:is(:hover,:focus-visible) .tg-showcase-art *,
.page-home .featured-grid .game-catalog-card:is(:hover,:focus-visible) .tg-showcase-art *::before,
.page-home .featured-grid .game-catalog-card:is(:hover,:focus-visible) .tg-showcase-art *::after{
 animation-play-state:running!important;
}
.page-home .featured-grid .tg-showcase-memory-board{
 width:min(73cqw,73cqh,232px);
 filter:drop-shadow(0 14px 16px #070b1140);
}
.page-home .featured-grid .tg-showcase-cat-board{
 transform:rotate(-9deg) scale(.93);
 filter:drop-shadow(0 12px 15px #05080b55);
}
.page-home .featured-grid .tg-showcase-art[data-game="colour-memory"] .tg-showcase-wheel{
 width:min(67cqw,69cqh,240px)!important;
 height:auto!important;aspect-ratio:1;
 background:var(--tg-colour-wheel-stops)!important;
 border:0;box-shadow:0 8px 20px #07080c66;
 transform:rotate(-15deg);
}
.page-home .home-spotlight-visual .tg-showcase-art[data-game="colour-memory"] .tg-showcase-wheel{
 width:min(83cqw,85cqh,350px)!important;
 height:auto!important;aspect-ratio:1;
 border-radius:50%;
 box-shadow:0 16px 24px #090c125c;
}
.page-home .tg-showcase-colour-target{display:none!important}
/* Home's decorative colour wheel always has the same near-black centre
   seen in dark mode, regardless of the user's selected site theme.
   Keep the real Colour Memory controls and shared wheel API unchanged. */
.page-home .tg-showcase-art[data-game="colour-memory"] .tg-shared-colour-wheel::after{
 background:#1b1e20!important;
}

/* Reuse Sideweave's actual curved SVG renderer AND its tutorial painter.
   The game side controls all twelve letter positions and pip coordinates. */
.page-home .tg-showcase-sideweave .sw-board{
 display:block;min-width:0;flex:none;
 width:min(72cqw,72cqh,265px);height:auto;max-width:100%;max-height:100%;
 aspect-ratio:1;overflow:visible;
 transform:rotate(-11deg);
 filter:drop-shadow(0 13px 17px #03080a35);
 pointer-events:none;
}
.page-home .tg-showcase-sideweave .sw-arc{
 fill:none;stroke:#67898b;stroke-width:2;stroke-linecap:butt;
}
.page-home .tg-showcase-sideweave .sw-pip{
 fill:#86c8ce;stroke:none;
}
.page-home .tg-showcase-sideweave .sw-letter circle{
 fill:transparent;stroke:transparent;
}
.page-home .tg-showcase-sideweave .sw-letter text{
 fill:#e3edef;font-family:inherit;font-size:22px;font-weight:690;
 text-anchor:middle;dominant-baseline:middle;stroke:none;
 paint-order:normal;text-shadow:none;filter:none;
}
.page-home .tg-showcase-sideweave .sw-letter.used:not(.active) text{fill:#b1cdcc}
.page-home .tg-showcase-sideweave .sw-letter.active text{fill:#9fe5e4;font-weight:830}
.page-home .tg-showcase-sideweave .sw-pip.used:not(.active){fill:#98c7ca}
.page-home .tg-showcase-sideweave .sw-pip.active{fill:#a3e7e7}
.page-home .tg-showcase-sideweave .sw-path{
 fill:none;stroke:#78c6c8;stroke-width:3.4;
 stroke-linecap:round;stroke-linejoin:round;opacity:.82;
}
.page-home .tg-showcase-sideweave .sw-path.tg-help-completed-path{
 stroke:#93acaf;stroke-width:2.5;opacity:.55;
}
.page-home .tg-showcase-sideweave .tg-help-word-bank{
 position:absolute;bottom:33%;left:0;right:0;
 display:flex;gap:7px;justify-content:center;align-items:center;
 color:#e1f2f1;font-size:11px;font-weight:750;
}
.page-home .featured-grid .tg-showcase-sideweave .tg-help-word-bank{bottom:32%}
.page-home .home-spotlight-visual .tg-showcase-sideweave .sw-board{
 width:min(83cqw,89cqh,350px);
 transform:rotate(-11deg);filter:drop-shadow(0 16px 20px #050a0d45);
}
.page-home .home-spotlight-visual .tg-showcase-sideweave .tg-help-word-bank{bottom:9%}
/* Pitchline reproduces the actual vertical, layered canvas wave and
   horizontal pitch marker: no decorative equaliser bars or fake notes. */
.tg-showcase-pitch-stage{
 position:relative;display:block;isolation:isolate;
 width:min(83cqw,81cqh,290px);height:min(83cqh,240px);
 overflow:hidden;
}
.tg-showcase-pitch-canvas{position:absolute;inset:0;width:100%;height:100%}
.tg-showcase-pitch-marker{
 position:absolute;top:51%;left:11%;width:78%;
 height:0;border-top:1.5px solid #69cdcc;
 box-shadow:0 0 8px #74d6df72;
 transition:top .24s ease;
}
.tg-showcase-pitch-marker::before{
 content:"";position:absolute;top:-5px;left:-1px;
 width:9px;height:9px;border-radius:50%;
 background:#9ce3e3;box-shadow:0 0 7px #a8e4e3;
}
.tg-showcase-pitch-frequency{
 position:absolute;right:12%;top:16%;
 font-weight:750;font-size:clamp(17px,3.8cqw,26px);
 letter-spacing:-.035em;color:#dbd2ff;
}
.tg-showcase-pitch-frequency small{
 color:#8bbfc2;font-weight:550;font-size:.57em;letter-spacing:0;
}
.page-home .home-spotlight-visual .tg-showcase-pitch-stage{
 width:min(81cqw,85cqh,350px);height:min(95cqh,338px);
}
.page-home .featured-grid .tg-showcase-art[data-game="reaction-time"] .tg-showcase-reaction-panel{
 width:min(61cqw,65cqh,210px);
 box-shadow:0 13px 22px #02090659;
}
/* Do not let a green panel say TAP until it changes to the red state. */
.page-home .tg-showcase-reaction-panel:empty::after{
 content:"";font-size:0;
}
@media(max-width:630px){
 body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-text,
 body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card[data-game="sequence-memory"] .card-text{
  padding:37px 12px 14px;gap:3px;max-height:62%;
 }
 body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-heading h3{
  font-size:15px;
 }
 body.float-ui .app-shell:not(.admin-mode) .page-home .featured-grid .game-catalog-card .card-text>p{
  font-size:10px;line-height:1.3;
 }
 .page-home .featured-grid .tg-showcase-sideweave .tg-help-word-bank{display:none}
}
@media(prefers-reduced-motion:reduce){
 .page-home .featured-grid .tg-showcase-art *,
 .page-home .featured-grid .tg-showcase-art *::before,
 .page-home .featured-grid .tg-showcase-art *::after{
  animation:none!important;transition:none!important;
 }
}

/* Bit & library refresh: restrained profile strip with separate destinations. */
.page-home .tg-home-bit-strip{
 display:grid;grid-template-columns:minmax(0,1.75fr) minmax(165px,.65fr);
 width:100%;box-sizing:border-box;overflow:hidden;
 margin-top:25px;margin-bottom:1px;min-height:91px;
 background:linear-gradient(110deg,var(--surface),var(--surface-soft));
 border:1px solid var(--line);border-radius:17px;
}
.page-home .tg-home-bit-strip[hidden]{display:none!important}
.page-home .tg-home-bit-strip>a{color:var(--text);text-decoration:none;
 display:flex;min-width:0;align-items:center;transition:background .2s}
.page-home .tg-home-bit-strip>a:hover,.page-home .tg-home-bit-strip>a:focus-visible{
 background:color-mix(in srgb,var(--text) 5%,transparent)}
.page-home .tg-home-bit-identity{gap:15px;padding:12px 21px}
.page-home .tg-home-bit-strip .tg-bit-shortcut-host{
 width:60px;height:60px;flex:none;display:grid;place-items:center
}
.page-home .tg-home-bit-strip .tg-bit-shortcut-host .tg-bit-avatar{
 width:60px;height:60px;border:0!important;background:transparent!important
}
.page-home .tg-home-bit-intro{display:flex;min-width:0;flex-direction:column;gap:3px}
.page-home .tg-home-bit-intro>small,.page-home .tg-home-bit-progress>small{
 font-size:10px;font-weight:760;letter-spacing:.12em;color:var(--muted);
}
.page-home .tg-home-bit-intro strong{
 font-size:17px;font-weight:790;letter-spacing:-.025em;
 text-overflow:ellipsis;white-space:nowrap;overflow:hidden
}
.page-home .tg-home-bit-intro>small:last-child{font-size:11px;letter-spacing:0;font-weight:520}
.page-home .tg-home-bit-arrow{color:var(--muted);margin-left:auto;font-size:16px}
.page-home .tg-home-bit-progress{
 padding:12px 22px;border-left:1px solid var(--line);
 flex-direction:column;align-items:flex-start!important;justify-content:center;gap:3px;
}
.page-home .tg-home-bit-progress>strong{font-size:19px;line-height:1.2;font-variant-numeric:tabular-nums}
.page-home .tg-home-bit-progress>span{font-size:11px;color:var(--muted);font-weight:660}

/* More legible game art: depth from the composition, not multiple frames. */
.tg-showcase-oddlings::before{
 content:"";position:absolute;left:11%;right:11%;bottom:16%;height:19%;
 border-radius:50%;background:radial-gradient(ellipse,#91aabd25,transparent 68%);
}
.tg-showcase-oddlings .od-showcase-canvas{
 display:block;width:min(91cqw,92cqh,405px);height:auto;max-width:100%;
 transform:translateY(-6%) rotate(-5deg);
 filter:drop-shadow(0 16px 13px #0008)
}
.tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-target{
 box-shadow:0 5px 14px #0007,0 0 0 6px color-mix(in srgb,var(--tg-pinpoint-target-colour) 8%,transparent),
 0 0 23px color-mix(in srgb,var(--tg-pinpoint-target-colour) 19%,transparent)!important
}
.tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-target:nth-child(2){
 transform:translate(-50%,-50%) rotate(-8deg) scale(.86)
}
.tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-target:nth-child(3){
 transform:translate(-50%,-50%) scale(.92)
}
.tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-aim{
 position:absolute;left:51%;top:48%;width:24%;aspect-ratio:1;
 border:2px solid #f5f7f8c9;border-radius:50%;
 box-shadow:0 0 0 2px #19232cb5,0 0 18px #9fd2ff24;
 transform:translate(-50%,-50%);pointer-events:none
}
.tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-aim::before,
.tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-aim::after{
 content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
 background:#fff;border-radius:1px
}
.tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-aim::before{width:3px;height:135%}
.tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-aim::after{width:135%;height:3px}
.tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-aim{opacity:.84}
/* Tilt Reaction Time in the SAME direction as Cattiles and Sequence Memory. */
.page-home .featured-grid .tg-showcase-art[data-game="reaction-time"] .tg-showcase-reaction-panel,
.page[data-page="games"] .tg-showcase-art[data-game="reaction-time"] .tg-showcase-reaction-panel{
 transform:rotate(-8deg);filter:drop-shadow(0 13px 15px #030f0a4d)
}

/* New Bitnode scene uses the canonical player Bit, with small hostile nodes. */
.tg-showcase-bit-stage{
 position:relative;display:grid;place-items:center;
 width:min(90cqw,330px);height:min(84cqh,265px);
 background:radial-gradient(circle at center,#35527329 0%,transparent 74%);
}
.tg-showcase-bit-stage::before{
 content:"";position:absolute;inset:5%;opacity:.28;
 background-image:linear-gradient(#6780a222 1px,transparent 1px),
  linear-gradient(90deg,#6780a222 1px,transparent 1px);
 background-size:17px 17px;transform:perspective(350px) rotateX(14deg)
}
.tg-showcase-bit-stage>.tg-showcase-bit-hero{
 position:relative;z-index:2;width:min(41cqw,112px);height:min(41cqw,112px);
 background:transparent!important;border:0!important;
 filter:drop-shadow(0 8px 13px #04091271)
}
.tg-showcase-bit-stage .tg-showcase-bit-hero svg{width:100%!important;height:100%!important}
.tg-showcase-bit-foe{
 position:absolute;width:13px;height:13px;z-index:1;
 background:#d75476;border:3px solid #792b45;
 box-shadow:0 0 0 3px #451b2a36;transform:rotate(15deg)
}
.tg-showcase-bit-foe[style*="0"]{left:13%;top:20%}
.tg-showcase-bit-foe[style*="1"]{right:10%;top:22%;transform:rotate(-8deg)}
.tg-showcase-bit-foe[style*="2"]{left:22%;bottom:25%;width:18px;height:18px}
.tg-showcase-bit-foe[style*="3"]{right:19%;bottom:20%;width:10px;height:10px}
.tg-showcase-bit-hud{position:absolute;bottom:2%;left:10%;z-index:3;
 font:800 11px ui-monospace,monospace;letter-spacing:.06em;color:#a4d8f0}
.page-home .home-spotlight[data-game="bitnode"]{--tg-hero-ink:#89c7f4;--tg-hero-wash:#202b41}

/* All Games: precisely the Home cards' art + copy treatment, compact. */
body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
 gap:16px;margin:15px 0 28px;align-items:stretch
}
body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .game-catalog-card{
 position:relative;display:block;width:100%;min-width:0;margin:0;
 height:auto;aspect-ratio:1.25;padding:0;border:0;border-radius:16px;
 overflow:hidden;background:#1b1e20;box-shadow:0 7px 18px #0c12171b;
 text-decoration:none;transition:transform .2s,box-shadow .2s
}
body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .game-catalog-card:is(:hover,:focus-visible){
 transform:translateY(-2px);box-shadow:0 12px 23px #0c12172d
}
body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .card-art{
 position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
 overflow:hidden;border-radius:inherit;background:radial-gradient(ellipse at 65% 38%,
 color-mix(in srgb,var(--game-ink,#48545c) 18%,#22272a) 0%,#222628 48%,#191c1e 100%);
}
body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .card-art>.tg-showcase-art{
 position:absolute;inset:0;width:100%;height:100%;
 transform:translateY(-8%) scale(.83);transition:transform .3s
}
body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .game-catalog-card:is(:hover,:focus-visible) .card-art>.tg-showcase-art{
 transform:translateY(-10%) scale(.88)
}
body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .card-text{
 position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;
 flex-direction:column;gap:4px;min-width:0;width:100%;height:auto;
 padding:37px 14px 13px;background:linear-gradient(to bottom,transparent,#181b1df0 53%,#181b1d);
 box-sizing:border-box;color:#f7f9f8;pointer-events:none
}
body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .card-heading h3{
 color:#f7f9f8;font-size:clamp(13px,1.3vw,17px);letter-spacing:-.035em;line-height:1.2
}
body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .card-text p{
 color:#c9cfd0;font-size:10px;line-height:1.35;margin:0;
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
}
body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .card-arrow{
 color:#fff;opacity:0;transition:opacity .16s
}
body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .game-catalog-card:hover .card-arrow{opacity:1}
.page[data-page="games"] .library-grid .game-catalog-card[data-status="Concept"] .card-text::before{
 content:"COMING SOON";color:#e0be8e;font-weight:730;font-size:9px;letter-spacing:.09em
}
.page[data-page="games"] .library-grid .tg-showcase-art *{
 animation-play-state:paused!important
}
.page[data-page="games"] .library-grid .game-catalog-card:is(:hover,:focus-visible) .tg-showcase-art *{
 animation-play-state:running!important
}
/* Only the Bitnode sidebar illustration grows. Shared icon cell stays 24px. */
.sidebar .sidebar-game-list .side-nav a[data-game="bitnode"]>.tg-game-icon svg{
 width:calc(var(--tg-icon-art-size,19px) * 1.35)!important;
 height:calc(var(--tg-icon-art-size,19px) * 1.35)!important;
 max-width:none!important;max-height:none!important;
}
@media(max-width:1100px){
 body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid{
 grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
 .page-home .tg-home-bit-strip{grid-template-columns:minmax(0,1.4fr) minmax(105px,.65fr)}
 .page-home .tg-home-bit-identity{padding:10px 12px;gap:10px}
 .page-home .tg-home-bit-strip .tg-bit-shortcut-host,
 .page-home .tg-home-bit-strip .tg-bit-shortcut-host .tg-bit-avatar{width:45px;height:45px}
 .page-home .tg-home-bit-intro strong{font-size:14px}
 .page-home .tg-home-bit-progress{padding:10px 12px}
 body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid{
 grid-template-columns:repeat(2,minmax(0,1fr));gap:10px
 }
}
@media(max-width:420px){
 body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .card-text{
 padding:26px 10px 10px
 }
 body.float-ui .app-shell:not(.admin-mode) .page[data-page="games"] .library-grid .card-text p{display:none}
}
@media(prefers-reduced-motion:reduce){
 .page[data-page="games"] .library-grid .tg-showcase-art *{animation:none!important}
}

/* 30/70 identity and verified stat tiles in one shared Home ribbon. */
.page-home .tg-home-bit-strip{grid-template-columns:minmax(0,30fr) minmax(0,70fr)}
.page-home .tg-home-bit-identity{padding:12px 14px;gap:10px}
.page-home .tg-home-bit-progress{
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));
 padding:0;gap:0;border-left:1px solid var(--line);min-width:0;align-items:stretch!important
}
.page-home .tg-home-bit-metric{display:flex;flex-direction:column;justify-content:center;gap:4px;
 padding:12px clamp(10px,1.6vw,21px);color:var(--text);text-decoration:none;min-width:0}
.page-home .tg-home-bit-metric+.tg-home-bit-metric{border-left:1px solid var(--line)}
.page-home .tg-home-bit-metric:is(:hover,:focus-visible){
 background:color-mix(in srgb,var(--text) 5%,transparent)}
.page-home .tg-home-bit-metric small{font-size:10px;font-weight:750;
 letter-spacing:.09em;color:var(--muted)}
.page-home .tg-home-bit-metric strong{font-size:clamp(17px,2.15vw,26px);font-weight:790;
 letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.page-home .tg-home-bit-metric>span{font-size:11px;color:var(--muted)}
.tg-showcase-bit-stage{transform:rotate(-7deg) scale(1.09);transform-origin:center 45%}
.tg-showcase-oddlings .od-showcase-canvas{transform:translateY(-6%) rotate(-5deg) scale(1.09)}
.tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-aim{width:15%;border-width:1.5px}
@media(max-width:700px){
 .page-home .tg-home-bit-strip{grid-template-columns:minmax(0,30fr) minmax(0,70fr)}
 .page-home .tg-home-bit-identity{padding:10px 8px;gap:7px}
 .page-home .tg-home-bit-intro>small:last-child,.page-home .tg-home-bit-arrow{display:none}
 .page-home .tg-home-bit-metric{padding:10px 6px}
 .page-home .tg-home-bit-metric small{font-size:8px;letter-spacing:0}
 .page-home .tg-home-bit-metric strong{font-size:15px}
 .page-home .tg-home-bit-metric>span{display:none}
}
@media(max-width:440px){
 .page-home .tg-home-bit-strip .tg-bit-shortcut-host,
 .page-home .tg-home-bit-strip .tg-bit-shortcut-host .tg-bit-avatar{width:32px;height:32px}
 .page-home .tg-home-bit-identity{gap:5px}
 .page-home .tg-home-bit-metric strong{font-size:13px}
 .page-home .tg-home-bit-intro strong{font-size:12px}
 .page-home .tg-home-bit-metric small{font-size:7.5px}
}

/* The canonical Bitnode sprite scales with the shared icon component.
 * Sidebar retains its separately requested +35% artwork treatment. */
.tg-game-icon[data-game="bitnode"]>svg{
 display:block;width:var(--tg-icon-art-size);height:var(--tg-icon-art-size);
 max-width:none;max-height:none;flex:none;shape-rendering:crispEdges
}

/* Bitnode navigation: exact user-supplied sprite, not the generic Bit SVG.
   Preserve its hard 40×40 pixel grid, natural proportions and transparency. */
.tg-game-icon[data-game="bitnode"] .tg-bitnode-nav-pixel{
 display:block!important;width:20px!important;height:20px!important;
 max-width:none!important;max-height:none!important;
 object-fit:contain;image-rendering:pixelated;
 image-rendering:crisp-edges;transform:none!important;
 filter:none!important;flex:none;pointer-events:none
}
.sidebar .sidebar-game-list .side-nav a[data-game="bitnode"]>.tg-game-icon img{
 width:20px!important;height:20px!important
}

/* Home art receives the same slight anti-clockwise lean across game cards. */
.page-home .tg-showcase-art[data-game="pitchline"] .tg-showcase-pitch-stage{
 transform:rotate(-7deg) scale(1.035);transform-origin:50% 50%
}
.page-home .tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-stage{
 position:absolute;inset:0;transform:rotate(-7deg);transform-origin:50% 50%
}

/* Homepage-only artwork: Grouplet and Kata share the same large visual
   footprint as the other cards. Their actual game/sidebar icons are unchanged. */
.page-home .featured-grid .tg-showcase-art[data-game="grouplet"] > .tg-game-icon,
.page-home .featured-grid .tg-showcase-art[data-game="katana-kata"] > .tg-game-icon{
 --tg-icon-size:min(72cqw,77cqh,270px);
 --tg-icon-art-size:calc(var(--tg-icon-size) * .90);
 transform:rotate(-9deg);
 filter:drop-shadow(0 13px 17px #05080b40);
}
.page-home .home-spotlight-visual .tg-showcase-art[data-game="grouplet"] > .tg-game-icon,
.page-home .home-spotlight-visual .tg-showcase-art[data-game="katana-kata"] > .tg-game-icon{
 --tg-icon-size:min(85cqw,90cqh,350px);
 --tg-icon-art-size:calc(var(--tg-icon-size) * .9);
 transform:rotate(-9deg);
}


/* Memory duo homepage artwork: keep the established charcoal showcase cards,
   while preserving the games' own saturated numerals and editable shape motifs. */
.tg-showcase-art[data-game="number-memory"] .nm-preview,
.tg-showcase-art[data-game="shape-memory"] .sm-preview{
 position:absolute;inset:0;width:100%;height:100%;min-height:0;
 margin:0;padding:12px;box-sizing:border-box;overflow:hidden;
 background:transparent;border:0;border-radius:0;box-shadow:none
}
.tg-showcase-art[data-game="number-memory"] .nm-preview{
 gap:8px;justify-content:center;color:#f0f3ff
}
.tg-showcase-art[data-game="number-memory"] .nm-preview-number{
 font-size:clamp(26px,4vw,56px);letter-spacing:.07em;text-shadow:0 4px 28px rgba(101,148,240,.25)
}
.tg-showcase-art[data-game="number-memory"] .nm-preview-caption{
 color:#aabce2;font-size:clamp(7px,.78vw,10px)
}
.tg-showcase-art[data-game="shape-memory"] .sm-preview .sm-board{
 width:min(85%,245px);aspect-ratio:1;background:transparent;border:0;border-radius:0;box-shadow:none
}
.tg-showcase-art[data-game="shape-memory"] .sm-board::before{display:none}

/* Home preview shares Shape Memory's smooth, scalable vector heart. */
.tg-showcase-art[data-game="shape-memory"] .sm-object-ink.sm-heart-vector{
 clip-path:none!important;background:transparent!important;
 color:var(--sm-ink,#9b8ae9);
}
.tg-showcase-art[data-game="shape-memory"] .sm-heart-vector svg{
 display:block;width:100%;height:100%;fill:currentColor;stroke:none;
 shape-rendering:geometricPrecision;pointer-events:none;
}

/* The Timescape card uses the actual game's Silk Current line geometry.
   Remove the nested preview frame, border and hard-edged gradient entirely. */
.page-home .tg-showcase-art[data-game="timescape"] .tg-showcase-silk{
 position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
 background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;overflow:hidden;display:block
}
.page-home .tg-showcase-art[data-game="timescape"] .tg-showcase-silk::before{
 content:"";position:absolute;inset:-12%;
 background:radial-gradient(ellipse 65% 52% at 47% 48%,#59bdbf21 0%,#78a8ec0c 49%,transparent 77%);
 pointer-events:none
}
.page-home .tg-showcase-art[data-game="timescape"] .tg-showcase-silk-canvas{
 display:block;position:absolute;inset:0;width:100%;height:100%;
 background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;
 mask-image:radial-gradient(ellipse 72% 75% at 50% 48%,#000 52%,transparent 100%);
 -webkit-mask-image:radial-gradient(ellipse 72% 75% at 50% 48%,#000 52%,transparent 100%);
}
.page-home .tg-showcase-art[data-game="shape-memory"] .sm-preview .sm-board{
 width:min(100%,310px);max-width:none;transform:rotate(-5deg);
 filter:drop-shadow(0 12px 15px #080a103d)
}
.page-home .tg-showcase-art[data-game="shape-memory"] .sm-object{width:23%}
/* Every Home tile has a legible movement on hover or keyboard focus.
   Individual motifs animate, not their clipped card panels or captions. */
.page-home .tg-showcase-art[data-game="cattiles"] .tg-showcase-cat-stack:nth-child(2) .tg-showcase-cat-tile:first-child{
 animation:tg-showcase-tile-move 3s ease-in-out infinite}
.page-home .tg-showcase-art[data-game="number-memory"] .nm-preview-number{
 animation:tg-showcase-numbers 4s ease-in-out infinite}
.page-home .tg-showcase-art[data-game="shape-memory"] .sm-object{
 animation:tg-showcase-shape-float 4.3s ease-in-out infinite}
.page-home .tg-showcase-art[data-game="shape-memory"] .sm-object:nth-child(2){animation-delay:-1.1s}
.page-home .tg-showcase-art[data-game="shape-memory"] .sm-object:nth-child(3){animation-delay:-2.2s}
.page-home .tg-showcase-art[data-game="shape-memory"] .sm-object:nth-child(4){animation-delay:-3.2s}
.page-home .tg-showcase-art[data-game="colour-memory"] .tg-showcase-wheel{
 animation:tg-showcase-wheel-turn 14s linear infinite}
.page-home .tg-showcase-art[data-game="reaction-time"] .tg-showcase-reaction-panel{
 animation:tg-showcase-reaction-pulse 3s steps(1) infinite}
.page-home .tg-showcase-art[data-game="pinpoint"] .tg-showcase-pinpoint-aim{
 animation:tg-showcase-aim 3.8s ease-in-out infinite}
.page-home .tg-showcase-art[data-game="oddlings"] .od-showcase-canvas{
 animation:tg-showcase-odd-bounce 3.2s ease-in-out infinite}
.page-home .tg-showcase-art[data-game="bitnode"] .tg-showcase-bit-foe{
 animation:tg-showcase-foe-pulse 2.8s ease-in-out infinite}
.page-home .tg-showcase-art[data-game="bitnode"] .tg-showcase-bit-foe:nth-of-type(2){animation-delay:-1.3s}
.page-home .tg-showcase-art[data-game="grouplet"]>.tg-game-icon,
.page-home .tg-showcase-art[data-game="katana-kata"]>.tg-game-icon{
 animation:tg-showcase-icon-tilt 4s ease-in-out infinite}
.page-home .tg-showcase-art[data-game="katana-kata"]>.tg-game-icon{animation-duration:2.9s}
@keyframes tg-showcase-tile-move{0%,100%{transform:none}48%,60%{transform:translateY(-15%) scale(1.07)}}
@keyframes tg-showcase-numbers{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.3);transform:scale(1.045)}}
@keyframes tg-showcase-shape-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes tg-showcase-wheel-turn{to{rotate:360deg}}
@keyframes tg-showcase-reaction-pulse{0%,54%,100%{background:#65bd97}55%,75%{background:#e66a76}}
@keyframes tg-showcase-aim{0%,100%{translate:-5% 6%}48%{translate:8% -6%}}
@keyframes tg-showcase-odd-bounce{0%,100%{translate:0 0}45%{translate:0 -6px}}
@keyframes tg-showcase-foe-pulse{0%,100%{opacity:1}50%{opacity:.45;scale:.82}}
@keyframes tg-showcase-icon-tilt{0%,100%{transform:rotate(-9deg) scale(1)}50%{transform:rotate(-5deg) scale(1.045)}}
@media(prefers-reduced-motion:reduce){
 .page-home .tg-showcase-art *, .page-home .tg-showcase-art *::before,
 .page-home .tg-showcase-art *::after{animation:none!important;transition:none!important}
}

/* Feather ribbon strokes before the square artwork viewport can clip them. */
.page-home .tg-showcase-art[data-game="timescape"] .tg-showcase-silk-canvas,
.tg-game-help-dialog .tg-guide-silk .tg-showcase-silk-canvas{
 -webkit-mask-image:radial-gradient(ellipse 58% 60% at 50% 48%,#000 24%,#000c 47%,transparent 88%);
 mask-image:radial-gradient(ellipse 58% 60% at 50% 48%,#000 24%,#000c 47%,transparent 88%);
}

/* Fade fully to zero at every edge, including square canvas bounds. */
.page-home .tg-showcase-art[data-game="timescape"] .tg-showcase-silk-canvas{
 -webkit-mask-image:radial-gradient(ellipse 48% 46% at 50% 48%,#000 26%,#000c 54%,transparent 98%);
 mask-image:radial-gradient(ellipse 48% 46% at 50% 48%,#000 26%,#000c 54%,transparent 98%);
}