/* CloudPop toy-room surfaces. This sheet changes discovery and result
   composition; active game board geometry belongs to each game's own layout. */
:root{
 --toy-ivory:#fff9e9;--toy-edge:#eadbbb;--toy-ink:#204f55;
 --toy-coral:#f59b7d;--toy-aqua:#bce9db;--toy-shadow:#32656224;
}

/* Real scalable enamel art supplies the material without changing hit boxes. */
#app :is(button.primary,a.primary,button.secondary,a.secondary,button.icon-btn){position:relative;isolation:isolate;background:transparent;border-color:transparent;box-shadow:0 4px 8px #214d4f14;color:#163f45;text-shadow:none}
#app :is(button.primary,a.primary,button.secondary,a.secondary,button.icon-btn)::before{content:"";position:absolute;z-index:-1;inset:0;border:20px solid transparent;border-image:url('/art/ui/material-ivory-4e400a415797.svg') 32 fill / 20px / 0 stretch;pointer-events:none}
#app :is(button.primary,a.primary)::before{border-image-source:url('/art/ui/material-coral-c9b12f712c25.svg')}
#app button.icon-btn::before{border-image-width:17px}
#app :is(button.primary,a.primary,button.secondary,a.secondary,button.icon-btn)[aria-pressed=true]::before{border-image-source:url('/art/ui/material-aqua-e408ed842d15.svg')}
#app :is(button.primary,a.primary,button.secondary,a.secondary,button.icon-btn):hover{filter:none}
#app :is(button.primary,a.primary,button.secondary,a.secondary,button.icon-btn):active:not(:disabled){transform:translateY(2px);filter:brightness(.97);box-shadow:0 1px 2px #214d4f14}
#app :is(button.primary,button.secondary,button.icon-btn):disabled{opacity:1;color:#59665f;box-shadow:none;transform:none}
#app :is(button.primary,button.secondary,button.icon-btn):disabled::before{filter:grayscale(1);opacity:.58}
@media(prefers-reduced-motion:reduce){#app :is(button.primary,a.primary,button.secondary,a.secondary,button.icon-btn){transition:none}#app :is(button.primary,a.primary,button.secondary,a.secondary,button.icon-btn):active:not(:disabled){transform:none}}
@media(forced-colors:active){#app :is(button.primary,a.primary,button.secondary,a.secondary,button.icon-btn){background:ButtonFace;border-color:ButtonText;color:ButtonText;box-shadow:none}#app :is(button.primary,a.primary,button.secondary,a.secondary,button.icon-btn)::before{display:none}#app :is(button.primary,button.secondary,button.icon-btn):disabled{color:GrayText;border-color:GrayText}}

/* The same opaque enamel panel supports readable ready, pause and dialog text. */
#app :is(.overlay-card,dialog){background:#fff9e9;border-color:#e0d3b3;box-shadow:inset 0 2px 0 #fffef7,inset 0 -3px 0 #eadfc4,0 5px 0 #b1ac9355,0 15px 26px #174e5720;backdrop-filter:none;color:#204f55}
@media(forced-colors:active){#app :is(.overlay-card,dialog){background:Canvas;border-color:CanvasText;color:CanvasText;box-shadow:none}}

/* Airy lobby glass lets the cloud world show through without dimming text. */
body:has(#app[data-view=hub]) .world-scene{background:#b9e5dd}
body:has(#app[data-view=hub]) .world-scene img{opacity:.86;object-position:center 55%;mask-image:none}
body:has(#app[data-view=hub]) .world-scene::after{background:linear-gradient(180deg,#fff9e508,#fff9e526 65%,#fff9e540)}
#app[data-view=hub] .header{max-width:1120px;height:84px;padding-inline:30px}
#app[data-view=hub] .hub{max-width:1120px;padding:0 28px 20px}
/* The painted world already provides clouds; do not float flat ovals over copy. */
#app[data-view=hub] .hub::before,#app[data-view=hub] .hub::after{display:none}
#app[data-view=hub] .feature-card{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 grid-template-rows:minmax(240px,auto) auto;align-items:center;
 max-width:1040px;min-height:0;margin:8px auto 22px;padding:24px 38px 26px;
 gap:6px 20px;border:2px solid #fffdf380;border-radius:38px;
 background:linear-gradient(90deg,#fff9e9bd,#fff9e9a6 60%,#fff9e940);box-shadow:0 10px 28px #376e6412;
}
#app[data-view=hub] .feature-copy{padding:0;align-self:center;text-align:left}
#app[data-view=hub] .feature-copy h1{
 align-items:flex-start;transform:none;-webkit-text-stroke:0;letter-spacing:-1.2px;
 text-shadow:none;color:var(--toy-ink);margin:0;
}
#app[data-view=hub] .feature-copy h1 span{font-size:clamp(25px,3vw,36px);line-height:1.15;color:#365b54}
#app[data-view=hub] .feature-copy h1 strong,
#app[data-view=hub] .feature-copy h1 .recent-title{font-size:clamp(34px,4.8vw,54px);line-height:1.1;color:var(--toy-ink);letter-spacing:-1px;overflow-wrap:anywhere}
#app[data-view=hub] .feature-copy .subtitle{font-size:16px;line-height:1.5;font-weight:700;color:#17454b;text-shadow:none;text-align:left;margin:15px 0 0;max-width:30ch}
#app[data-view=hub] .recent-label{display:inline-flex;max-width:100%;margin:0 0 14px;padding:6px 12px;border:1px solid #94c9b9;border-radius:12px;background:#dff3e7;color:#24574e;font-size:13px;font-weight:800;text-shadow:none}
#app[data-view=hub] .feature-art{height:240px;min-height:0;grid-column:2;grid-row:1;position:relative;isolation:isolate}
#app[data-view=hub] .feature-art::before{content:"";position:absolute;z-index:-1;width:88%;height:70%;bottom:3%;border-radius:50%;background:radial-gradient(ellipse,#c8e5d64d,transparent 70%);box-shadow:none}
#app[data-view=hub] .tower-hero{height:106%;width:100%;max-width:110%;animation:none;transform:none;filter:drop-shadow(0 13px 9px #2f65522c)}
#app[data-view=hub] .feature-action{grid-column:1/-1;grid-row:2;padding:6px 0 0;max-width:440px;margin:0;width:100%;justify-self:center}
#app[data-view=hub] .play-link{min-height:56px;font-size:22px;border-radius:20px}
#app[data-view=hub] .under-button{margin-top:14px;color:#17454b;font-size:13px;text-shadow:none}
#app[data-view=hub] .under-button strong{color:var(--toy-ink);font-size:17px}

/* Collectible shelves. Each whole card remains its existing accessible link. */
#app[data-view=hub] .collection-heading{max-width:1040px;margin:28px auto 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--toy-ink)}
#app[data-view=hub] .collection-heading h2{font-size:23px;line-height:1.25;font-weight:900;letter-spacing:-.5px}
#app[data-view=hub] .collection-heading>span{display:grid;place-items:center;min-width:34px;min-height:30px;padding:2px 9px;border:1px solid #d5dfc9;border-radius:10px;background:#fff9e9;font-size:14px;font-weight:800}
#app[data-view=hub] .lineup{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1040px;gap:18px;margin:0 auto 34px}
#app[data-view=hub] .lineup-card{
 position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:left;
 padding:10px 13px 14px;border:1px solid #fffdf399;border-radius:26px;
 background:linear-gradient(180deg,#fff9e94d,#fff9e9b8 52%);color:var(--toy-ink);box-shadow:0 5px 16px #3c716214;
 transition:transform .16s ease-out,box-shadow .16s ease-out;
}
#app[data-view=hub] .card-art-well{display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;width:100%;aspect-ratio:1.14;margin-bottom:10px;border-radius:20px;background:transparent}
#app[data-view=hub] .card-art-well::after{content:"";position:absolute;z-index:-1;left:14%;right:14%;bottom:9%;height:12%;border-radius:50%;background:#aecfbe44;filter:blur(3px)}
#app[data-view=hub] .lineup-card .card-art-well img{width:100%;height:100%;max-height:190px;object-fit:contain;filter:drop-shadow(0 5px 3px #28584718)}
#app[data-view=hub] .lineup-card h2{font-size:20px;line-height:1.2;letter-spacing:-.3px;color:var(--toy-ink);overflow-wrap:anywhere}
#app[data-view=hub] .lineup-card .card-description{font-size:13px;line-height:1.45;min-height:2.9em;margin:7px 0 12px;color:#17454b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#app[data-view=hub] .lineup-card .card-play{justify-content:space-between;min-height:44px;padding:8px 0 0;margin-top:auto;border:0;border-top:1px solid #49756a26;border-radius:0;background:none;box-shadow:none;text-shadow:none;transform:none;filter:none;color:#245d54;font-size:16px;line-height:1.3;gap:6px}
#app[data-view=hub] .lineup-card .card-play svg{width:30px;height:30px;padding:6px;border:1px solid #d0c698;border-radius:10px;background:#ffe5a0;box-shadow:0 2px 0 #cbbb82;color:#63532b}
#app[data-view=hub] .lineup-card small{margin-top:10px;font-size:12px;line-height:1.35;color:#17454b}
#app[data-view=hub] .lineup-card .puzzle-progress{font-size:12px;line-height:1.4;margin:0 0 8px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 #app[data-view=hub] .lineup-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px #3c71622b}
}
#app[data-view=hub] .lineup-card:active{transform:translateY(2px);box-shadow:0 2px 8px #3c71621c}

/* Supporting copy gets one light surface, never a nested text box. */
#app[data-view=hub] .daily-goal{background:#fff9e99e;border:1px solid #fffdf38c;box-shadow:none;color:var(--toy-ink)}
#app[data-view=hub] .daily-goal small{color:#17454b}
#app[data-view=hub] .home-catalog{background:#fff9e99e;border:1px solid #fffdf366;box-shadow:none}
@media(prefers-reduced-transparency:reduce){
 #app[data-view=hub] :is(.feature-card,.lineup-card,.daily-goal,.home-catalog){background:#fff9e9}
}

/* Result art is decorative; score, completion picture and all actions stay live. */
#app .game-board[data-state=ended] .result-card{
 position:relative;isolation:isolate;max-width:460px;padding:20px 24px 24px;
 border:2px solid #fffdf1;border-radius:32px;background:#fff8e6;
 box-shadow:0 5px 0 #d8c8a5,0 18px 32px #37635624;backdrop-filter:none;
}
#app .game-board[data-state=ended] .result-emblem{display:block;width:120px;height:100px;object-fit:contain;flex:none;margin:0 auto 10px;filter:drop-shadow(0 5px 3px #416d5426)}
#app .game-board[data-state=ended] .result-card>.eyebrow{color:#567168;letter-spacing:.08em;text-transform:uppercase;font-weight:800;font-size:13px;padding:0;border:0;background:none;box-shadow:none;text-shadow:none}
#app .game-board[data-state=ended] .result-card[data-result-award=earned]>.eyebrow{color:#77591f}
#app .game-board[data-state=ended] .result-card h2{font-size:28px;line-height:1.2;letter-spacing:-.6px;color:var(--toy-ink);padding:4px 0;border:0;background:none;box-shadow:none;text-shadow:none}
#app .game-board[data-state=ended] .result-score{font-size:clamp(48px,13vw,66px);color:#255c57;letter-spacing:-1.5px;text-shadow:none;line-height:1;margin-top:9px;font-variant-numeric:tabular-nums;background:none;box-shadow:none}
#app .game-board[data-state=ended] .result-score span{font-size:13px;letter-spacing:.06em;color:#5c7061;margin-top:7px}
#app .game-board[data-state=ended] .result-best{background:#f0eed4;border:1px solid #e0dfbf;border-radius:12px;margin:8px 0 3px;padding:7px 12px;color:#4e634f}
#app .game-board[data-state=ended] .result-card>p:not(.eyebrow){color:#446459;font-size:15px;line-height:1.5;max-width:34ch}
#app .game-board[data-state=ended] .result-card .primary{font-size:19px;min-height:52px;border-radius:18px}
#app .game-board[data-state=ended] .result-card .secondary{min-height:48px;border-radius:16px;font-size:16px}
#app .game-board[data-state=ended] .result-card .text-btn{font-size:14px;color:#365f55;background:none;border-color:transparent;box-shadow:none;text-shadow:none}
#app .game-board[data-state=ended] .result-picture-card .result-score{font-size:30px;letter-spacing:-.4px}

@media(max-width:960px){
 #app[data-view=hub] .lineup{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
 #app[data-view=hub] .header{height:72px;padding-inline:18px}
 #app[data-view=hub] .hub{padding:0 14px 18px}
 #app[data-view=hub] .feature-card{grid-template-columns:minmax(0,1.15fr) minmax(105px,.85fr);grid-template-rows:minmax(170px,auto) auto;margin-top:3px;padding:17px 17px 20px;gap:5px 5px;border-radius:29px}
 #app[data-view=hub] .feature-copy h1 span{font-size:25px}
 #app[data-view=hub] .feature-copy h1 strong,#app[data-view=hub] .feature-copy h1 .recent-title{font-size:clamp(26px,6.2vw,38px);line-height:1.13;letter-spacing:-.6px}
 #app[data-view=hub] .feature-copy .subtitle{font-size:13px;line-height:1.45;margin-top:10px}
 #app[data-view=hub] .recent-label{font-size:12px;padding:5px 8px;margin-bottom:10px}
 #app[data-view=hub] .feature-art{height:170px}
 #app[data-view=hub] .tower-hero{height:100%;max-width:116%;width:116%}
 #app[data-view=hub] .feature-action{padding:9px 0 0}
 #app[data-view=hub] .play-link{min-height:52px;font-size:20px}
 #app[data-view=hub] .under-button{margin-top:12px}
 #app[data-view=hub] .collection-heading{margin-top:23px;margin-bottom:12px}
 #app[data-view=hub] .collection-heading h2{font-size:21px}
 #app[data-view=hub] .lineup{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
 #app[data-view=hub] .lineup-card{padding:8px 10px 12px;border-radius:22px}
 #app[data-view=hub] .card-art-well{aspect-ratio:1.12;margin-bottom:9px;border-radius:16px}
 #app[data-view=hub] .lineup-card h2{font-size:18px;line-height:1.23}
 #app[data-view=hub] .lineup-card .card-description{font-size:12px;margin:6px 0 10px;line-height:1.45}
 #app[data-view=hub] .lineup-card .card-play{font-size:15px}
 #app[data-view=hub] .lineup-card small{font-size:12px}
}
@media(max-width:359px){
 #app[data-view=hub] .hub{padding-inline:10px}
 #app[data-view=hub] .header{padding-inline:14px}
 #app[data-view=hub] .feature-card{padding:15px 14px 18px;grid-template-rows:minmax(162px,auto) auto}
 #app[data-view=hub] .feature-art{height:156px}
 #app[data-view=hub] .feature-copy h1 strong,#app[data-view=hub] .feature-copy h1 .recent-title{font-size:26px}
 #app[data-view=hub] .lineup{gap:14px 10px}
 #app[data-view=hub] .lineup-card{padding-inline:9px}
 #app[data-view=hub] .lineup-card h2{font-size:17px}
 #app .game-board[data-state=ended] .result-card{padding:18px 16px 22px;border-radius:27px}
 #app .game-board[data-state=ended] .result-emblem{height:84px;margin-bottom:8px}
 #app .game-board[data-state=ended] .result-card h2{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
 #app[data-view=hub] .lineup-card{transition:none}
 #app[data-view=hub] .lineup-card:active{transform:none}
}
@media(forced-colors:active){
 body:has(#app[data-view=hub]) .world-scene{background:Canvas}
 body:has(#app[data-view=hub]) .world-scene img,body:has(#app[data-view=hub]) .world-scene::after{display:none}
 #app[data-view=hub] .feature-card,#app[data-view=hub] .lineup-card,#app[data-view=hub] .card-art-well,#app[data-view=hub] .daily-goal,#app[data-view=hub] .home-catalog,#app .game-board[data-state=ended] .result-card{background:Canvas;border:2px solid CanvasText;box-shadow:none}
 #app[data-view=hub] .feature-art::before,#app[data-view=hub] .card-art-well::after{display:none}
 #app[data-view=hub] .feature-copy h1,#app[data-view=hub] .feature-copy h1 span,#app[data-view=hub] .feature-copy h1 strong,#app[data-view=hub] .feature-copy .subtitle,#app[data-view=hub] .collection-heading,#app[data-view=hub] .lineup-card h2,#app[data-view=hub] .lineup-card .card-description,#app[data-view=hub] .lineup-card .card-play,#app[data-view=hub] .lineup-card small,#app[data-view=hub] .daily-goal small,#app .game-board[data-state=ended] .result-score,#app .game-board[data-state=ended] .result-card h2{color:CanvasText;text-shadow:none}
 #app[data-view=hub] .recent-label,#app[data-view=hub] .collection-heading>span,#app[data-view=hub] .lineup-card .card-play svg,#app .game-board[data-state=ended] .result-best{background:Canvas;border-color:CanvasText;color:CanvasText;box-shadow:none}
}

/* Tone marks and Thai clusters keep the accepted script-specific breathing room. */
html:lang(vi) #app[data-view=hub] .feature-copy h1 :is(span,strong,.recent-title),
html:lang(vi) #app .game-board[data-state=ended] .result-card h2{line-height:1.3;letter-spacing:normal}
html:lang(vi) #app[data-view=hub] .lineup-card h2{line-height:1.35;letter-spacing:normal}
html:lang(th) #app[data-view=hub] .feature-copy h1 :is(span,strong,.recent-title),
html:lang(th) #app .game-board[data-state=ended] .result-card h2{line-height:1.4;letter-spacing:normal}
html:lang(th) #app[data-view=hub] .lineup-card h2{line-height:1.45;letter-spacing:normal}
html:lang(th) #app .game-board[data-state=ended] .result-card>.eyebrow,
html:lang(th) #app .game-board[data-state=ended] .result-score span{letter-spacing:normal}

/* Keep the accepted mobile reading sizes while testing a denser shelf. */
#app[data-view=hub] .lineup-card h2{font-size:21px}
#app[data-view=hub] .lineup-card .card-description{font-size:14px;line-height:1.5;min-height:3em}
#app[data-view=hub] .lineup-card .card-play{font-size:17px}
#app[data-view=hub] .lineup-card small{font-size:13px}

/* Smallest phones use compact rows so long titles keep their reading size. */
@media(max-width:359px){
 #app[data-view=hub] .lineup{grid-template-columns:minmax(0,1fr)}
 #app[data-view=hub] .lineup-card{background:linear-gradient(90deg,#fff9e94d,#fff9e9b8 42%);display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:12px;align-items:start;padding:12px}
 #app[data-view=hub] .lineup-card .card-art-well{grid-column:1;grid-row:1/6;align-self:center;width:100px;height:100px;aspect-ratio:1;margin:0}
 #app[data-view=hub] .lineup-card .card-art-well img{max-height:100px}
 #app[data-view=hub] .lineup-card :is(h2,.card-description,.puzzle-progress,.card-play,small){grid-column:2;min-width:0}
 #app[data-view=hub] .lineup-card .card-description{min-height:0;margin:6px 0 9px}
 #app[data-view=hub] .lineup-card .card-play{margin-top:0}
 #app[data-view=hub] .lineup-card small{margin-top:6px}
}
/* Game headers leave0–4px top clearance around their Menu controls.
   An inset3px ring stays fully visible without changing any playfield geometry. */
#app[data-view=game]>.header .icon-btn:focus-visible{outline-offset:-3px}

@media(prefers-reduced-transparency:reduce){
 #app[data-view=hub] .lineup-card{background:#fff9e9}
}
@media(forced-colors:active){
 #app[data-view=hub] :is(.lineup-card,.daily-goal,.home-catalog){background:Canvas;color:CanvasText}
}

/* Compact shared results: decisions first, decorative art never consumes a row. */
#app .game-board[data-state=ended] .result-card{padding:18px 20px;gap:0;max-width:460px}
#app .game-board[data-state=ended] .result-heading{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;text-align:left}
#app .game-board[data-state=ended] .result-heading>div{min-width:0}
#app .game-board[data-state=ended] .result-emblem{width:56px;height:56px;margin:0;filter:none}
#app .game-board[data-state=ended] .result-heading .eyebrow{display:block;margin:0 0 3px;padding:0;color:#567168;font-size:13px;line-height:1.4;font-weight:800;letter-spacing:.02em}
#app .game-board[data-state=ended] .result-card[data-result-award=earned] .result-heading .eyebrow{color:#77591f}
#app .game-board[data-state=ended] .result-heading h2{font-size:22px;line-height:1.25;letter-spacing:-.4px;margin:0;padding:0;overflow-wrap:anywhere}
#app .game-board[data-state=ended] .result-score{display:flex;align-items:baseline;justify-content:center;gap:8px;min-width:0;max-width:100%;flex-wrap:wrap;font-size:48px;line-height:1.05;letter-spacing:-1px;padding:0;margin:12px 0 5px}
#app .game-board[data-state=ended] .result-score span{display:inline;margin:0;font-size:16px;line-height:1.4;letter-spacing:0;overflow-wrap:anywhere}
#app .game-board[data-state=ended] .result-record{width:100%;margin:0 0 12px;color:#446459}
#app .game-board[data-state=ended] .result-best{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:center;background:none;border:0;border-radius:0;margin:0;padding:0;font-size:13px;line-height:1.5}
#app .game-board[data-state=ended] .result-comparison{margin:2px 0 0;font-size:13px;line-height:1.45}
#app .game-board[data-state=ended] .result-main-actions{display:flex;flex-direction:column;width:100%;gap:8px}
#app .game-board[data-state=ended] .result-main-actions :is(.primary,.secondary){margin:0;width:100%;min-height:48px;padding:10px 12px;font-size:16px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
#app .game-board[data-state=ended] .result-recommendation{display:flex;flex-direction:column;gap:3px;margin:0;padding:0;border:0}
#app .game-board[data-state=ended] .result-recommendation>span{font-size:13px;line-height:1.35}
#app .game-board[data-state=ended] .result-context{width:100%;margin:10px 0 0}
#app .game-board[data-state=ended] .result-context:empty{display:none}
#app .game-board[data-state=ended] .result-context p{display:block;max-width:36ch;margin:0 auto 5px;font-size:14px;line-height:1.5;color:#446459}
#app .game-board[data-state=ended] .result-context .result-detail{font-weight:700;font-size:13px}
#app .game-board[data-state=ended] .result-secondary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:8px;width:100%;margin-top:10px;padding-top:8px;border-top:1px solid #b3ad8840}
#app .game-board[data-state=ended] .result-secondary-actions .game-vote{margin:0;padding:0;gap:2px;border:0;min-width:0}
#app .game-board[data-state=ended] .result-secondary-actions :is(button,.text-btn){margin:0;width:100%;min-height:44px;padding:8px 6px;border:0;background:none;box-shadow:none;border-radius:12px;font-size:14px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
#app .game-board[data-state=ended] .result-secondary-actions button::before{display:none}
#app .game-board[data-state=ended] .result-secondary-actions button[aria-pressed=true]{background:#def0db}
#app .game-board[data-state=ended] .result-secondary-actions [data-vote-count]{font-size:12px;line-height:1.4}
#app .game-board[data-state=ended] .result-secondary-actions>.text-btn:only-child{grid-column:1/-1}
#app .game-board[data-state=ended] .result-home{margin:4px 0 0;min-height:44px;padding:8px}
#app .game-board[data-state=ended] .result-heading .result-picture{width:80px;height:80px;min-width:80px;margin:0;padding:5px;border-radius:12px;box-shadow:none}
#app .game-board[data-state=ended] .result-picture-card .result-score{font-size:36px}
@media(max-width:359px){#app .game-board[data-state=ended] .result-card{padding:14px}#app .game-board[data-state=ended] .result-heading{gap:8px}}
@media(max-height:500px){#app .game-board[data-state=ended] .result-card{padding-block:12px}#app .game-board[data-state=ended] .result-score{margin-top:8px}}
/* Long labels may wrap as text, but decorative arrows never get a separate row. */
#app .game-board[data-state=ended] .result-main-actions :is(.primary,.secondary){flex-wrap:nowrap;gap:8px}
@media(max-width:649px) and (max-height:480px){
 #app .game-board[data-state=ended] .result-card{padding-block:8px}
 #app .game-board[data-state=ended] .result-score{margin-top:4px;margin-bottom:1px}
 #app .game-board[data-state=ended] .result-main-actions{gap:4px}
 /* Keep the two play decisions ahead of noninteractive record context on short phones. */
 #app .game-board[data-state=ended] .result-record{order:1;margin:8px 0 4px}
 #app .game-board[data-state=ended] :is(.result-context,.result-secondary-actions,.result-home){order:2}
}

@media(forced-colors:active){#app .game-board[data-state=ended] .result-secondary-actions button{border:1px solid ButtonText}#app .game-board[data-state=ended] .result-secondary-actions button[aria-pressed=true]{border-color:Highlight}}

/* Lobby family accents: decorative, never a filter or ordering signal.
   Titles and existing gameplay hints identify every game without color. */
/* Timing / reaction: warm apricot. */
#app[data-view=hub] .lineup-card:is([data-game=stack],[data-game=swing],[data-game=stairs],[data-game=beat],[data-game=color]){
 --family-surface:255,240,224;--family-edge:181,132,96;
}
/* Survival / movement: soft sky blue. */
#app[data-view=hub] .lineup-card:is([data-game=dodge],[data-game=shooter],[data-game=runner],[data-game=flight]){
 --family-surface:229,243,255;--family-edge:103,148,184;
}
/* Aiming / physics: gentle lavender. */
#app[data-view=hub] .lineup-card:is([data-game=basket],[data-game=ricochet],[data-game=merge],[data-game=delivery]){
 --family-surface:243,234,253;--family-edge:151,126,181;
}
/* Routes / spatial reasoning: quiet mint. */
#app[data-view=hub] .lineup-card:is([data-game=path],[data-game=golf],[data-game=escape],[data-game=cloudlink],[data-game=starbox],[data-game=balance]){
 --family-surface:228,246,232;--family-edge:104,155,121;
}
/* Board / matching / deduction: pale butter yellow. */
#app[data-view=hub] .lineup-card:is([data-game=memory],[data-game=sort],[data-game=nonogram],[data-game=blocks],[data-game=sudoku],[data-game=flip]){
 --family-surface:255,247,216;--family-edge:174,150,83;
}
#app[data-view=hub] .lineup-card[data-game]{
 background:linear-gradient(180deg,rgba(var(--family-surface,255,248,225),.3),rgba(var(--family-surface,255,248,225),.72) 52%);
 border-color:rgba(var(--family-edge,159,153,131),.64);
}
@media(max-width:359px){
 #app[data-view=hub] .lineup-card[data-game]{background:linear-gradient(90deg,rgba(var(--family-surface,255,248,225),.3),rgba(var(--family-surface,255,248,225),.72) 42%)}
}
/* Preserve the strong keyboard outline independently of decorative hues. */
#app[data-view=hub] .lineup-card[data-game]:focus-visible{outline:4px solid #174e57;outline-offset:4px}
@media(prefers-reduced-transparency:reduce){
 #app[data-view=hub] .lineup-card[data-game]{background:rgb(var(--family-surface,255,248,225));border-color:rgb(var(--family-edge,159,153,131))}
}
@media(forced-colors:active){
 #app[data-view=hub] .lineup-card[data-game]{background:Canvas;border-color:CanvasText;box-shadow:none}
 #app[data-view=hub] .lineup-card[data-game]:focus-visible{outline-color:Highlight}
}