/* The «layers of bones» games (EP-054.T-05, T-06): «Разбор завала» and «Сбор уцелевшего». Look A «plate», the
   owner's choice (28.10.2026): the floor (RB03-v2, dark, vivid green) is a plate in the island's night sky, not
   darkened, never stretched – one repeat is GAMES.floor.texW wide (stage.js); on a phone it fills the screen. */
/* the panel holding the screen over the island (scenes/games/screen.js, К-31); a lore sign covers it */
.game-screen { position: fixed; inset: 0; z-index: var(--z-game); }
.game-screen > .game-root { height: 100%; }
.game-screen:focus { outline: none; }
.game { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 0; overflow: hidden; color: var(--parchment); background: var(--sky-top); }

/* behind everything: the night sky of the island */
.game-back { position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%); }
.game-back .stars { position: absolute; right: 0; top: 0; }
.game-back .stars.twinkle { animation: twinkle var(--t-twinkle) var(--ease-twinkle) infinite alternate; }
.game-back .clouds { position: absolute; left: calc(-1 * var(--tile, 941px)); right: calc(-1 * var(--tile, 941px)); bottom: 0;
  background: url(../assets/sky/clouds.webp) right bottom / auto 100% repeat-x;
  animation: drift-right var(--t-drift-clouds) var(--ease-drift) infinite; opacity: .9; }
.game-floor { background: #2a2420 center top repeat;
  background-image: image-set(url('../assets/games/rubble/floor-768.webp') 1x, url('../assets/games/rubble/floor.webp') 2x); }

/* the column of the screen: capped on a big screen (GAMES.stage, set by stage.js), centred */
.game-stage { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0 auto; }
.game-plate { position: absolute; z-index: 0; pointer-events: none; }
.game-plate .game-floor { position: absolute; inset: 0; }
.game-stage > :not(.game-plate) { position: relative; z-index: 1; }

.game-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 14px 4px; }
.game-plate.fill ~ .game-head { background: linear-gradient(rgba(15, 22, 51, .85), rgba(15, 22, 51, 0)); }
.game-title { margin: 0; font-family: var(--font-display); font-size: 20px; color: var(--brass-hi); }
.game-kind { margin: 0; font-size: 13px; color: var(--field); opacity: .9; }
/* the middle: the board hugs its pile (stage.js fitBoard) and the column centres it with the tray under it */
.game-mid { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-height: 0; margin: 4px 8px;
  padding: var(--plate-room, 0px); overflow: auto; }
.game-board { position: relative; flex: 1 1 auto; min-height: 0; }
.game-board.fit { flex: none; }
.game-board .tile { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10%; }
.game-board .tile img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.game-board .tile:disabled { cursor: default; }
.game-board .tile:not(.free) img { filter: brightness(.62) saturate(.8); }
.game-board .tile.free:hover img { filter: brightness(1.08); }
.game-board .tile.selected { outline: 3px solid var(--glow); outline-offset: -2px; box-shadow: 0 0 14px var(--glow); }
.game-board .tile:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: -2px; }
.game-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 14px 12px; font-size: 14px; }
.game-plate.fill ~ .game-foot { background: linear-gradient(rgba(15, 22, 51, 0), rgba(15, 22, 51, .9)); }
.game-foot p { margin: 0; }
.game-count { font-weight: 700; color: var(--field); }
.game-wait { color: var(--brass-hi); }
.game-finish { margin-left: auto; color: var(--field); box-shadow: inset 0 0 0 2px rgba(243, 226, 190, .45); }
.game-finish:disabled { opacity: .5; cursor: default; }

/* the tray: the art of SV02, the places of geometry.json; a tile in its recess as variant B (owner 28.10.2026) –
   its size and perspective are computed for the place (salvage.js trayTile, GAMES.tray) */
.tray { position: relative; flex: none; width: min(100%, 420px); margin: 10px auto 0; }
.tray-art { display: block; width: 100%; height: 100%; }
.tray-slots { position: absolute; inset: 0; }
.tray-slot { position: absolute; translate: -50% -50%; display: flex; align-items: flex-end; justify-content: center; }
.tray-slot img { flex: none; object-fit: fill; transform-origin: 50% 100%; }

/* over the sky the lines and the button keep their contrast on light clouds */
.game-head, .game-foot { text-shadow: 0 1px 3px rgba(8, 10, 24, .9); }
.game-finish { background: rgba(15, 22, 51, .55); }

/* EP-058: the game's content is replaced, never stacked with another panel. */
.game-flow[hidden], .game-root[hidden] { display: none; }
.game-flow { position:absolute;inset:0;overflow:auto;display:grid;align-items:safe center;justify-items:center;padding:24px 16px;background:linear-gradient(var(--sky-top),var(--sky-low)); }
.game-flow-frame {position:relative;width:min(100%,488px);animation:game-result-in var(--t-game-result) var(--ease-game-out);}
.game-flow-panel {position:relative;width:100%;padding:22px;color:var(--ink);--ek-icon-accent:var(--carve);}
.game-flow-panel:focus { outline:2px solid var(--brass);outline-offset:4px; }
.game-flow-panel p { margin:10px 0; }
.game-flow-title {display:flex;align-items:start;gap:8px;margin:0 0 12px;font:700 23px/1.25 var(--font-display);color:var(--ink-title);}
.game-flow-title .ico {flex:none;width:23px;height:23px;color:var(--carve);margin-top:2px;}
.game-flow-kicker,.game-flow-label { text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:#78502b; }
.game-flow-rule { font-size:15px;line-height:1.5; }
.game-flow-score { display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid #9877454d;padding-bottom:14px; }
.game-flow-score strong { font:42px Philosopher,serif; }
.game-flow-value { font:30px Philosopher,serif;background:#f9efcf;border-left:3px solid #a77d39;padding:14px 16px; }
.game-flow-meta { font-size:13px;line-height:1.5;color:#71573d; }
.game-flow-panel > button:not(.sign-close) { display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;white-space:normal;margin-top:10px;color:#51351c; }
.game-rule-example { display:flex;justify-content:center;gap:8px;padding:12px;border-radius:8px;background:#d5c4a0; }
.game-rule-example img { width:52px;height:56px;object-fit:contain; }
.game-rule-example .ico { width:32px;height:44px; }
.game-rule-example.played > * { animation:game-example var(--t-dispel-clear) var(--ease-game-out); }
.game-rules { display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:44px; }
.game-result-mask { display:grid;grid-template-columns:repeat(10,1fr);gap:1px;width:160px;aspect-ratio:1;margin:14px auto;background:#bdb194; }
.game-result-mask i { background:#decda2; }.game-result-mask i.ink { background:#544931; }
@keyframes game-result-in { from {opacity:0;transform:translateY(var(--kf-game-lift-px));} to {opacity:1;transform:translateY(0);} }
@keyframes game-example { to {opacity:0;transform:translateY(calc(-1 * var(--kf-game-lift-px)));} }
@container play (max-width:600px) { .game-flow-panel {padding:20px;}.game-flow-title{font-size:21px;}.game-flow-rule{font-size:14px;} }
@media(prefers-reduced-motion:reduce) { .game-flow-frame,.game-rule-example.played > * {animation:none;} }
.example-blueprint {display:grid;grid-template-columns:repeat(5,32px);gap:4px;}
.example-blueprint .example-clue {grid-column:1/-1;text-align:center;color:#493521;}
.example-blueprint i,.example-masonry i {display:block;aspect-ratio:1;background:#e9ddb9;border:1px solid #8d7953;}
.example-blueprint i.ink,.example-masonry i.ink {background:#645239;}
.example-masonry {display:grid;grid-template-columns:repeat(6,26px);gap:3px;}
.example-seal {display:grid;grid-template-columns:repeat(6,1fr);gap:2px;}
.example-seal span {height:44px;border-bottom:1px solid #947749;}
.example-dispel {display:grid;grid-template-columns:repeat(3,52px);gap:4px;}
.example-dispel .example-fog {grid-column:2;}
.game-rule-example.played > * {animation:none;}
.example-rubble.played .example-piece,.example-salvage.played .example-piece,.example-dispel.played .example-piece,.example-masonry.played i:nth-child(-n+6) {animation:game-example var(--t-game-example) var(--ease-game-out) forwards;}
@media(prefers-reduced-motion:reduce) { .game-rule-example.played > * {animation:none!important;} }
/* Keep the close control's corner free in all six headers, including narrow panels. */
.game-head {display:grid;grid-template-columns:minmax(0,1fr) auto;padding-right:56px;align-items:center;}
.game-head .game-title {grid-column:1;grid-row:1;}
.game-head .game-kind {grid-column:1;grid-row:2;}
.game-head .game-rules {grid-column:2;grid-row:1/3;}
.game-rules,.game-shuffle {color:var(--field);background:rgba(15,22,51,.75);box-shadow:inset 0 0 0 1px rgba(243,226,190,.45);}
.game-shuffle:disabled {opacity:.55;}
.game-rules .ico,.game-shuffle .ico {color:var(--field);}
.example-blueprint.played i.ink {animation:game-example-ink var(--t-game-example) steps(var(--steps-game-example),end) both;}
.example-seal.played .changed {animation:game-example-rune var(--t-game-example) var(--ease-game-out) both;}
@keyframes game-example-ink {from {background:#e9ddb9;} to {background:#645239;} }
@keyframes game-example-rune {from {opacity:0;transform:scale(0);} to {opacity:1;transform:scale(1);} }
@media(prefers-reduced-motion:reduce) { .example-blueprint.played i.ink,.example-seal.played .changed {animation:none;} }

.game-result-art {display:block;width:160px;max-width:100%;aspect-ratio:1;object-fit:contain;margin:14px auto;}

/* EP-059: accepted A. The actions retain their words; the brass medallions use library icons. */
.game-head {grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:12px 58px 4px 14px;}
.game-head .game-title {white-space:normal;overflow-wrap:anywhere;min-width:0;}
.game-actions {display:flex;gap:8px;flex-wrap:wrap;grid-column:2;grid-row:1/3;}
.game-actions .game-rules {grid-column:auto;grid-row:auto;}
.game-action {display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;min-height:46px;max-width:100%;white-space:normal;border-radius:10px;font:700 14px var(--font-ui);color:#ffe7ae;border:1px solid #be9454;background:linear-gradient(#735032,#4d341f);box-shadow:inset 0 1px #f1cb884a,inset 0 -3px #28190b66,0 2px 3px #0006;text-shadow:none;}
.game-action-mark {display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;color:#5c3d20;background:radial-gradient(circle at 36% 28%,#ffe6a1,#bf8d3e);box-shadow:inset 0 1px #fff0c9,inset 0 -2px #815022,0 1px 2px #24190dcc;}
.game-action .game-action-mark .ico {width:21px;height:21px;color:inherit;}
.game-action:focus-visible {outline:3px solid #fff0a2;outline-offset:3px;}
.game-action:disabled {opacity:.5;cursor:default;}
.game-action:active:not(:disabled) {box-shadow:inset 0 2px 4px #24160899;translate:0 1px;}
.game-participant {display:flex;align-items:center;gap:10px;flex:none;margin:4px 14px 8px;padding:8px 12px;border:1px solid #ad8a5559;border-radius:10px;background:#111a30e8;color:#ecd8b3;text-shadow:none;}
.game-participant-face {position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;overflow:hidden;border:1px solid #ac8b53;border-radius:50%;background:#302a23;}
.game-participant-face[hidden] {display:none;}
.game-participant-face img {width:100%;height:100%;object-fit:contain;}
.game-participant-face .ico {width:28px;height:28px;}
.game-participant-words {display:flex;flex-direction:column;gap:2px;min-width:0;}
.game-participant-words strong {font:700 16px var(--font-display);}
.game-participant-words small {font-size:12px;line-height:1.3;}
.game-counters {display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;flex-basis:100%;font-variant-numeric:tabular-nums;}
.game-foot {flex:none;gap:10px;padding:12px 14px;background:#111a30e8;border-top:1px solid #ad8a5559;}
.game-foot .game-finish {margin-left:auto;}
.game-dialog-sky {position:absolute;inset:0;pointer-events:none;display:none;}
.game-screen:not([data-flow=""]) .game-dialog-sky {display:block;}
.game-screen .game-flow {background:transparent;}
.game-moon.moon {--moon-w:88px;--moon-top:84px;--moon-right:26px;position:absolute;right:var(--moon-right);top:var(--moon-top);width:var(--moon-w);}
.game-flow-panel .game-participant {margin:12px 0;background:#e9d8ad;color:#493521;border-color:#9877454d;}
@container play (max-width:600px) {
 .game-head {grid-template-columns:minmax(0,1fr);padding-right:56px;}
 .game-head .game-title {grid-column:1;grid-row:1;}
 .game-actions {grid-column:1;grid-row:2;}
 .game-head .game-kind {grid-row:3;}
 .game-flow {padding:118px 14px 20px;align-items:safe start;}
 .game-moon.moon {--moon-w:76px;--moon-top:18px;--moon-right:58px;}
 .game-foot {padding:10px;gap:8px;}
 .game-participant {margin-inline:10px;}
}

.game-flow-panel .game-flow-title {padding-right:32px;}