/* Shared controls. Content cards keep their own layout and artwork.
   Surface tokens are inherited by every dynamic control, including dialogs. */
:root{
 --key-text:#e1eeeb;--key-top:#253e48;--key-bottom:#152a35;--key-edge:#52717a;
 --key-rim:#c2dcd026;--key-base:#081820;--key-focus:#f4d48e;
 --key-hover-top:#304f59;--key-hover-bottom:#1e3641;--key-hover-edge:#94b5b4;
 --key-gold-top:#f0d29a;--key-gold-bottom:#c99a50;--key-gold-edge:#c5a56c;
 --key-radius:6px;--key-speed:120ms;--key-ease:cubic-bezier(.2,.7,.3,1);
}
/* One common body for actions; no DOM replacement and no decorative click layer. */
:is(.button,.copy-button,.helper-feedback-options button,.exp-feedback-buttons button,.exp-assistance button,.exp-opening button,.v3-scene-skip){
 display:inline-flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;
 min-height:44px;min-width:44px;max-width:100%;padding:11px 17px;
 border:1px solid var(--key-edge);border-radius:var(--key-radius);
 background:linear-gradient(180deg,var(--key-top),var(--key-bottom));color:var(--key-text);
 box-shadow:inset 0 1px 0 var(--key-rim),inset 0 -1px 0 #0003,0 2px 0 var(--key-base),0 3px 6px #0002;
 font:500 13px/1.35 var(--sans);letter-spacing:.01em;text-decoration:none;text-align:center;
 cursor:pointer;vertical-align:middle;touch-action:manipulation;
 transition:transform var(--key-speed) var(--key-ease),box-shadow var(--key-speed) var(--key-ease),border-color var(--key-speed) var(--key-ease),color var(--key-speed) var(--key-ease);
}
.button.primary{
 background:linear-gradient(110deg,#fff0c918,transparent 42%),linear-gradient(180deg,var(--key-gold-top),var(--key-gold-bottom));
 border:1px solid var(--key-gold-edge);color:#251e13;font-weight:600;
 box-shadow:inset 0 1px 0 #fff3d8bd,inset 0 -1px 0 #855c2870,0 2px 0 #725526,0 4px 9px #0003;
 text-shadow:0 1px 0 #fff5da30;
}
.button.secondary{background:linear-gradient(180deg,var(--key-top),var(--key-bottom));border-color:var(--key-edge);color:var(--key-text)}
.button.exp-icon-action{width:44px;height:44px;padding:0;font-size:20px;line-height:1;flex:0 0 44px}
/* Small utility keys remain subordinate to the main action. */
:is(.helper-card,.helper-suggestion,.answer-copy-actions)>.copy-button,.copy-button{
 min-height:44px;min-width:56px;padding:8px 12px;border:1px solid var(--key-edge);border-radius:var(--key-radius);
 background:linear-gradient(180deg,var(--key-top),var(--key-bottom));color:var(--key-text);font:500 12px/1.35 var(--sans);
}
.helper-feedback-options button,.exp-feedback-buttons button{border-color:var(--key-edge);background:linear-gradient(180deg,var(--key-top),var(--key-bottom));color:var(--key-text);font:500 13px/1.35 var(--sans)}
/* Selected is persistent. Hover is transient. Neither changes control geometry. */
.checker-intents .button[aria-pressed=true],:is(.helper-feedback-options,.exp-feedback-buttons) button[aria-pressed=true]{
 border-color:#87bfb3;color:#e9f4e7;background:linear-gradient(180deg,#294e4a,#1b3738);
 box-shadow:inset 3px 0 0 #9fd1ba,inset 0 1px 0 #d9f4e51a,0 2px 0 #0b1d22;
}
.helper-suggestion{border-radius:var(--key-radius);border-color:var(--key-edge);background:linear-gradient(110deg,#203740,#142832);box-shadow:inset 0 1px 0 #c2dcd014;transition:border-color var(--key-speed),transform var(--key-speed),background var(--key-speed)}
/* A quiet action has a full touch target without looking like another CTA. */
.exp-text-button,.acc-answer-actions [data-account=remove-favorite]{
 min-height:44px;min-width:44px;padding:10px 8px;border:1px solid transparent;border-radius:var(--key-radius);
 background:transparent;color:#b9d4cf;box-shadow:none;font:500 12px/1.4 var(--sans);
 text-decoration:underline;text-decoration-color:#839f9b66;text-underline-offset:4px;
 transition:color var(--key-speed),background-color var(--key-speed),transform var(--key-speed);
}
/* Instrument keys share one outline and consistent line icons. */
.exp-back,.exp-game-toolbar button,.exp-settings-heading button,.exp-dialog>button,.menu-toggle{
 box-sizing:border-box;min-width:44px;width:44px;min-height:44px;height:44px;padding:0;
 border:1px solid #58747b;border-radius:var(--key-radius);background:linear-gradient(180deg,#29414b,#152a35);color:#dcebe4;
 box-shadow:inset 0 1px 0 #c2dcd026,0 2px 0 #071820;transition:transform var(--key-speed),border-color var(--key-speed),box-shadow var(--key-speed);
}
#exp-game[data-layout=cockpit] .exp-back{border:1px solid #58747b;border-radius:var(--key-radius);background:linear-gradient(180deg,#29414b,#152a35);min-width:44px;width:44px;height:44px;position:relative;font-size:0}
.exp-back::before,.exp-settings-toggle::before{content:'';display:block;width:20px;height:20px;background:currentColor;pointer-events:none;mask:var(--key-icon) center/contain no-repeat}
.exp-back{--key-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m10 5-7 7 7 7M3 12h18'/%3E%3C/svg%3E")}
.exp-game-toolbar .exp-settings-toggle{font-size:0;--key-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 3-.6 2.4-2.2 1.3-2.4-.7L1 11l1.8 1.7v2.6L1 17l2.8 5 2.4-.7 2.2 1.3L9 25h6l.6-2.4 2.2-1.3 2.4.7 2.8-5-1.8-1.7v-2.6L23 11l-2.8-5-2.4.7-2.2-1.3L15 3Z' transform='translate(2 0) scale(.83)'/%3E%3Ccircle cx='12' cy='11.7' r='3.1'/%3E%3C/g%3E%3C/svg%3E")}
.exp-game-toolbar .exp-sound-toggle[aria-pressed=true]{border-color:#8ab7a8;color:#b8ead5;box-shadow:inset 0 1px 0 #d2f3de33,inset 0 -3px 0 #70aa94,0 2px 0 #071820}
#exp-game[data-layout=cockpit] .exp-game-toolbar .exp-surface-toggle{border:1px solid #49636b;background:#142b34;box-shadow:inset 0 1px 0 #d0e5d90d;color:#c2d2c8;font:500 11px/1.3 var(--sans)}
#exp-game[data-layout=cockpit] :is(.exp-input-row,.exp-play-actions,.exp-summary-actions,.exp-assistance,.exp-save-invite) .button,
#exp-room-answer .exp-input-row .button{font-size:13px;border-radius:var(--key-radius);min-height:44px}
#exp-game[data-layout=cockpit] .exp-input-row .button{height:46px;min-width:100px;padding-inline:16px}
#exp-game[data-layout=cockpit] .exp-answer-feedback>[data-result-action=save]{padding:8px;min-height:44px;font-size:12px}
#exp-game[data-layout=cockpit] .exp-assistance button{border-radius:var(--key-radius);background:linear-gradient(180deg,var(--key-top),var(--key-bottom));color:var(--key-text);font:500 13px/1.35 var(--sans)}
#exp-game[data-layout=cockpit] .exp-cockpit-tools>summary{padding-inline:8px;border-radius:var(--key-radius);text-decoration:none;color:var(--key-text)}
.exp-cockpit-tools>summary::marker,.exp-summary summary::marker{color:#a6c8bf}
.exp-summary details>summary,.helper-feedback>summary{min-height:44px;box-sizing:border-box}
/* Paper uses the same key construction with ink and warm parchment. HUD stays dark. */
:is(#exp-game,#exp-multiplayer)[data-world=words] :is(.exp-quiet-zone,.exp-summary,.exp-room-game){
 --key-text:#463924;--key-top:#eee3c9;--key-bottom:#ded0ae;--key-edge:#a18b63;
 --key-rim:#fff9e4b8;--key-base:#aa9772;--key-focus:#735220;
 --key-hover-top:#fff1d3;--key-hover-bottom:#e7d6b0;--key-hover-edge:#785b31;
}
#exp-game[data-layout=cockpit][data-world=words] :is(.exp-quiet-zone,.exp-summary) :is(.exp-text-button,.exp-cockpit-tools>summary){color:#654e2c;text-decoration-color:#957b5266}
#exp-game[data-layout=cockpit][data-world=words] :is(.exp-play-actions .secondary,.exp-assistance button,.exp-feedback-buttons button,.exp-hint-results .secondary){
 color:var(--key-text);background:linear-gradient(180deg,var(--key-top),var(--key-bottom));border-color:var(--key-edge);
}
/* Cards retain their visual role; selected worlds also carry a non-colour cue. */
.exp-scene-picker .exp-scene-option{position:relative}
.exp-scene-option[aria-pressed=true]::after{content:'✓';position:absolute;right:8px;top:8px;display:grid;place-items:center;width:22px;height:22px;border:1px solid #c9aa6d;border-radius:50%;background:#122b31;color:#ffe1a4;font:600 13px/1 var(--sans);box-shadow:0 2px 5px #0006;pointer-events:none}
@media(hover:hover) and (pointer:fine){
 :is(.button.secondary,.copy-button,.helper-feedback-options button,.exp-feedback-buttons button,.exp-assistance button,.exp-opening button,.v3-scene-skip):where(:not(:disabled):not([aria-disabled=true]):not([aria-busy=true])):hover{
  --key-top:var(--key-hover-top);--key-bottom:var(--key-hover-bottom);--key-edge:var(--key-hover-edge);border-color:var(--key-edge);background:linear-gradient(180deg,var(--key-top),var(--key-bottom));color:var(--key-text);
  box-shadow:inset 0 1px 0 var(--key-rim),0 3px 0 var(--key-base),0 5px 10px #0003;transform:translateY(-1px);
 }
 .button.primary:where(:not(:disabled):not([aria-disabled=true]):not([aria-busy=true])):hover{
  background:linear-gradient(110deg,#fff2c736,transparent 55%),linear-gradient(180deg,#f7dfa9,#d4a65c);border-color:#e4c58e;color:#251e13;
  box-shadow:inset 0 1px 0 #fff4d8,0 3px 0 #725526,0 5px 12px #0004;transform:translateY(-1px);
 }
 :is(.exp-text-button,.acc-answer-actions [data-account=remove-favorite]):not(:disabled):hover{background:#8ebfb014;color:var(--key-text);text-decoration-color:currentColor}
 :is(.exp-back,.exp-game-toolbar button,.exp-settings-heading button,.exp-dialog>button,.menu-toggle):not(:disabled):hover{border-color:#b7cabc;box-shadow:inset 0 1px 0 #c2dcd050,0 3px 0 #071820;transform:translateY(-1px)}
 .helper-suggestion:not(:disabled):hover{border-color:#9bc7bd;background:#253f48}
 .exp-cockpit-tools>summary:hover,.exp-summary summary:hover{background:#8ebfb014}
}
/* Press feedback works on touch as well as a mouse, without sticky hover. */
:is(.button,.copy-button,.helper-feedback-options button,.exp-feedback-buttons button,.exp-assistance button,.exp-opening button,.exp-back,.exp-game-toolbar button,.exp-settings-heading button,.exp-dialog>button,.menu-toggle,.helper-suggestion,.v3-scene-skip):not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):active{
 transform:translateY(1px);box-shadow:inset 0 2px 4px #0003,0 1px 0 var(--key-base);filter:brightness(.96);
}
:is(.exp-text-button,.exp-scene-option,.acc-badge,.acc-discovery):not(:disabled):active{transform:translateY(1px);background-color:#8ebfb018}
:is(.button,.copy-button,.helper-feedback-options button,.exp-feedback-buttons button,.exp-assistance button,.exp-text-button,.exp-back,.exp-game-toolbar button,.exp-settings-heading button,.exp-dialog>button,.menu-toggle,.helper-suggestion,.exp-scene-option,.acc-badge,.acc-discovery,.v3-scene-skip):focus-visible{
 outline:2px solid var(--key-focus);outline-offset:4px;
}
#exp-game[data-layout=cockpit][data-world=words] :is(.exp-quiet-zone,.exp-summary) :is(button,a,summary):focus-visible,
#exp-multiplayer[data-world=words] .exp-room-game :is(button,a,summary):focus-visible{outline:2px solid #735220;outline-offset:3px}
/* Do not confuse disabled with loading, and do not animate disabled links. */
:is(.button,.copy-button,.helper-feedback-options button,.exp-feedback-buttons button,.exp-assistance button,.exp-text-button,.exp-game-toolbar button):is(:disabled,[aria-disabled=true]){
 cursor:not-allowed;opacity:.58;transform:none;filter:saturate(.45);box-shadow:inset 0 1px 0 #d6e9df12;
}
.button.primary:is(:disabled,[aria-disabled=true]):hover{background:linear-gradient(180deg,var(--key-gold-top),var(--key-gold-bottom));border-color:var(--key-gold-edge);color:#251e13}
.button.secondary:is(:disabled,[aria-disabled=true]):hover{background:linear-gradient(180deg,var(--key-top),var(--key-bottom));border-color:var(--key-edge);color:var(--key-text)}
:is(.button,.copy-button)[aria-busy=true]{cursor:progress;opacity:.85;filter:none;background-image:linear-gradient(100deg,transparent 20%,#fff4cc38 50%,transparent 80%),linear-gradient(180deg,var(--key-top),var(--key-bottom));background-size:180% 100%,100% 100%;animation:key-working 1.4s linear infinite}
.button.primary[aria-busy=true]{background-image:linear-gradient(100deg,transparent 20%,#fff4cc65 50%,transparent 80%),linear-gradient(180deg,var(--key-gold-top),var(--key-gold-bottom))}
@keyframes key-working{from{background-position:180% 0,0 0}to{background-position:-180% 0,0 0}}
@media(max-width:600px){
 .button{font-size:13px;padding:11px 14px}
 #exp-game[data-layout=cockpit] .exp-hud{grid-template-columns:44px minmax(58px,max-content) minmax(28px,1fr) 28px 88px}
 #exp-game[data-layout=cockpit][data-timing=untimed] .exp-hud{grid-template-columns:44px minmax(58px,max-content) minmax(28px,1fr) auto}
 #exp-game[data-layout=cockpit] .exp-input-row .button{font-size:12px;min-width:94px;padding-inline:12px}
 #exp-game[data-layout=cockpit] .exp-summary-actions .button{font-size:12px}
 .exp-mode-card .button{font-size:12px}
}
@media(max-width:420px){
 #exp-game[data-layout=cockpit][data-timing=untimed]:has(#exp-surface:not([hidden])) .exp-hud{grid-template-columns:44px minmax(0,1fr) 132px}
}
@media(prefers-reduced-motion:reduce){
 :is(.button,.copy-button,.helper-suggestion,.exp-text-button,.exp-back,.exp-game-toolbar button,.exp-scene-option,.helper-feedback-options button,.exp-feedback-buttons button){transition:none;animation:none}
}
/* Disclosure rows are controls too, including feedback and saved mode records. */
.helper-report>summary,.acc-mode-records summary{min-height:44px;box-sizing:border-box;padding-block:12px;cursor:pointer}
@media(prefers-reduced-motion:reduce){
 :is(.button,.copy-button,.helper-suggestion,.exp-text-button,.exp-back,.exp-game-toolbar button,.exp-scene-option,.helper-feedback-options button,.exp-feedback-buttons button):is(:hover,:active){transform:none!important}
}
@media(max-width:420px){
 #exp-game[data-layout=cockpit] .exp-answer-feedback>.exp-result-heading{grid-column:1/-1}
 #exp-game[data-layout=cockpit] .exp-answer-feedback>[data-result-action=save]{grid-row:2/3}
}