/* GGrid Theme Skin v1 – shared look of the optional spec v5.5 presentation features.
   js/theme-skin.js sets the body classes and --skin-* variables from theme.json; a theme needs no
   CSS of its own for these. Selectors start with "html body" so they win over the usual
   body[data-scene=…] theme rules; the engine's freeze/bomb state rules are matched explicitly. */

/* ---------- one continuous floor (board.surface) with per-cell overlays (board.cellBevel) ---------- */
html body.skin-board-surface .board{background:var(--skin-board-surface) center/cover no-repeat,var(--skin-board-color,#3a3a3a)!important}
html body.skin-board-surface .board .cell{margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important}
html body.skin-board-surface.skin-cell-bevel .board .cell{background:var(--skin-cell-bevel) center/100% 100% no-repeat!important}
/* floor variants are alternative overlays on the same surface */
html body.skin-board-surface .board .cell.sr-asset-visual{background:var(--sr-asset-image) center/100% 100% no-repeat!important}

/* ---------- one bar for the whole top row (ui.topbar) ---------- */
html body.skin-topbar-bar.layout-pad .pad-top{gap:0;padding:0 8px;border:0 solid transparent;border-image:var(--skin-topbar) var(--skin-topbar-slice) fill / var(--skin-topbar-width) stretch}
html body.skin-topbar-bar.layout-pad .pad-top .pad-stat,
html body.skin-topbar-bar.layout-pad .pad-top-menu #gameMenu{background:none!important;border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important}
html body.skin-topbar-bar.layout-pad .pad-top .pad-stat{border-left:1px solid var(--skin-topbar-divider,color-mix(in srgb,var(--ui-text,#fff) 30%,transparent))!important;margin:6px 0;overflow:visible}
html body.skin-topbar-bar.skin-topbar-inline.layout-pad .pad-top .pad-stat{flex-direction:row;align-items:baseline;gap:6px}
html body.skin-topbar-bar.skin-topbar-inline.layout-pad .pad-top .pad-stat small{font-size:13px}
/* label and value on one line only where it fits (tablets, desktop); phones keep two lines */
@media(max-width:479px){html body.skin-topbar-bar.skin-topbar-inline.layout-pad .pad-top .pad-stat{flex-direction:column;align-items:center;gap:0}}

/* ---------- the control bar carved from one piece (ui.deck + ui.deck.well) ---------- */
html body.skin-carved-deck.layout-pad .pad-deck{border:0 solid transparent!important;background:none!important;border-image:var(--skin-deck) var(--skin-deck-slice) fill / var(--skin-deck-width) / var(--skin-deck-outset) stretch!important}
/* every button is a carved well: a ring with a transparent centre, the tray material shows through */
html body.skin-carved-deck.layout-pad .pad-deck .pad-dir,
html body.skin-carved-deck.layout-pad .pad-deck .play-action,
html body.skin-carved-deck.layout-pad .pad-deck #freeze.play-action,
html body.skin-carved-deck[data-ui-context="game"] main .pad-deck #freeze.freeze-action[data-freeze-state],
html body.skin-carved-deck[data-ui-context="game"] main .pad-deck #bomb[data-bomb-state]{background:none!important;border-style:solid!important;border-color:transparent!important;border-radius:0!important;box-shadow:none!important;
 border-image:var(--skin-well) var(--skin-well-slice) / var(--skin-well-width) stretch!important}
html body.skin-carved-deck.layout-pad .pad-deck .pad-dir:active,html body.skin-carved-deck.layout-pad .pad-deck .pad-dir.pressed,
html body.skin-carved-deck.layout-pad .pad-deck .play-action:active,html body.skin-carved-deck.layout-pad .pad-deck .play-action.pressed,
html body.skin-carved-deck.layout-pad .pad-deck .play-action[aria-pressed="true"],
html body.skin-carved-deck[data-ui-context="game"] main .pad-deck #freeze.freeze-action[data-freeze-state="active"],
html body.skin-carved-deck[data-ui-context="game"] main .pad-deck #bomb[data-bomb-state="active"]{border-image-source:var(--skin-well-pressed)!important;filter:none!important}
/* an armed Freeze / BOMB still shows it: a ring of the accent colour inside the well */
html body.skin-carved-deck[data-ui-context="game"] main .pad-deck #freeze.freeze-action[data-freeze-state="active"],
html body.skin-carved-deck[data-ui-context="game"] main .pad-deck #bomb[data-bomb-state="active"]{box-shadow:inset 0 0 0 2px var(--ui-accent,#ffd76a),inset 0 0 14px color-mix(in srgb,var(--ui-accent,#ffd76a) 55%,transparent)!important}
html body.skin-carved-deck[data-ui-context="game"] main .pad-deck #freeze.freeze-action[data-freeze-state="unavailable"],
html body.skin-carved-deck[data-ui-context="game"] main .pad-deck #bomb[data-bomb-state="unavailable"]{opacity:.5!important;filter:saturate(.3)!important}

/* ---------- spec v5.7 view: the board leans back (view.tilt) ---------- */
/* The board wrap (floor, pieces, exit and the frame drawn on the wrap) leans back around its bottom
   edge. The tilt feedback of motion control and the blocked bump stay on .board inside it, so they
   still play. The victory card lives in the wrap too: the board lies flat while it is shown. */
html body.skin-tilt main .board-wrap{transform:perspective(var(--skin-perspective,1200px)) rotateX(var(--skin-tilt,0deg));transform-origin:50% 100%;transition:transform .3s ease}
html body.skin-tilt.victory-state main .board-wrap{transform:none}
@media(prefers-reduced-motion:reduce){html body.skin-tilt main .board-wrap{transition:none}}

/* ---------- spec v5.7 view: raised pieces (view.raised) ---------- */
/* The art element of every piece and body (not the ball) reaches --skin-raise of a cell above its
   cells: the painted top face sits there, the front face on the cells. It never takes clicks – the
   click area stays the cells, so the spill over the row behind does not steal its taps.
   Stacking by row is set inline by the scene renderer (ThemeSkin.raisedZ). */
html body.skin-raised .board .piece:not(.ball)>*,
html body.skin-raised .board .sr-composite>*{top:calc(var(--skin-raise) * -100% / var(--sr-shape-rows,1))!important;bottom:0!important;height:auto!important;pointer-events:none}

/* ---------- wide screens: the portrait theme background in its own width, black around ---------- */
/* Theme backgrounds are painted for phones (720×1560); stretched over a desktop monitor they turn
   blurred and huge. On a wide window the picture keeps a phone-like width (at least the screen
   height), sits at the top, and the rest is black. Phones and portrait tablets keep "cover". */
@media (min-width:760px) and (min-aspect-ratio:4/5){
 html body[data-scene]:not([data-scene=""]){background-color:#000!important;background-size:max(720px,calc(100vh * 720 / 1560)) auto!important;background-position:center top!important;background-repeat:no-repeat!important}
}

/* ---------- one light for the whole scene (light) ---------- */
html body.skin-lit .board .piece:not(.sr-composite-source)>*,
html body.skin-lit .board .sr-composite>*{filter:drop-shadow(var(--skin-shadow-x) var(--skin-shadow-y) var(--skin-shadow-blur) var(--skin-shadow-color))}
html body.skin-lit main .board-wrap{box-shadow:var(--skin-drop-x) var(--skin-drop-y) var(--skin-drop-blur) var(--skin-drop-color)!important}
/* bars follow the alpha of their pictures, so a drop-shadow filter hugs rounded or carved edges */
html body.skin-lit.layout-pad .pad-deck,
html body.skin-lit.skin-topbar-bar.layout-pad .pad-top{filter:drop-shadow(calc(var(--skin-drop-x) * .6) calc(var(--skin-drop-y) * .6) calc(var(--skin-drop-blur) * .6) var(--skin-drop-color))}
html body.skin-lit.layout-pad:not(.skin-topbar-bar) .pad-top .pad-stat,
html body.skin-lit.layout-pad:not(.skin-topbar-bar) .pad-top-menu #gameMenu{box-shadow:calc(var(--skin-drop-x) * .4) calc(var(--skin-drop-y) * .4) calc(var(--skin-drop-blur) * .5) var(--skin-drop-color)!important}