/* Shared Starfall studio identity: exact wordmark font, tracking and colors. */
.studio-wordmark{font-family:Arial,sans-serif;font-weight:900;letter-spacing:2px;line-height:normal;color:#f2f5ff}.studio-wordmark span{color:#ff9255}
.loading-screen{font-family:Arial,sans-serif;background:#080b14;color:#f2f5ff;--mint:#a4f5d4;--muted:#95a3b9}
.loading-wordmark{font-size:16px;margin-bottom:44px}.loading-kicker{font-size:11px;letter-spacing:2px;color:#95a3b9;margin-bottom:10px}
.loading-title{font-family:Arial,sans-serif;font-size:clamp(40px,8vw,58px);letter-spacing:-2px;font-weight:700;line-height:1.15}.loading-title>span{color:#a4f5d4}
.loading-tagline{font-size:14px;line-height:1.6;color:#9baac2;margin:16px 0 0}.loading-status{top:calc(100% + 30px);color:#95a3b9;font-size:12px;letter-spacing:1px}
.loading-dots i,.loading-dots i:nth-child(2),.loading-dots i:nth-child(3){background:#a4f5d4;border-radius:50%}
.loading-credit{color:#68768c;font-family:Arial,sans-serif;font-size:11px;letter-spacing:1px}.loading-retry{top:calc(100% + 104px);background:#a4f5d4;color:#081e1a;border:0;border-radius:9px;font-weight:700}
.topbar .brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.header-wordmark{font-size:12px}.header-wordmark>span{color:#ff9255}
body[data-theme="daylight"] .header-wordmark{color:#17243b}
@media(max-height:500px){.loading-wordmark{margin-bottom:16px}.loading-center{top:42%}.loading-tagline{margin-top:8px}.loading-status{top:calc(100% + 14px);gap:5px}.loading-credit{bottom:12px}.loading-retry{top:calc(100% + 69px)}}

/* The shared Games division logo uses a light plate for navy contrast. */
.games-logo{display:block;object-fit:contain;background:#f7f8fa;border-radius:14px;padding:8px}.loading-games-logo{width:180px;height:180px;margin:0 auto 24px}.header-games-logo{width:76px;height:76px;padding:4px;border-radius:10px}.topbar .brand{flex-direction:row;align-items:center;gap:14px}.loading-center{max-width:650px}.loading-title>span{color:#a889ee}.loading-dots i,.loading-dots i:nth-child(2),.loading-dots i:nth-child(3){background:#a889ee}
@media(max-height:650px){.loading-games-logo{width:100px;height:100px;margin-bottom:12px}.loading-title{font-size:36px}.loading-tagline{margin-top:8px}.loading-center{top:42%}}
@media(max-height:400px){.loading-games-logo{width:70px;height:70px;margin-bottom:8px}.loading-kicker,.loading-tagline{display:none}.loading-title{font-size:28px}.loading-status{top:calc(100% + 10px)}}

/* Unframed transparent logo. */
.games-logo{background:transparent;border-radius:0;padding:0}

/* Recolor navy only, preserving the source alpha and violet segment. */
/* The reverse logo is used on dark game surfaces; the navy original returns on daylight. */
body[data-theme="daylight"] .header-games-logo{content:url('./tfa-games-light.png')}

/* Keep the puzzle and its pieces together in either phone orientation. */
@media(pointer:coarse),(max-width:700px),(max-height:540px) and (max-width:1200px){
 .app{width:min(calc(100% - 16px),490px);height:100dvh;min-height:0;display:flex;flex-direction:column;padding:6px 0 max(4px,env(safe-area-inset-bottom));padding-top:max(6px,env(safe-area-inset-top))}
 .topbar{min-height:44px;flex-shrink:0;margin:0 0 3px}.topbar .brand{font-size:24px;gap:8px}.header-games-logo{width:40px;height:40px}
 .game-toolbar{flex-shrink:0;min-height:36px;margin:0;padding:2px 0;gap:6px}.toolbar-button{min-height:34px;font-size:11px;padding:5px 9px}
 .ranked-bar{flex-shrink:0;min-height:20px;margin:0;font-size:9px;gap:5px}
 .play-area{flex:1;min-height:0;display:flex;flex-direction:column}
 .scoreboard{flex-shrink:0;min-height:52px;padding:2px 5px 6px}.score-number{font-size:30px}.best-number{font-size:21px}.eyebrow,.device-label{font-size:9px}
 .board-wrap{width:min(100%,calc(100dvh - 330px));align-self:center;flex-shrink:0}.board{--gap:4px;--board-pad:8px;border-radius:12px}.cell{border-radius:4px}
 .tray-heading{margin:7px 4px 4px;min-height:15px;font-size:9px;flex-shrink:0}.tray{min-height:82px;height:82px;flex-shrink:0;gap:7px}.piece-slot{height:82px;padding:6px;border-radius:9px}
 .instruction{margin:7px 0 4px;min-height:18px;font-size:11px}.bottom-bar{margin:0;min-height:36px;flex-shrink:0}.calm-note{font-size:9px}.bottom-bar button{min-height:36px;font-size:11px}
 .page-footer{display:none}dialog{max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain}
}
@media(orientation:landscape) and (max-height:540px) and (max-width:1200px){
 .app{width:100%;max-width:1000px;padding:4px max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-columns:1fr 1fr;grid-template-rows:40px 18px minmax(0,1fr);gap:0 16px}
 .topbar{grid-column:1;grid-row:1;min-height:40px;margin:0}.game-toolbar{grid-column:2;grid-row:1;justify-content:flex-end}.ranked-bar{grid-column:1/-1;grid-row:2;min-height:18px}
 .play-area{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,1fr);grid-template-rows:auto auto 1fr auto auto;gap:3px 18px;align-items:center}
 .board-wrap{grid-column:1;grid-row:1/6;width:min(100%,calc(100dvh - 72px));justify-self:center;align-self:center}
 .scoreboard{grid-column:2;grid-row:1;min-height:43px;padding-bottom:0}.score-primary{flex-direction:row;align-items:center;gap:10px}.best-score{flex-direction:row;align-items:center;gap:8px}.device-label{display:none}
 .tray-heading{grid-column:2;grid-row:2;margin:2px 4px}.tray{grid-column:2;grid-row:3;min-height:75px;height:82px;align-self:center}
 .instruction{grid-column:2;grid-row:4;margin:2px;font-size:10px}.bottom-bar{grid-column:2;grid-row:5;min-height:34px}.calm-note{max-width:60%}
}

/* A fixed-size streak readout keeps the board and pickup geometry steady. */
.scoring-note{background:color-mix(in srgb,var(--mint) 10%,var(--panel));color:var(--ink);border:1px solid color-mix(in srgb,var(--mint) 25%,var(--panel))}
.streak-meter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:128px;padding:5px 8px;border:1px solid transparent;border-radius:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.streak-meter .eyebrow{font-size:9px;letter-spacing:1.1px;color:inherit}
#streak-count{font-size:24px;line-height:1;font-weight:850;color:var(--ink)}
#streak-detail{font-size:10px;white-space:nowrap;line-height:1.3}
.streak-pips{display:flex;gap:4px;margin-top:2px}.streak-pips i{width:20px;height:3px;border-radius:3px;background:color-mix(in srgb,var(--muted) 22%,transparent)}
.streak-pips i.available{background:currentColor}
.streak-meter.is-active{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 35%,transparent);background:color-mix(in srgb,var(--mint) 7%,transparent)}
.streak-meter.is-warning{color:var(--yellow);border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 10%,transparent)}
@media(pointer:coarse),(max-width:700px),(max-height:540px) and (max-width:1200px){.streak-meter{min-width:112px;padding:2px 4px;gap:1px;border-radius:8px}#streak-count{font-size:19px}#streak-detail{font-size:9px}.streak-pips{margin-top:1px}.streak-meter .eyebrow{font-size:8px}.scoreboard{gap:5px}}
@media(orientation:landscape) and (max-height:540px) and (max-width:1200px){.game-toolbar{grid-template-columns:.95fr .9fr 1.2fr .85fr;gap:4px}.game-toolbar .toolbar-button{padding:4px;font-size:10px;gap:4px;min-width:0}.game-toolbar .toolbar-button svg{width:13px;height:13px;flex-shrink:0}.score-primary,.best-score{flex-direction:column;gap:0;min-width:0}.scoreboard .score-number{font-size:24px}.scoreboard .best-number{font-size:19px}}

/* Place the points HUD in an explicit grid row; keep Restart beside the pieces. */
@media(orientation:landscape) and (max-height:540px) and (max-width:1200px){
 .app{grid-template-rows:40px 30px 18px minmax(0,1fr);overflow:hidden}
 .app>.tfa-leaderboard-live{grid-column:1/-1;grid-row:2;margin:0;padding:2px 8px;height:30px}
 .ranked-bar{grid-row:3}.play-area{grid-row:4;grid-template-rows:auto 12px minmax(0,1fr) 14px 34px;gap:2px 18px}
 .tray-heading{min-height:12px;font-size:8px;margin:0}.tray,.piece-slot{min-height:60px;height:60px}.piece-slot{padding:4px}
 .instruction{min-height:12px;margin:0;font-size:9px}.scoreboard{min-height:40px}.bottom-bar{min-height:32px}.bottom-bar button{min-height:32px}
}
@media(orientation:portrait) and (max-height:680px){
 .app{overflow:hidden}.topbar{min-height:36px;height:36px}.topbar .header-games-logo{height:32px;width:32px}
 .game-toolbar{min-height:32px}.game-toolbar .toolbar-button{min-height:30px;padding-block:3px;font-size:10px}
 .ranked-bar{min-height:18px;font-size:8px}.scoreboard{min-height:42px;padding-bottom:2px}.score-number{font-size:25px}.best-number{font-size:19px}
 .tray-heading{min-height:12px;margin:4px 2px 2px;font-size:8px}.tray,.piece-slot{min-height:64px;height:64px}
 .instruction{min-height:14px;font-size:10px;margin:3px 0}.bottom-bar{min-height:32px}.bottom-bar button{min-height:32px}
}

@media(orientation:landscape) and (max-height:400px){.bottom-bar{height:32px;min-height:32px;justify-content:flex-end;padding:0}.bottom-bar .calm-note{display:none}}

@media(orientation:landscape) and (max-height:400px){.bottom-bar button{height:32px;max-height:32px;min-height:32px;padding:4px 10px;line-height:20px}}