/* Skinned page furniture (from the Nick Challenge library's plaque-style games): a top row with a round menu button and
   the game's logo, stat plaques. Colours come from the theme (js/themes.js sets the --skin-* variables); css/game.css
   reshapes most of it for Territory's board. */
.column { width: min(100%, 560px); height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
/* top row: menu, the game sign, the platform logo */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.round-btn { width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--skin-frame); background: var(--skin-panel); color: var(--skin-text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2); flex: none; }
.round-btn svg { width: 24px; height: 24px; }
.plaque-logo { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.plaque-logo img { height: 66px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.plaque-logo img[hidden] { display: none; } .plaque-logo img:not([hidden]) + b { display: none; }
.plaque-logo b { font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 900; line-height: 1.1; color: var(--skin-accent); -webkit-text-stroke: 1.5px rgba(0,0,0,.45); text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.5); }
/* stat plaques */
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.splaque { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 12px; background: var(--skin-panel); border: 2px solid var(--skin-frame); color: var(--skin-text); box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18); min-width: 0; }
.splaque__icon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: rgba(0,0,0,.35); color: var(--skin-accent); display: grid; place-items: center; }
.splaque__icon svg { width: 22px; height: 22px; }
.splaque div { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.splaque span { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; opacity: .8; white-space: nowrap; }
.splaque b { font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* actions */
.actions-row { display: grid; grid-template-columns: 44px 1fr 1fr 1fr 44px; gap: 8px; align-items: center; }
.abtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 14px; border: 2px solid var(--skin-frame); background: var(--skin-panel); color: var(--skin-text); font: inherit; font-size: 15px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.abtn svg { width: 20px; height: 20px; }
.abtn--dark { background: linear-gradient(180deg, #2a3442, #161d27); border-color: rgba(255,255,255,.2); color: #fff; }
.abtn--hint { background: linear-gradient(180deg, #ffd766, #f5a623); color: #1a1100; border-color: #ffe9a8; }
.abtn--round { width: 44px; height: 44px; border-radius: 50%; padding: 0; font-size: 22px; background: rgba(0,0,0,.35); }
.abtn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.abtn[disabled] { opacity: .35; cursor: default; }
html[data-mood="cartoon"] .splaque, html[data-mood="cartoon"] .round-btn { border-width: 3px; }
html[data-mood="steel"] .splaque, html[data-mood="steel"] .abtn, html[data-mood="steel"] .round-btn { border-radius: 0; }
html[data-mood="chalk"] .splaque { border-style: dashed; }
@media (min-width: 900px) { .column { width: min(100%, 600px); } }
@media (max-height: 760px) { .column { gap: 6px; } .plaque-logo img { height: 54px; } .round-btn { width: 42px; height: 42px; } .splaque { padding: 5px 7px; gap: 6px; } .splaque__icon { width: 28px; height: 28px; } .splaque__icon svg { width: 18px; height: 18px; } .splaque span { font-size: 8.5px; } .splaque b { font-size: .95rem; } .abtn { height: 40px; font-size: 13px; } .abtn--round { width: 38px; height: 38px; } }
@media (max-width: 420px) { .statrow { gap: 4px; } .splaque { padding: 5px 5px; gap: 4px; border-radius: 10px; } .splaque__icon { width: 24px; height: 24px; border-radius: 7px; } .splaque__icon svg { width: 16px; height: 16px; } .splaque span { font-size: 8px; letter-spacing: .08em; } .splaque b { font-size: .9rem; } .abtn { font-size: 12px; gap: 5px; } .abtn svg { width: 16px; height: 16px; } }