:root{color-scheme:dark;font-family:Georgia,serif;color:#e8dcc5;background:#101717}*{box-sizing:border-box}body{margin:0;background:linear-gradient(90deg,#101717ed,#101717db),url('/images/stories/Gavid,%20Zelnard%20and%20Jabar.png') center/cover fixed}main{max-width:1500px;height:100dvh;min-height:570px;margin:auto;padding:16px;display:grid;grid-template-rows:28px minmax(0,1fr);gap:10px}nav{display:flex;justify-content:space-between;align-items:center;gap:12px;font:10px system-ui;letter-spacing:1px;color:#a8997e}a{color:#cfbb96;text-decoration:none}.layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;min-height:0}.arena,aside{border:1px solid #8f77514d;background:#141d1eea;border-radius:14px;min-height:0}.arena{display:flex;flex-direction:column;overflow:hidden}.score{display:flex;justify-content:space-between;padding:14px 20px;font:12px system-ui;color:#acae9f}.score b{font:bold 22px Georgia;color:#ead6a9;margin-right:5px}#board-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}canvas{display:block;touch-action:none;max-width:100%}#message{padding:10px 18px;margin:0;font:12px/1.5 system-ui;color:#dbcba9;min-height:56px}aside{padding:18px;display:flex;flex-direction:column;gap:14px}header{margin-bottom:auto}.eyebrow{font:9px system-ui;letter-spacing:3px;color:#c4a776;margin:0 0 8px}h1{font-size:29px;line-height:1.1;font-weight:normal;margin:0}h1 em{color:#dfbd80}.goal{font:12px/1.5 system-ui;color:#adb9ae;margin:10px 0 0}button,select{font:12px system-ui;border:1px solid #a48c5c55;background:#24302f;color:#e8dcc5;border-radius:7px;padding:10px;min-height:40px;cursor:pointer}button:hover{background:#344240}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #f0ce81;outline-offset:3px}button:disabled{opacity:.4;cursor:default}button[aria-pressed=true]{border-color:#dab773;background:#4b4432}small{display:block;font-size:9px;color:#b8c4bb;margin-top:5px}.elements{display:flex;gap:5px}.elements button{flex:1;padding:10px 2px}.elements small{min-height:22px}label{display:block;font:11px system-ui;color:#c0b796;margin:10px 0 5px}output{float:right}input[type=range]{width:100%;height:28px;margin:0;accent-color:#ddba78}select{width:100%}.meter{height:28px;background:#0c1213;border:1px solid #786443;border-radius:5px;position:relative;overflow:hidden;margin:10px 0}#fill{height:100%;width:50%;background:linear-gradient(90deg,#527572,#d7b675)}.meter span{position:absolute;inset:0;display:grid;place-items:center;font:bold 11px system-ui;text-shadow:0 1px 4px #000}.primary{width:100%;background:#d0b079;color:#192220;font-weight:bold;touch-action:none;user-select:none}.primary:hover{background:#e4c78e}.bottom{display:flex;gap:5px;margin-top:auto}.bottom button{flex:1;padding:8px 4px;font-size:11px}#save-score{width:100%;margin-top:6px}dialog{color:#e8dcc5;background:#172526;border:1px solid #9b7c4c;border-radius:14px;max-width:540px;width:calc(100% - 32px);max-height:85dvh;padding:25px;font:14px/1.65 system-ui}dialog::backdrop{background:#000a}dialog h2{font:28px Georgia;margin:0 0 20px}.close{float:right}.keyboard{color:#b4c2bb;font-size:12px}dialog li{margin:9px 0}@media(max-width:700px){main{padding:10px;min-height:700px;grid-template-rows:24px minmax(0,1fr);gap:6px}.layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px}aside{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px}header .eyebrow,.goal{display:none}h1{font-size:21px}h1 br{display:none}h1 em{margin-left:5px}.play-controls{grid-column:1}.cast-controls{grid-column:2}.bottom{grid-column:1/-1}.score{padding:8px 14px}.score b{font-size:18px}#message{font-size:11px;min-height:44px;padding:6px 12px}nav{font-size:9px;letter-spacing:0}label{margin-top:5px}.meter{margin:6px 0}.elements small{font-size:8px}}@media(min-width:701px) and (max-height:650px){main{padding:10px;min-height:530px}aside{padding:12px;gap:8px}h1{font-size:24px}.goal{display:none}header{margin:0}.elements button{padding:6px 2px}.score{padding:8px 18px}}
/* Keep the return control easy to spot and tap. */
nav > a{font:700 13px system-ui;letter-spacing:0;padding:7px 12px;border:1px solid #a48c5c77;border-radius:7px;background:#182625;color:#ecd6ad;white-space:nowrap}
nav > a:hover{background:#344240;border-color:#d0b079}
nav > a:focus-visible{outline:2px solid #f0ce81;outline-offset:3px}
main{grid-template-rows:38px minmax(0,1fr)}
@media(max-width:700px){main{grid-template-rows:38px minmax(0,1fr)}nav > a{font-size:12px;padding:8px 10px}}