/* Shared chunky menu kit: Settings panel, pause / live battle menu and GameUI confirms. Stone frame, parchment pages, gold trim, embossed buttons. Original CSS art only. */
:root{--rk-ink:#2b1a0d;--rk-text:#3b2412;--rk-muted:#6d5434;--rk-parch:#fbefd2;--rk-parch-2:#f1dcae;--rk-parch-3:#e2c48c;--rk-gold:#f1c158;--rk-gold-dk:#b5761f;--rk-rule:#c9a56b;--rk-s:1;--rk-display:'Barlow Condensed','Arial Narrow',sans-serif;--rk-body:'DM Sans',system-ui,sans-serif;
 --rk-outline:2px 0 0 var(--rk-ink),-2px 0 0 var(--rk-ink),0 2px 0 var(--rk-ink),0 -2px 0 var(--rk-ink),2px 2px 0 var(--rk-ink),-2px 2px 0 var(--rk-ink),2px -2px 0 var(--rk-ink),-2px -2px 0 var(--rk-ink),0 4px 0 var(--rk-ink);
 --rk-outline-thin:1.5px 0 0 var(--rk-ink),-1.5px 0 0 var(--rk-ink),0 1.5px 0 var(--rk-ink),0 -1.5px 0 var(--rk-ink),1px 1px 0 var(--rk-ink),-1px 1px 0 var(--rk-ink),1px -1px 0 var(--rk-ink),-1px -1px 0 var(--rk-ink),0 3px 0 var(--rk-ink)}
.rumble-panel,.rumble-panel *,.sp-root,.sp-root *,.rumble-inspect,.rumble-inspect *{box-sizing:border-box}
.sp-icon{display:block;width:30px;height:30px;flex:none;overflow:visible}

/* Frame: carved slate stone with a gold ring and thick ink outline. */
dialog.rumble-panel{margin:auto;padding:0;overflow:visible;max-width:calc(100vw - 24px);max-height:calc(100dvh - 48px);border:4px solid var(--rk-ink);border-radius:24px;color:var(--rk-text);font-family:var(--rk-body);
 background:radial-gradient(ellipse at 50% -10%,#9fb3c455,transparent 60%),repeating-linear-gradient(115deg,#ffffff07 0 2px,transparent 2px 14px),linear-gradient(#696e92,#494d6b 45%,#32354b);
 box-shadow:0 0 0 3px var(--rk-gold),0 0 0 6px var(--rk-ink),0 26px 70px #000d,inset 0 2px 0 #ffffff45,inset 0 -4px 0 #0006}
dialog.rumble-panel::backdrop{background:radial-gradient(ellipse at center,#20160c88,#0a0705dd);backdrop-filter:blur(5px) saturate(.8);-webkit-backdrop-filter:blur(5px) saturate(.8)}
dialog.rumble-panel.live::backdrop{background:#0a070570;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.rumble-head{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 64px 14px;text-align:center}
.rumble-title{margin:-30px 0 0;padding:8px 34px 11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:4px solid var(--rk-ink);border-radius:16px;background:linear-gradient(#ffe895,#f3c652 42%,#cf8e22);color:#fff;font:800 calc(36px * var(--rk-s))/1 var(--rk-display);letter-spacing:1px;text-transform:uppercase;text-shadow:var(--rk-outline);box-shadow:inset 0 3px 0 #fff9,inset 0 -4px 0 #9a5c1240,0 5px 0 var(--rk-ink),0 12px 22px #0007}
.rumble-subtitle{margin:12px 0 0;color:#f3e6c8;font:800 calc(15px * var(--rk-s))/1.2 var(--rk-display);letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 2px 0 #0008}
.rumble-close{position:absolute;z-index:5;top:-18px;right:-18px;display:grid;place-items:center;width:48px;height:48px;padding:0 0 3px;border:3px solid var(--rk-ink);border-radius:50%;background:linear-gradient(#f9967a,#d9432d 55%,#8e2414);color:#fff;font:800 32px/1 var(--rk-display);text-shadow:var(--rk-outline-thin);box-shadow:inset 0 3px 0 #fff8,0 4px 0 var(--rk-ink);cursor:pointer}
.rumble-close:active{transform:translateY(3px);box-shadow:inset 0 3px 0 #fff8,0 1px 0 var(--rk-ink)}

/* Embossed buttons with a hard bottom shadow. */
.rumble-btn{position:relative;display:inline-flex;width:auto;align-items:center;justify-content:center;gap:10px;min-height:54px;margin:0;padding:8px 22px 10px;border:3px solid var(--rk-ink);border-radius:15px;background:linear-gradient(#a6d6ff,#4f9be0 45%,#2a68b0);color:#fff;font:800 calc(22px * var(--rk-s))/1 var(--rk-display);letter-spacing:.5px;text-transform:uppercase;text-shadow:var(--rk-outline-thin);box-shadow:inset 0 3px 0 #ffffff80,inset 0 -4px 0 #0000003d,0 5px 0 var(--rk-ink),0 9px 14px #0005;cursor:pointer;transition:transform .08s,box-shadow .08s,filter .12s;-webkit-tap-highlight-color:transparent}
.rumble-btn:hover:hover{filter:brightness(1.08)}
.rumble-btn:active:active{transform:translateY(4px);box-shadow:inset 0 3px 0 #ffffff80,inset 0 -2px 0 #0000003d,0 1px 0 var(--rk-ink),0 3px 6px #0005}
.rumble-btn.primary{background:linear-gradient(#fff3a6,#f6c443 45%,#d48a14)}
.rumble-btn.danger{background:linear-gradient(#fb9d82,#d9432d 50%,#8e2414)}
.rumble-btn.stone{background:linear-gradient(#ddd0b3,#a8977a 50%,#776850)}
.rumble-btn:disabled{filter:grayscale(.85);opacity:.55;cursor:not-allowed;transform:none}
.rumble-btn.small{min-height:46px;min-width:104px;padding:6px 18px 8px;font-size:calc(19px * var(--rk-s));border-radius:13px}
.rumble-btn:focus-visible,.sp-tab:focus-visible,.sp-option:focus-visible,.sp-switch:focus-visible,.sp-slider:focus-visible,.rumble-close:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px #4f9be0}

/* Settings dialog. */
dialog.sp-dialog{width:min(800px,calc(100vw - 24px));height:min(700px,calc(100dvh - 48px))}
dialog.sp-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.rumble-foot{display:flex;justify-content:center;padding:14px 18px 18px}
.rumble-foot .rumble-btn{min-width:180px}

/* Tabs and page (shared by dialog, profile and lobby). */
.sp-root{container:sp/inline-size;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;margin:0 16px;font-family:var(--rk-body);color:var(--rk-text)}
.sp-tabs{position:relative;z-index:2;display:flex;gap:6px;margin:0 0 -3px;padding:6px 8px 0;overflow-x:auto;scrollbar-width:none}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;min-width:68px;min-height:60px;margin:0;padding:8px 10px 11px;border:3px solid var(--rk-ink);border-bottom:0;border-radius:16px 16px 0 0;background:linear-gradient(#b4946a,#836641);color:#fbefd2;font:800 calc(20px * var(--rk-s))/1 var(--rk-display);letter-spacing:.5px;text-transform:uppercase;text-shadow:var(--rk-outline-thin);box-shadow:inset 0 3px 0 #ffffff40,inset 0 -6px 8px #0003;transform:translateY(6px);cursor:pointer;transition:transform .12s,filter .12s;-webkit-tap-highlight-color:transparent}
.sp-tab:hover{filter:brightness(1.1)}
.sp-tab.active{z-index:3;transform:none;background:linear-gradient(#fff7e2,var(--rk-parch-2) 92%);color:var(--rk-text);text-shadow:none;box-shadow:inset 0 3px 0 #fff,0 -4px 10px #0003}
.sp-tab .sp-icon{width:32px;height:32px}
.sp-tab-short{display:none}
.sp-page{position:relative;z-index:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 18px 8px;border:3px solid var(--rk-ink);border-radius:18px;background:radial-gradient(ellipse at 50% 0,#fffaf0aa,transparent 55%),radial-gradient(circle at 15% 85%,#d9b57a33,transparent 40%),linear-gradient(var(--rk-parch-2),var(--rk-parch-3));box-shadow:inset 0 0 0 2px #fff6,inset 0 -6px 14px #a07a4033;scrollbar-color:#a8682f transparent}
.sp-group{margin:0 0 16px;padding:6px 16px 8px;border:3px solid var(--rk-rule);border-radius:16px;background:#fffaee9e;box-shadow:inset 0 2px 0 #fff,0 3px 0 #c9a56b88}
.sp-root .sp-group-title{text-shadow:none;display:flex;align-items:center;gap:10px;margin:8px 0 4px;padding-bottom:8px;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--rk-gold-dk),var(--rk-gold) 40%,transparent) 1;color:var(--rk-text);font:800 calc(23px * var(--rk-s))/1.05 var(--rk-display);letter-spacing:.6px;text-transform:uppercase}
.sp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 18px;min-height:64px;padding:12px 0;border-top:2px dashed #d3b47e}
.sp-root .sp-group-title+.sp-row{border-top:0}
.sp-root .sp-name{display:block;color:var(--rk-text);font:700 calc(17px * var(--rk-s))/1.25 var(--rk-body)}
.sp-root .sp-hint{display:block;margin-top:3px;color:var(--rk-muted);font:500 calc(13.5px * var(--rk-s))/1.4 var(--rk-body)}
.sp-empty{margin:24px 0;text-align:center;color:var(--rk-muted);font-weight:700}

/* Big toggle switch. */
.sp-switch{position:relative;flex:none;width:86px;height:46px;margin:0;padding:0;border:3px solid var(--rk-ink);border-radius:999px;background:linear-gradient(#7e6c53,#b09c7a);box-shadow:inset 0 4px 6px #0006,0 3px 0 #fff9;cursor:pointer;transition:background .18s;-webkit-tap-highlight-color:transparent}
.sp-switch::before{content:attr(data-state);position:absolute;top:50%;right:11px;transform:translateY(-52%);color:#fff;font:800 17px/1 var(--rk-display);letter-spacing:.5px;text-shadow:var(--rk-outline-thin)}
.sp-switch.on{background:linear-gradient(#3a8a1b,#74c943)}
.sp-switch.on::before{right:auto;left:12px}
.sp-knob{position:absolute;top:4px;left:4px;width:32px;height:32px;border:3px solid var(--rk-ink);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8e0,#f1c158 55%,#b5761f);box-shadow:0 3px 0 #0006;transition:transform .2s cubic-bezier(.3,1.5,.6,1)}
.sp-switch.on .sp-knob{transform:translateX(40px)}

/* Volume slider: thick track with gold fill and a coin knob. */
.sp-row.is-volume .sp-volume{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 58px;align-items:center;gap:14px}
.sp-row.is-volume.muted .sp-volume{opacity:.5}
.sp-root .sp-value{color:var(--rk-text);font:800 calc(21px * var(--rk-s))/1 var(--rk-display);text-align:right}
.sp-slider{--fill:50%;-webkit-appearance:none;appearance:none;width:100%;height:46px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.sp-slider::-webkit-slider-runnable-track{height:20px;border:3px solid var(--rk-ink);border-radius:999px;background:linear-gradient(#ffe48a,#e3a332) 0/var(--fill) 100% no-repeat,linear-gradient(#8f7b5d,#bba887);box-shadow:inset 0 3px 4px #0005}
.sp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;margin-top:-11px;border:3px solid var(--rk-ink);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8e0,#f1c158 55%,#b5761f);box-shadow:0 3px 0 #0007}
.sp-slider::-moz-range-track{height:14px;border:3px solid var(--rk-ink);border-radius:999px;background:linear-gradient(#8f7b5d,#bba887)}
.sp-slider::-moz-range-progress{height:14px;border:3px solid var(--rk-ink);border-radius:999px;background:linear-gradient(#ffe48a,#e3a332)}
.sp-slider::-moz-range-thumb{width:30px;height:30px;border:3px solid var(--rk-ink);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8e0,#f1c158 55%,#b5761f)}

/* Segmented choices (tiers, colours, text size). */
.sp-row.is-choice{grid-template-columns:1fr}
.sp-choice{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:4px}
.sp-option{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:92px;min-height:56px;margin:0;padding:8px 10px;border:3px solid var(--rk-ink);border-radius:14px;background:linear-gradient(#f6ead0,#d9bf8d);color:var(--rk-text);font-family:var(--rk-body);box-shadow:inset 0 2px 0 #fffb,0 4px 0 var(--rk-ink);cursor:pointer;transition:transform .08s,box-shadow .08s,background .15s;-webkit-tap-highlight-color:transparent}
.sp-option b{font:800 calc(19px * var(--rk-s))/1.05 var(--rk-display);letter-spacing:.4px;text-transform:uppercase;text-align:center}
.sp-option small{color:var(--rk-muted);font:600 calc(12px * var(--rk-s))/1.2 var(--rk-body);text-align:center}
.sp-option:hover{filter:brightness(1.05)}
.sp-option:active{transform:translateY(3px);box-shadow:inset 0 2px 0 #fffb,0 1px 0 var(--rk-ink)}
.sp-option.selected{background:linear-gradient(#fff3a6,#f6c443 50%,#d9962a);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #a8682f66,0 4px 0 var(--rk-ink),0 0 0 3px #fff5}
.sp-option.selected b{color:#fff;text-shadow:var(--rk-outline-thin)}
.sp-option.selected small{color:#5a3712}
.sp-swatch{display:flex;gap:4px;margin-bottom:3px}
.sp-swatch i{width:22px;height:22px;border:2px solid var(--rk-ink);border-radius:50%;box-shadow:inset 0 2px 0 #fff8}
.sp-row[data-control="palette"] .sp-option{min-width:130px}

/* Live previews sit on a dark battlefield strip. */
.sp-preview{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:54px;padding:10px 16px;border:3px solid var(--rk-ink);border-radius:14px;background:radial-gradient(ellipse at 50% 0,#4d6b4a,#2a3a2b);color:#fbefd2;box-shadow:inset 0 3px 8px #0007}
.sp-team{display:flex;align-items:center;gap:8px;flex:1 1 150px}
.sp-team i{width:24px;height:24px;flex:none;border:3px solid var(--rk-ink);border-radius:50%;background:var(--team-ally,#4682ff)}
.sp-team.enemy i{background:var(--team-enemy,#dc4646)}
.sp-team b{font:800 calc(17px * var(--rk-s))/1 var(--rk-display);text-transform:uppercase;text-shadow:0 2px 0 #0009}
.sp-bar{flex:1;height:14px;min-width:50px;border:2px solid var(--rk-ink);border-radius:999px;background:#1b1410;overflow:hidden}
.sp-bar span{display:block;width:72%;height:100%;background:linear-gradient(var(--team-ally-light,#6199ff),var(--team-ally-dark,#1e50c8))}
.sp-team.enemy .sp-bar span{width:46%;background:linear-gradient(var(--team-enemy-light,#ff666c),var(--team-enemy-dark,#b41e1e))}
.sp-root .sp-sample{margin:0;color:#fbefd2;font:700 16px/1.35 var(--rk-body)}
.sp-bob{display:inline-block;animation:sp-bob .9s ease-in-out infinite alternate}
.sp-bob .sp-icon{width:34px;height:34px}
.sp-motion-state{font:800 calc(17px * var(--rk-s))/1 var(--rk-display);letter-spacing:.5px;text-transform:uppercase}
@keyframes sp-bob{from{transform:translateY(4px) rotate(-8deg)}to{transform:translateY(-6px) rotate(8deg)}}

/* How to play + extras. */
.sp-row.is-info,.sp-row.is-custom{display:block;min-height:0}
.sp-howto{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:4px 0}
.sp-root .sp-howto dt,.rumble-howto .sp-howto dt{color:var(--rk-gold-dk);font:800 calc(18px * var(--rk-s))/1.2 var(--rk-display);letter-spacing:.5px;text-transform:uppercase}
.sp-root .sp-howto dd,.rumble-howto .sp-howto dd{margin:0;color:var(--rk-text);font:500 calc(14.5px * var(--rk-s))/1.4 var(--rk-body)}
.sp-root .settings-version{color:var(--rk-muted);opacity:1!important;font-weight:700;margin:6px 0 4px!important}

/* Embedded in profile and lobby pages. */
/* The host stops scrolling and the parchment page scrolls instead, so tabs stay in view with a single scrollbar. */
.profile-scroll:has(>.sp-root),#lobby-content:has(>.sp-root){display:grid;overflow:hidden;background:none;box-shadow:none;border-color:transparent}
.sp-root.sp-profile,.sp-root.sp-lobby{height:100%;margin:0;min-height:0}
.sp-root.sp-profile{margin:4px 2px 0}
.sp-root.sp-lobby{width:100%;max-width:860px;margin:6px auto 0;padding-bottom:12px}

/* Pause / live battle menu. */
dialog.rumble-pause{width:min(420px,calc(100vw - 32px));padding:0 22px 24px}
.rumble-pause .rumble-head{padding:0 6px 14px}
.rumble-howto-actions .rumble-btn{font-size:calc(19px * var(--rk-s))}
dialog.rumble-pause[open]{display:block}
.rumble-actions{display:flex;flex-direction:column;gap:14px;padding:4px 2px 6px}
.rumble-actions[hidden],.rumble-howto[hidden]{display:none}
.rumble-actions .rumble-btn{width:100%;min-height:64px;font-size:calc(27px * var(--rk-s))}
.rumble-actions .rumble-btn .sp-icon{width:32px;height:32px}
.rumble-actions .pause-restart{min-height:54px;font-size:calc(22px * var(--rk-s))}
.rumble-actions .pause-surrender{margin-top:8px}
.rumble-howto{padding:16px 18px 18px;border:3px solid var(--rk-ink);border-radius:16px;background:linear-gradient(var(--rk-parch),var(--rk-parch-3));box-shadow:inset 0 2px 0 #fff}
.rumble-howto-title{margin:0 0 10px;color:var(--rk-text);font:800 calc(24px * var(--rk-s))/1 var(--rk-display);text-transform:uppercase;letter-spacing:.6px}
.rumble-howto-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.rumble-howto-actions .rumble-btn{flex:1 1 140px}
.rumble-inspect{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 70px);z-index:120;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:7px 7px 7px 18px;transform:translateX(-50%);border:3px solid var(--rk-ink);border-radius:999px;background:linear-gradient(var(--rk-parch),var(--rk-parch-3));color:var(--rk-text);font:700 calc(15px * var(--rk-s))/1.25 var(--rk-body);box-shadow:0 0 0 2px var(--rk-gold),0 5px 0 var(--rk-ink),0 10px 24px #0007}
.rumble-inspect .rumble-btn{min-width:0;min-height:44px;border-radius:999px}

/* GameUI.confirm restyled to the same kit (specificity beats older per-mode confirm skins). */
:root body dialog.game-confirm.rumble-confirm.rumble-confirm{width:min(470px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:22px 24px 26px;overflow:auto;border:4px solid var(--rk-ink);border-radius:24px;color:var(--rk-text);font-family:var(--rk-body);background:radial-gradient(ellipse at 50% 0,#fffaf0,transparent 60%),linear-gradient(var(--rk-parch),var(--rk-parch-3));box-shadow:0 0 0 3px var(--rk-gold),0 0 0 6px var(--rk-ink),0 26px 70px #000d,inset 0 2px 0 #fff}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm::backdrop{background:radial-gradient(ellipse at center,#20160c88,#0a0705dd);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm h2{margin:16px 50px 10px;padding:0;text-align:center;color:#fff;font:800 calc(31px * var(--rk-s))/1.05 var(--rk-display);letter-spacing:.6px;text-transform:uppercase;text-shadow:var(--rk-outline)}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm>p{color:var(--rk-muted);font:500 calc(15px * var(--rk-s))/1.5 var(--rk-body);text-align:center}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm>.eyebrow{display:block;color:var(--rk-gold-dk);text-align:center;letter-spacing:2px}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm:not(:has(.cost-table))>.eyebrow{display:none}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .confirm-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:46px;height:46px;padding:0 0 3px;border:3px solid var(--rk-ink);border-radius:50%;background:linear-gradient(#ddd0b3,#a8977a 50%,#776850);color:#fff;font:800 30px/1 var(--rk-display);text-shadow:var(--rk-outline-thin);box-shadow:inset 0 3px 0 #fff8,0 4px 0 var(--rk-ink)}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .confirm-actions{display:flex;gap:14px;margin-top:22px}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .confirm-actions>button{flex:1;min-height:56px;margin:0;padding:8px 14px 10px;border:3px solid var(--rk-ink);border-radius:15px;background:linear-gradient(#ddd0b3,#a8977a 50%,#776850);color:#fff;font:800 calc(22px * var(--rk-s))/1 var(--rk-display);letter-spacing:.5px;text-transform:uppercase;text-shadow:var(--rk-outline-thin);box-shadow:inset 0 3px 0 #ffffff80,inset 0 -4px 0 #0000003d,0 5px 0 var(--rk-ink);cursor:pointer;transition:transform .08s,box-shadow .08s}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .confirm-actions>button:active{transform:translateY(4px);box-shadow:inset 0 3px 0 #ffffff80,0 1px 0 var(--rk-ink)}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .confirm-actions>.primary{background:linear-gradient(#a8ef7a,#5fb532 50%,#2f7a17)}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .confirm-actions>.primary.danger{background:linear-gradient(#fb9d82,#d9432d 50%,#8e2414)}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .confirm-actions>button:disabled{filter:grayscale(.85);opacity:.55}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .cost-table{width:100%;margin:12px 0;border-collapse:collapse;border:3px solid var(--rk-rule);border-radius:12px;background:#fffaee;color:var(--rk-text)}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .cost-table th{padding:6px;color:var(--rk-muted);font:800 13px/1 var(--rk-display);letter-spacing:1px;text-transform:uppercase}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .cost-table td{padding:6px;border-top:2px dashed #d3b47e;font-weight:700}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .insufficient,:root body dialog.game-confirm.rumble-confirm.rumble-confirm .cost-table tr.insufficient td{color:#b02a17!important}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .cost-table td:last-child{color:#2f7a17}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm .confirm-benefits{border:2px solid #6cc23c;background:#e6f5d4;color:#2f5a17!important}

/* Gentle pop-in; Accessibility's reduce-motion class (system or user choice) turns it off. */
@keyframes rk-pop{from{opacity:0;transform:scale(.84) translateY(16px)}65%{opacity:1;transform:scale(1.025)}to{opacity:1;transform:none}}
@keyframes rk-fade{from{opacity:0}}
dialog.rumble-panel[open],:root body dialog.game-confirm.rumble-confirm.rumble-confirm[open]{animation:rk-pop .28s cubic-bezier(.2,.9,.3,1.15) both}
dialog.rumble-panel[open]::backdrop,dialog.rumble-confirm[open]::backdrop{animation:rk-fade .2s ease-out both}
html.reduce-motion dialog.rumble-panel[open],html.reduce-motion dialog.game-confirm.rumble-confirm.rumble-confirm[open],html.reduce-motion dialog.rumble-panel[open]::backdrop,html.reduce-motion .sp-bob{animation:none!important}
html.reduce-motion .sp-knob,html.reduce-motion .sp-tab,html.reduce-motion .sp-switch,html.reduce-motion .rumble-btn,html.reduce-motion .sp-option{transition:none}

/* Phones: compact tabs (icon over label), full-height window, still 44px+ targets. */
@media (max-width:640px){
 dialog.sp-dialog{width:calc(100vw - 16px);height:calc(100dvh - 44px);max-height:calc(100dvh - 44px)}
 .rumble-head{padding:0 58px 10px}
 .rumble-title{margin-top:-26px;padding:7px 22px 9px;font-size:calc(29px * var(--rk-s))}
 .rumble-close{top:-14px;right:-6px;width:44px;height:44px}
 .sp-root{margin:0 8px}
 .rumble-foot .rumble-btn{width:100%}
 .rumble-foot{padding:10px 12px 14px}
 dialog.rumble-pause{padding:0 16px 20px}
 .rumble-pause .rumble-title{font-size:calc(27px * var(--rk-s))}
 .rumble-actions .rumble-btn{min-height:58px;font-size:calc(24px * var(--rk-s))}
 .rumble-howto .sp-howto{grid-template-columns:1fr;gap:2px}
 .rumble-howto .sp-howto dd{margin-bottom:8px}
}
/* Narrow hosts (phones, the profile popup): icon-over-label tabs and tighter rows. Container query so embedded panels adapt too. */
@container sp (max-width:600px){
 .sp-tabs{gap:4px;padding:6px 2px 0}
 .sp-tab{flex:1 1 0;flex-direction:column;gap:3px;min-width:56px;min-height:62px;padding:6px 3px 9px;font-size:calc(13px * var(--rk-s));border-radius:13px 13px 0 0}
 .sp-tab .sp-icon{width:28px;height:28px}
 .sp-tab:has(.sp-tab-short) .sp-tab-label{display:none}
 .sp-tab:has(.sp-tab-short) .sp-tab-short{display:inline}
 .sp-page{padding:12px 10px 6px;border-radius:14px}
 .sp-group{padding:4px 12px 6px}
 .sp-root .sp-group-title{font-size:calc(20px * var(--rk-s))}
 .sp-row{gap:8px 12px;padding:10px 0}
 .sp-option{min-width:64px;padding:7px 6px}
 .sp-row[data-control="palette"] .sp-option{min-width:96px}
 /* Choice rows: equal columns (2x2 for four options, set by settings-panel.js as --sp-cols) so every label fits inside its button
    (BALANCED, MEDIUM) and subtitles keep whole words. Labels only shrink when the longest one (--sp-max) would not fit; cqi = the row. Palette rows keep their wrapping layout. */
 .sp-row:not([data-control="palette"]) .sp-choice{container-type:inline-size;display:grid;grid-template-columns:repeat(var(--sp-cols,3),minmax(0,1fr));gap:8px 6px;min-width:0}
 .sp-row:not([data-control="palette"]) .sp-choice>.sp-option{min-width:0;padding-inline:5px}
 .sp-row:not([data-control="palette"]) .sp-choice>.sp-option b{max-width:100%;white-space:nowrap;font-size:min(calc(19px * var(--rk-s)),calc(((100cqi - (var(--sp-cols,3) - 1) * 6px) / var(--sp-cols,3) - 18px) / (var(--sp-max,6) * .72)))}
 .sp-root .sp-howto{grid-template-columns:1fr;gap:2px}
 .sp-root .sp-howto dd{margin-bottom:8px}
}

.sp-feedback-dialog{width:min(580px,calc(100vw - 24px));max-height:calc(100dvh - 28px);overflow:auto}.sp-feedback-form{display:grid;gap:16px;padding:20px}.sp-feedback-form label{display:grid;gap:8px}.sp-feedback-input{box-sizing:border-box;width:100%;min-width:0;padding:12px;border:2px solid #8c6739;border-radius:9px;background:#f4e3c2;color:#2b1a0d;font:inherit;font-size:16px;user-select:text!important;-webkit-user-select:text!important}.sp-feedback-form textarea{resize:vertical;min-height:150px}.sp-feedback-input:focus{outline:3px solid #e6bd64;outline-offset:2px}.sp-feedback-status{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.sp-feedback-form .rumble-foot{padding:8px 0 0}@media(max-width:480px){.sp-feedback-form{padding:14px;gap:12px}}
.sp-feedback-form,.sp-feedback-form .sp-name,.sp-feedback-form .sp-hint{color:#f4e4c3}.sp-feedback-form .sp-hint{font-size:14px;line-height:1.5}.sp-feedback-form .sp-name{font-weight:700}.sp-feedback-status{line-height:1.5}

.sp-feedback-dialog{min-width:0}@media(max-width:480px){.sp-feedback-dialog .rumble-title{font-size:24px;max-width:calc(100% - 44px);white-space:nowrap;overflow:visible;text-overflow:clip}}
@media(max-width:480px){.sp-feedback-dialog .rumble-head{padding:0 34px 12px}.sp-feedback-dialog .rumble-title{font-size:22px;padding:7px 12px 9px;max-width:100%;overflow:hidden;text-overflow:ellipsis}}
.sp-feedback-dialog [hidden]{display:none!important}

/* Battle menu header: one-tap music and sound coins (SettingsPanel.menu soundCoins). Blue round coin; stone with a red slash when muted. */
dialog.rumble-pause.has-snd .rumble-head{padding-left:46px;padding-right:46px}
.rumble-snd{--b-hi:#5fb0ff;--b:#2f78e0;--b-lo:#1a4a9c;position:absolute;top:10px;z-index:4;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0 0 2px;border:2px solid #10142a;border-radius:50%;background:radial-gradient(ellipse 80% 50% at 50% 12%,#ffffff70,#fff0 70%),linear-gradient(180deg,var(--b-hi),var(--b) 65%);box-shadow:inset 0 -3px 0 var(--b-lo),inset 0 0 0 1px #ffffff26,0 2px 5px #0008;cursor:pointer;transition:transform .08s ease,filter .12s;-webkit-tap-highlight-color:transparent}
#battle-pause-dialog>button.rumble-snd{display:grid;width:44px;margin:0} /* style.css stretches every direct pause button to full width */
.rumble-snd.is-music{left:12px}.rumble-snd.is-sound{right:12px}
.rumble-snd .sp-icon{width:25px;height:25px}
.rumble-snd:hover{filter:brightness(1.08)}.rumble-snd:active{transform:translateY(2px)}
.rumble-snd:focus-visible{outline:2px solid #ffeaa6;outline-offset:2px}
.rumble-snd[aria-pressed="false"]{--b-hi:#6c78a0;--b:#46507a;--b-lo:#2a3152}
.rumble-snd[aria-pressed="false"] .sp-icon{opacity:.6}
.rumble-snd[aria-pressed="false"]::after{content:'';position:absolute;left:50%;top:50%;width:30px;height:4px;margin:-2px 0 0 -15px;border-radius:2px;background:#e03a2c;box-shadow:0 0 0 1.5px #2b1a0d;transform:rotate(-45deg);pointer-events:none}
html.reduce-motion .rumble-snd{transition:none}
@media (prefers-reduced-motion:reduce){.rumble-snd{transition:none}}
/* Phone review fixes (settings-panel.js): no explanation lines (an "i" opens the tap bubble instead), slim section titles,
   tab labels level across selected and unselected tabs, compact How to play, Account row with a status dot and red Log out. */
/* Tabs: no lift transform; unselected tabs start 6px lower and the selected one adds those 6px as top padding,
   so every icon and label sits at the same height. */
.sp-tab,.sp-tab.active{transform:none}
.sp-tab{margin-top:6px}
.sp-tab.active{margin-top:0;padding-top:14px}
.sp-group{margin:0 0 12px;padding:2px 14px 4px}
.sp-root .sp-group-title{gap:7px;margin:6px 0 0;padding:0 0 2px;border-bottom:0;border-image:none;color:var(--rk-muted);font-size:calc(15px * var(--rk-s));letter-spacing:1.2px;text-shadow:none}
.sp-root .sp-group-title .sp-icon{width:20px;height:20px}
.sp-row{min-height:54px;padding:8px 0}
.sp-root .sp-group.is-untitled>.sp-row:first-child{border-top:0}
.sp-root .sp-label{display:flex;align-items:center;gap:8px;min-width:0}
.sp-root .sp-label .sp-name{min-width:0;overflow-wrap:break-word}
.sp-info{flex:none;display:grid;place-items:center;width:26px;height:26px;margin:0;padding:0 0 1px;border:2px solid var(--rk-ink);border-radius:50%;background:radial-gradient(ellipse 80% 50% at 50% 12%,#ffffff70,#fff0 70%),linear-gradient(180deg,#5fb0ff,#2f78e0 65%);box-shadow:inset 0 -2px 0 #1a4a9c,0 2px 0 var(--rk-ink);color:#fff;font:800 16px/1 var(--rk-display);text-shadow:0 1px 0 #10142a;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sp-info.tap-bubble-open{box-shadow:inset 0 -2px 0 #1a4a9c,0 0 0 3px #ffd66b}
.sp-status{flex:none;width:11px;height:11px;border:2px solid var(--rk-ink);border-radius:50%;background:#62c681;box-shadow:0 0 6px #62c681}
.sp-root .rumble-btn .sp-icon{width:24px;height:24px}
.sp-row[data-control="logout"] .rumble-btn{min-width:132px}
.sp-root .sp-howto,.rumble-howto .sp-howto{grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center}
.sp-root .sp-howto dt,.rumble-howto .sp-howto dt{display:flex;align-items:center;gap:7px;font-size:calc(15px * var(--rk-s))}
.sp-howto dt .sp-icon{width:24px;height:24px}
.sp-root .sp-howto dd,.rumble-howto .sp-howto dd{margin:0;font-size:calc(14px * var(--rk-s));line-height:1.3}
@container sp (max-width:600px){
 .sp-tab.active{padding-top:12px}
 .sp-group{padding:2px 10px 4px}
 .sp-root .sp-group-title{font-size:calc(14px * var(--rk-s))}
 .sp-row{gap:8px 10px;padding:7px 0}
 .sp-root .sp-howto{grid-template-columns:auto minmax(0,1fr);gap:8px 10px}
 .sp-root .sp-howto dd{margin:0}
}
@media (max-width:640px){.rumble-howto .sp-howto{grid-template-columns:auto minmax(0,1fr);gap:8px 10px}.rumble-howto .sp-howto dd{margin:0}}
/* Very narrow panels (360px phones): button icons step aside so row labels keep whole words. */
@container sp (max-width:380px){.sp-row .rumble-btn .sp-icon{display:none}.sp-row .rumble-btn.small{min-width:0;padding-inline:16px}}
/* Help tab How to play: icon + one line; the word stays for screen readers. */
.sp-root .sp-howto dt>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp-root .sp-howto dt .sp-icon{width:28px;height:28px}
.sp-root .sp-howto dd{font-size:calc(15px * var(--rk-s))}