/* The playable games have their own small, self-contained interface. */
.game-backline { max-width:1240px; margin:auto; color:var(--muted); }
.game-backline a { color:var(--orange); text-decoration:none; }
.play-page .name-stage, .play-page .rpg-shell { margin:auto; }
.game-view { min-width:0; }
[hidden] { display:none!important; }
.name-stats { display:flex; justify-content:space-between; gap:12px; padding-bottom:15px; border-bottom:1px solid #bec4bb; }
.name-clue { min-height:62px; margin:22px 0; }
.guess-grid { display:grid; gap:6px; }
.guess-row { display:flex; justify-content:center; gap:4px; }
.letter-tile { flex:1 1 0; max-width:46px; min-width:0; aspect-ratio:4/5; display:grid; place-items:center; border:1px solid #b4bdb1; background:white; font:600 clamp(14px,3vw,25px) var(--type); }
.letter-tile.absent { background:#414943; border-color:#414943; color:white; }
.name-board form { margin-top:22px; }
.name-board label { display:block; margin-bottom:7px; }
.name-board form>div { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.name-board input { min-width:0; height:52px; padding:10px; border:1px solid #566058; background:white; color:var(--ink); text-transform:uppercase; }
.name-board form button, .next-name { padding:10px 17px; border:0; cursor:pointer; }
#name-message { min-height:48px; margin-top:14px; color:#4c554e; }
.next-name { width:100%; margin-top:12px; }
.rpg-game { overflow:hidden; background:var(--ink); color:var(--paper); }
.rpg-topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px; border-bottom:1px solid var(--line); }
.rpg-topbar button { padding:8px 12px; border:1px solid; background:transparent; }
.rpg-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); border-bottom:1px solid var(--line); }
.rpg-world canvas { display:block; width:100%; height:auto; image-rendering:pixelated; }
.rpg-location { display:flex; justify-content:space-between; gap:12px; color:var(--muted); border-top:1px solid var(--line); }
.rpg-location b { color:var(--paper); }
.rpg-hud { padding:18px 20px; border-left:1px solid var(--line); }
.rpg-hud-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px solid #505b53; color:var(--muted); }
.rpg-hud-head b { color:var(--orange); }
.rpg-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; padding:18px 0; border-bottom:1px solid #505b53; }
.rpg-stats span { display:grid; gap:5px; color:var(--muted); }
.rpg-stats span:nth-child(3) strong { color:var(--orange); }
.rpg-progress { padding:16px 0; display:grid; gap:8px; color:var(--muted); border-bottom:1px solid #505b53; }
.rpg-progress div { height:7px; background:#4b584e; }
.rpg-progress i { display:block; height:100%; transition:width .25s; }
.rpg-crew { padding:15px 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; color:var(--muted); }
.rpg-crew b { color:var(--paper); }
.rpg-message { margin:0; color:#d2d6cf; }
.rpg-command-head { display:flex; justify-content:space-between; gap:15px; padding:14px 18px; border-bottom:1px solid var(--line); }
.rpg-command-head b { font-weight:400; color:var(--muted); }
.rpg-actions { padding:18px; }
.rpg-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.rpg-action-column { display:grid; align-content:start; gap:9px; min-width:0; }
.rpg-label { color:var(--muted); margin-bottom:4px; }
.rpg-label-deal { margin-top:18px; }
.rpg-action { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid #4d5a50; background:#232d27; color:var(--paper); text-align:left; }
.rpg-action:hover:not(:disabled) { background:#303c33; }
.rpg-action:disabled { opacity:.45; cursor:not-allowed; }
.rpg-action span { min-width:0; display:grid; gap:6px; }
.rpg-action small { color:#b6c0b8; }
.rpg-action strong { flex-shrink:0; text-align:right; }
.rpg-action strong i { display:block; margin-top:5px; font-style:normal; }
.rpg-primary:hover:not(:disabled) { background:var(--paper); }
.rpg-encounter { display:grid; gap:20px; }
.rpg-encounter>span, .rpg-end>span { color:var(--orange); font:400 13px/1.5 var(--type); }
.rpg-encounter h2, .rpg-end h2 { max-width:820px; }
.rpg-encounter>div { display:flex; gap:12px; }
.rpg-end { display:grid; gap:18px; }
.rpg-end strong { font:600 clamp(36px,5vw,64px)/1.2 var(--type); color:var(--orange); }
.rpg-end p { color:var(--muted); }
.rpg-end .rpg-action { max-width:290px; }
.rpg-log { display:grid; gap:6px; padding:16px 18px; border-top:1px solid var(--line); color:var(--muted); background:#101713; }
.play-page .rpg-shell>header { display:block; margin-bottom:22px; }
.play-page .rpg-shell>header h1 { font:600 clamp(27px,3.5vw,42px)/1.15 var(--type); letter-spacing:-.025em; }
.play-page .rpg-shell>header h1 br { display:none; }
.play-page .rpg-shell>header h1 i { font:inherit; color:var(--orange); }
.play-page .rpg-shell>header p { font:400 12px/1.5 var(--type); color:var(--muted); margin-bottom:10px; }
.play-page .rpg-shell>header>span { display:block; font-size:17px; color:var(--muted); margin-top:10px; max-width:700px; }
@media(max-width:600px) {
  .rpg-actions { padding:13px; }
  .rpg-command-head { padding:14px 13px; flex-wrap:wrap; }
  .rpg-hud { padding:14px; }
  .rpg-log { padding:14px; }
  .letter-tile { font-size:clamp(13px,3.6vw,21px); }
}