/* Oddlings v1: Tegazumi's shared chrome, with a soft tactile toy surface. */
.page-oddlings.tg-game-page{
 --tg-banner-bg:linear-gradient(110deg,#E9E4F5,#E9F3EE 55%,#FFF0DB);
 --tg-banner-ink:#2e3440;--tg-game-action:#9b73bc;
 --tg-game-action-hover:#8a63ac;--tg-game-action-shadow:#6d4d89;
 --tg-game-badge-bg:#f1e9fa;--tg-game-badge-ink:#72538d;
 --od-stage-bg:#fcfbff;--od-stage-border:#ded7e9;
}
:root[data-theme="dark"] .page-oddlings.tg-game-page{
 --tg-banner-bg:linear-gradient(110deg,#3d354d,#304a45 55%,#544536);
 --tg-banner-ink:var(--text);--tg-game-action:#906ab2;
 --tg-game-action-hover:#a481c3;--tg-game-action-shadow:#6c4f81;
 --tg-game-badge-bg:#3b3048;--tg-game-badge-ink:#e3d0f0;
 --od-stage-bg:#292833;--od-stage-border:#47414e;
}
.page-oddlings .tg-game-round-badge{display:none}
.page-oddlings .tg-game-panel{min-height:0}
/* Match the shared visual height used by the other Tegazumi games.
   Both splash and playable container use exactly the same geometry.
   Keep room for the active HUD, footer lane and game controls at 1080p. */
.page-oddlings{
 --od-board-height:min(var(--tg-game-visual-size,550px),
   max(210px,calc(100dvh - 400px)));
}
.od-preview,.od-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:0;min-height:0}
.od-preview{padding:0}
.od-board{
 box-sizing:border-box;display:block;aspect-ratio:5/7;width:auto;height:100%;
 background:var(--od-stage-bg);border:2px solid var(--od-stage-border);
 border-radius:17px;box-shadow:inset 0 -8px 0 rgba(78,63,94,.035),0 12px 23px rgba(44,42,56,.065);
 touch-action:none;user-select:none;-webkit-user-select:none;
}
.od-board-wrap{
 position:relative;height:var(--od-board-height);width:auto;
 max-width:100%;aspect-ratio:5/7;margin:0 auto;min-height:0;flex:none
}
.od-board-wrap .od-board{width:100%;height:100%;cursor:crosshair}
.od-board-wrap .od-board:focus-visible{outline:3px solid var(--tg-game-action);outline-offset:3px}
.od-board-preview{
 height:var(--od-board-height);width:auto;max-width:100%;
 box-shadow:inset 0 -8px 0 rgba(78,63,94,.035)
}
.od-hud{display:flex;align-items:center;justify-content:space-between;gap:14px;
 width:min(100%,275px);margin:0 auto 5px;padding:0 2px}
.od-hud-count{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.od-hud-count small,.od-hud-next span{font-size:11px;color:var(--muted);font-weight:700}
.od-hud-count strong{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.6px;color:var(--text)}
.od-hud-next{display:flex;align-items:center;gap:6px}
.od-next-piece{width:52px;height:52px;display:block}
.od-board-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
 padding:7px 13px;background:var(--surface);border:1px solid var(--line);
 border-radius:999px;color:var(--text);font-size:11px;font-weight:700;
 white-space:nowrap;opacity:.88;pointer-events:none}
.od-status{font-size:12px;color:var(--muted);margin:9px auto 0;text-align:center;min-height:17px}
.od-error{font-size:12px;color:var(--text);text-align:center;margin:0 0 12px}
.od-results-info{font-size:13px;color:var(--muted);margin-top:12px;text-align:center}
.page-oddlings .tg-game-intro .tg-game-actions{margin-top:13px}
.page-oddlings .tg-game-stage-preview{width:100%;display:flex;justify-content:center}
/* The shared artwork token tops out at ~550px. On 1440p+ desktop
   viewports Oddlings can instead use the available tall board space while
   retaining its exact 400:560 geometry. 1080p and mobile are unchanged. */
@media (min-width:900px) and (min-height:1151px){
 .page-oddlings{
  --od-board-height:min(820px,calc(100dvh - 400px),calc((100vw - 120px) * 1.4));
 }
 .page-oddlings .od-hud{width:min(100%,375px)}
 .page-oddlings .od-hud-count strong{font-size:24px}
 .page-oddlings .od-next-piece{width:58px;height:58px}
}
@media(max-height:780px){
 .od-next-piece{width:38px;height:38px}
 .od-hud-count strong{font-size:19px}
 .od-status{margin-top:5px}
}
@media(max-width:700px){
 .page-oddlings{--od-board-height:var(--tg-game-visual-size,350px)}
 .od-hud{width:min(100%,278px)}
}
@media(prefers-reduced-motion:reduce){.od-board{scroll-behavior:auto}}

/* Outside the container is still a valid drop target during a run.
   Restrict the crosshair to the live game page; real controls keep theirs. */
body.float-ui .app-shell:not(.admin-mode)
 .page-oddlings:has(.tg-game-play:not([hidden])){
 cursor:crosshair;
}
body.float-ui .app-shell:not(.admin-mode)
 .page-oddlings:has(.tg-game-play:not([hidden]))
 :is(.float-leader-panel,.tg-game-actions,.float-dialog){
 cursor:default;
}
body.float-ui .app-shell:not(.admin-mode)
 .page-oddlings:has(.tg-game-play:not([hidden]))
 :is(.float-leader-ribbon,a,button,[role="button"]:not(canvas)){
 cursor:pointer;
}
body.float-ui .app-shell:not(.admin-mode)
 .page-oddlings:has(.tg-game-play:not([hidden]))
 :is(input,textarea,select,[contenteditable="true"]){
 cursor:text;
}

/* Final board - scale the captured artwork without disturbing result actions. */
.page-oddlings .od-result-snapshot{
 appearance:none;display:flex;align-items:center;justify-content:center;
 position:relative;box-sizing:border-box;width:100%;min-width:0;
 flex:0 1 auto;margin:3px 0 0;min-height:0;
 padding:0;border:0;background:transparent;cursor:pointer;
}
.page-oddlings .od-result-snapshot::after{
 content:'Share ↗';position:absolute;right:calc(50% - min(50%,115px));
 bottom:8px;pointer-events:none;
 font-size:11px;font-weight:750;padding:5px 9px;border-radius:9px;
 color:var(--text);background:var(--surface);border:1px solid var(--line);
 opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;
}
.page-oddlings .od-result-snapshot:hover::after,
.page-oddlings .od-result-snapshot:focus-visible::after{
 opacity:1;transform:translateY(0);
}
.page-oddlings .od-result-snapshot:focus-visible{outline:2px solid var(--text);outline-offset:5px;border-radius:12px}
.page-oddlings .od-final-snapshot{pointer-events:none}
@media (hover:none){.page-oddlings .od-result-snapshot::after{display:none}}
@media (prefers-reduced-motion:reduce){
 .page-oddlings .od-result-snapshot::after{transition:none}
}
.page-oddlings .od-result-snapshot[hidden]{display:none!important}
.page-oddlings .od-final-snapshot{
 display:block;width:auto;height:min(35dvh,340px);max-width:100%;object-fit:contain;
 border-radius:12px;border:2px solid var(--od-stage-border);
 box-shadow:0 8px 22px rgba(30,27,43,.10)
}
@media(max-height:780px){
 .page-oddlings .od-final-snapshot{height:min(29dvh,235px)}
}
@media(max-width:700px){
 .page-oddlings .od-final-snapshot{height:min(32dvh,295px)}
}

/* Dense splash illustration follows the same colour scheme as the actual
   game board. Only the characters and composition remain consistent. */
.page-oddlings .od-board-preview{
 background:var(--od-stage-bg);border-color:var(--od-stage-border);
 box-shadow:0 12px 25px rgba(27,23,38,.12);
}
:root[data-theme="dark"] .page-oddlings .od-board-preview{
 box-shadow:0 12px 25px rgba(0,0,0,.20);
}
/* The game's actual canvas art is animated in the shared help dialog. */
.tg-game-help-dialog .tg-help-art[data-example="oddlings"] .od-help-canvas{
 display:block;width:260px;max-width:100%;height:auto;aspect-ratio:26/15;
 margin-inline:auto;border-radius:12px;background:#292833
}
.tg-game-help-dialog .tg-help-art[data-example="oddlings"] .tg-help-demo-caption{
 margin:8px auto 0;text-align:center;color:var(--muted);
 font-size:12px;font-weight:700
}

/* The actual 11-tier evolution sequence stays in ONE responsive row. */
.tg-game-help-dialog .tg-help-art[data-example="oddlings"]{
 display:flex;flex-direction:column;justify-content:center;gap:5px;
 padding:10px 12px;min-width:0;
}
.tg-game-help-dialog .tg-help-art[data-example="oddlings"] .od-help-canvas{
 background:var(--od-stage-bg);flex:none;
}
.tg-game-help-dialog .tg-help-art[data-example="oddlings"] .od-help-evolution-label{
 font-size:10px;line-height:14px;font-weight:750;letter-spacing:.04em;
 color:var(--muted);text-align:center;margin:4px 0 0;
}
.tg-game-help-dialog .tg-help-art[data-example="oddlings"] .od-help-evolution{
 display:block;flex:none;box-sizing:border-box;
 width:min(100%,440px);max-width:100%;height:auto;aspect-ratio:22/3;
 margin:0 auto;object-fit:contain;
}