:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Noto Sans JP", sans-serif;
  color: #eef8ff;
  background: #071018;
  --glass: rgba(5, 15, 23, .88);
  --line: rgba(153, 217, 244, .22);
  --cyan: #63d1ff;
  --green: #62e6b4;
  --dicewar-visual-width: 100dvw;
}
* { box-sizing: border-box; }
html, body {
  width: var(--dicewar-visual-width);
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle at 10% -10%, #173749, transparent 35%), radial-gradient(circle at 95% 0, #3c172a, transparent 28%), #03080d;
  position: fixed;
  inset: 0;
  max-width: var(--dicewar-visual-width);
}
main, main * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
main input, main textarea, main [contenteditable="true"], main [contenteditable="plaintext-only"] {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}
button, select, input, textarea { font: inherit; touch-action: manipulation; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
main {
  position: fixed;
  inset: 0;
  width: min(var(--dicewar-visual-width), 1380px);
  min-width: 0;
  max-width: var(--dicewar-visual-width);
  height: 100dvh;
  margin: 0;
  padding: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: 47px minmax(0, 1fr);
  gap: 5px;
  overflow: clip;
}

.topbar { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 8px; min-width: 0; width: 100%; max-width: 100%; padding: 0 3px; overflow: visible; }
.brand { min-width: 0; min-height: 44px; overflow: hidden; padding: 8px 0; border: 0; background: transparent; font: inherit; font-size: clamp(20px, 4.8vw, 30px); font-weight: 950; letter-spacing: -.055em; white-space: nowrap; color: #ffcf45; text-shadow: 0 2px 0 #4f3310; cursor: pointer; touch-action: manipulation; }
.brand span { color: #f7fbff; }
.brand:focus-visible { outline: 2px solid #74d9ff; outline-offset: 4px; border-radius: 4px; }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 4px; width: 229px; min-width: 229px; max-width: none; }
.top-actions > button { flex-shrink: 0; }
.rating-pair { flex: 0 0 auto; min-width: 69px; min-height: 44px; padding: 4px 6px; display: grid; gap: 1px; border: 1px solid rgba(255, 209, 101, .3); border-radius: 10px; background: linear-gradient(145deg, rgba(38, 35, 25, .94), rgba(10, 22, 29, .96)); color: #a8c3d1; font-size: 8px; font-weight: 900; line-height: 1.15; box-shadow: inset 0 1px rgba(255,255,255,.08); cursor: pointer; }
.rating-pair span { white-space: nowrap; }
.rating-pair strong { color: #fff; font-size: 11px; }
.match-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.icon-button, .match-button, .secondary, .ghost, .primary, .end-turn {
  min-height: 44px;
  border: 1px solid #315269;
  border-radius: 12px;
  color: #eef8ff;
  font-weight: 850;
  cursor: pointer;
}
.icon-button { flex: 0 0 44px; width: 44px; padding: 0; background: linear-gradient(145deg, #132637, #07121b); font-size: 17px; }
.share-button { flex-basis: 60px; width: 60px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 10px; }
.share-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-button-label { line-height: 1; white-space: nowrap; }
.top-actions:has(#matchmaking:not(.hidden)) #share-game,
.top-actions:has(#surrender:not(.hidden)) #share-game { display: none; }
.top-actions:has(#surrender:not(.hidden)) #rating-open { display: none; }
.top-actions:has(#matchmaking:not(.hidden)) { width: clamp(251px, calc(169px + 22vw), 277px); min-width: clamp(251px, calc(169px + 22vw), 277px); }
.top-actions:has(#surrender:not(.hidden)) { width: 140px; min-width: 140px; }
.top-actions:has(#matchmaking:not(.hidden)):has(#surrender:not(.hidden)) { width: 235px; min-width: 235px; }
.top-surrender { flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid rgba(255, 113, 131, .5); border-radius: 10px; background: rgba(74, 22, 34, .9); color: #ffc2ca; font-size: 9px; font-weight: 950; }
.top-surrender:disabled { opacity: .38; filter: grayscale(1); cursor: not-allowed; }
.match-button { display: grid; grid-template-areas: "dot label" "dot note"; grid-template-columns: 8px minmax(0, 1fr); align-items: center; column-gap: 4px; width: clamp(82px, 22vw, 108px); min-width: 0; overflow: hidden; padding: 5px 6px; background: linear-gradient(145deg, rgba(17, 75, 66, .96), rgba(7, 31, 32, .96)); border-color: rgba(88, 226, 181, .42); text-align: center; }
.match-button i { grid-area: dot; position: static; width: 7px; height: 7px; border-radius: 50%; background: #708591; }
.match-button i.searching { background: var(--green); box-shadow: 0 0 12px var(--green); animation: pulse 1.2s infinite; }
.match-button[aria-pressed="true"] { border-color: rgba(88, 226, 181, .7); box-shadow: inset 0 0 18px rgba(29, 188, 139, .12), 0 0 14px rgba(29, 188, 139, .1); }
.match-button:disabled { cursor: default; opacity: 1; border-color: rgba(99, 190, 255, .5); background: linear-gradient(145deg, rgba(20, 74, 103, .96), rgba(7, 28, 43, .96)); }
.match-button span { grid-area: label; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 1.1; letter-spacing: 0; white-space: nowrap; }
.match-button small { grid-area: note; min-width: 0; overflow: hidden; color: #8fc5b5; font-size: 6.5px; line-height: 1.1; text-align: center; white-space: nowrap; }

.setup {
  position: fixed;
  z-index: 96;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 520px);
  max-height: min(92dvh, 760px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  contain: inline-size;
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid #3c6077;
  border-radius: 16px;
  background: rgba(4, 13, 20, .98);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .72);
  backdrop-filter: blur(18px);
}
.setup > *, .setup section, .setup label, .setup div { min-width: 0; max-width: 100%; }
.setup > .settings-head { position: sticky; z-index: 2; top: -14px; margin: -14px -14px 0; padding: 14px 14px 4px; background: linear-gradient(#040d14 82%, transparent); }
.setup > .settings-head .settings-close { position: static; flex: 0 0 44px; margin: 0; }
.settings-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 2px 0 4px; border-bottom: 1px solid rgba(112, 181, 218, .24); }
.settings-tabs button { min-width: 0; min-height: 44px; padding: 4px 5px; border: 1px solid #2b4b5e; border-radius: 9px; background: #091923; color: #8fa9b7; font-size: 12px; font-weight: 850; white-space: nowrap; }
.settings-tabs button.active { border-color: #61d5ff; background: linear-gradient(145deg, #124865, #0b2536); color: #fff; box-shadow: inset 0 0 14px rgba(44,190,255,.14); }
.settings-panel { display: grid; gap: 9px; min-width: 0; }
.settings-panel[hidden] { display: none; }
.support-entry { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(99, 209, 255, .25); border-radius: 12px; background: rgba(8, 28, 39, .8); }
.support-entry strong { color: #edf8ff; font-size: 13px; }
.support-entry p { margin: 0; color: #86a3b4; font-size: 10px; line-height: 1.55; }
.feedback-entry-button { min-height: 48px; border-radius: 11px; color: #fff; }
.danger-zone { border-color: rgba(255, 111, 111, .32); }
.danger-zone p { color: #c69b9b; }
.danger-zone .danger { min-height: 44px; border: 1px solid #d66a6a; border-radius: 10px; background: #5b2028; color: #fff; font-weight: 850; }
.support-links { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 2px 4px 4px; }
.support-links a { color: #8fdcff; font-size: 11px; line-height: 1.5; text-decoration: underline; text-underline-offset: 2px; }
.moderation-panel .settings-subhead { align-items: center; }
.moderation-panel .settings-subhead button { min-height: 36px; padding: 0 10px; }
.moderation-list { display: grid; gap: 8px; }
.moderation-item { display: grid; gap: 7px; padding: 10px; border: 1px solid #39586a; border-radius: 10px; background: #081923; }
.moderation-item header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #dcebf1; font-size: 11px; }
.moderation-item p { color: #b6cbd5; font-size: 11px; white-space: pre-wrap; }
.moderation-item small { color: #7997a6; font-size: 9px; }
.moderation-item .feedback-attachments { margin-top: 2px; }
.moderation-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.moderation-actions button { min-height: 40px; padding: 0 10px; border: 1px solid #406c7d; border-radius: 8px; background: #102e3b; color: #fff; font-weight: 800; }
.moderation-actions button[data-moderate-status="rejected"], .moderation-actions button[data-moderate-status="dismissed"] { border-color: #9d5961; background: #3e2029; }
.language-setting { display: grid; gap: 4px; color: #b7d0dc; font-size: 10px; font-weight: 850; }
.language-setting select { min-height: 44px; padding: 7px 10px; border: 1px solid #315064; border-radius: 10px; background: #0a1721; color: #fff; }
.settings-backdrop { position: fixed; z-index: 95; inset: 0; background: rgba(0, 5, 9, .72); backdrop-filter: blur(5px); }
.confirm-dialog { position: fixed; z-index: 101; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 360px); display: grid; gap: 7px; padding: 17px; border: 1px solid rgba(255, 111, 126, .5); border-radius: 15px; background: rgba(5, 18, 28, .98); box-shadow: 0 20px 70px #000; }
.confirm-dialog > small { color: #8ba4b3; font-size: 10px; }
.surrender-rating-preview { color: #ffe087; font-size: 16px; }
.confirm-dialog > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 7px; }
.attention-dialog { border-color: rgba(255, 214, 72, .72); }
.attention-dialog > button { margin-top: 7px; }
.rules-dialog { position: fixed; z-index: 101; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 520px); max-height: min(88dvh, 720px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; padding: 14px; border: 1px solid rgba(99,209,255,.5); border-radius: 16px; background: rgba(4,14,22,.99); box-shadow: 0 24px 80px rgba(0,0,0,.82); }
.rules-content { min-width: 0; overflow-y: auto; display: grid; gap: 7px; overscroll-behavior: contain; }
.rules-content section { padding: 9px 10px; border: 1px solid rgba(105,174,207,.2); border-radius: 9px; background: rgba(9,26,37,.78); }
.rules-content strong { color: #9fe8d0; font-size: 12px; }
.rules-content p { margin: 4px 0 0; color: #c4d5de; font-size: 10px; line-height: 1.65; }
.leaderboard-dialog { position: fixed; z-index: 101; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 430px); max-height: min(86dvh, 680px); overflow: hidden; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 10px; padding: 14px; border: 1px solid rgba(99, 209, 255, .45); border-radius: 16px; background: rgba(4, 14, 22, .98); box-shadow: 0 24px 80px rgba(0,0,0,.78); }
.leaderboard-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.leaderboard-tabs button { min-height: 44px; border: 1px solid #315269; border-radius: 11px; background: #0a1822; color: #8ca9b8; font-weight: 900; }
.leaderboard-tabs button.active { border-color: #61d5ff; background: linear-gradient(145deg, #124865, #0b2536); color: #fff; box-shadow: inset 0 0 16px rgba(44,190,255,.15); }
.leaderboard-own { min-height: 38px; padding: 9px 11px; border: 1px solid rgba(255,211,94,.35); border-radius: 10px; background: rgba(73,56,19,.28); color: #ffe895; font-size: 11px; font-weight: 900; }
.leaderboard-list { min-height: 160px; overflow-y: auto; display: grid; align-content: start; gap: 5px; overscroll-behavior: contain; }
.leaderboard-row { min-height: 48px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 4px 9px; border: 1px solid rgba(105,174,207,.2); border-radius: 9px; background: rgba(9,26,37,.78); }
.leaderboard-row.own { border-color: rgba(255,211,94,.58); background: rgba(72,56,20,.32); }
.leaderboard-row b { color: #ffda69; font-size: 12px; }
.leaderboard-player { min-width: 0; min-height: 44px; padding: 0; overflow: hidden; border: 0; background: transparent; color: #eef8ff; text-align: left; text-decoration: underline; text-decoration-color: rgba(99,209,255,.45); text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 850; cursor: pointer; }
.leaderboard-player:focus-visible { outline: 2px solid #63d1ff; outline-offset: 2px; border-radius: 5px; }
.leaderboard-row strong { color: #fff; font-size: 13px; }
.leaderboard-empty { padding: 24px 8px; color: #88a2b1; text-align: center; font-size: 11px; }
.player-profile-backdrop { z-index: 102; }
.player-profile-dialog { position: fixed; z-index: 103; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90vw, 360px); max-height: min(82dvh, 560px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 14px; border: 1px solid rgba(99, 209, 255, .52); border-radius: 16px; background: rgba(4, 14, 22, .99); box-shadow: 0 24px 80px rgba(0,0,0,.82); }
.player-profile-content { min-width: 0; overflow-y: auto; display: grid; justify-items: center; gap: 10px; padding: 8px 4px 4px; text-align: center; overscroll-behavior: contain; }
.player-profile-avatar { width: 76px; height: 76px; display: grid; place-items: center; overflow: hidden; border: 1px solid #477087; border-radius: 20px; background: #0b1b25; font-size: 42px; box-shadow: inset 0 0 20px rgba(99,209,255,.08); }
.player-profile-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.player-profile-name { max-width: 100%; overflow-wrap: anywhere; color: #fff; font-size: 20px; }
.player-profile-stats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.player-profile-stats span { min-width: 0; padding: 9px 6px; display: grid; gap: 2px; border: 1px solid rgba(105,174,207,.22); border-radius: 9px; background: rgba(9,26,37,.82); color: #86a6b8; font-size: 10px; }
.player-profile-stats strong { color: #fff; font-size: 16px; }
.profile-stats-summary { display: grid; gap: 7px; padding: 9px; border: 1px solid #254557; border-radius: 10px; background: #081923; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.profile-stat-grid span { display: grid; gap: 1px; padding: 6px 4px; border-radius: 7px; background: #102532; color: #7896a6; font-size: 7px; text-align: center; }
.profile-stat-grid strong { color: #f2fbff; font-size: 11px; }
.rating-trend { width: 100%; height: 54px; display: block; border-radius: 7px; background: linear-gradient(180deg, rgba(53,201,255,.1), transparent); }
.rating-trend polyline { fill: none; stroke: #62d5ff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.match-history-title { color: #dff6ff; font-size: 11px; text-align: left; }
.recent-matches { min-width: 0; display: grid; gap: 6px; }
.recent-match { min-width: 0; display: grid; gap: 5px; padding: 7px; border: 1px solid rgba(91, 167, 202, .2); border-radius: 8px; background: rgba(8, 24, 34, .76); color: #8da7b5; font-size: 8px; }
.recent-match header { min-width: 0; display: grid; grid-template-columns: minmax(76px, 1fr) auto auto; gap: 6px; align-items: center; }
.recent-match b { color: #dff6ff; }
.recent-match em { color: #64e1ad; font-style: normal; font-weight: 900; }
.recent-match em.negative { color: #ff7895; }
.recent-match ul { min-width: 0; margin: 0; padding: 0; display: grid; gap: 3px; list-style: none; }
.recent-match li { min-width: 0; min-height: 36px; display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: 5px; border-top: 1px solid rgba(99, 209, 255, .1); }
.recent-match li > button, .recent-match li > span { min-width: 0; overflow: hidden; border: 0; background: transparent; color: #effaff; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.recent-match li > button { min-height: 36px; padding: 0; text-decoration: underline; text-decoration-color: rgba(99, 209, 255, .5); text-underline-offset: 3px; cursor: pointer; }
.recent-match li small { color: #8ba5b3; white-space: nowrap; }
.player-profile-error { padding: 28px 8px; color: #a9c0cc; font-size: 12px; }
.danger { min-height: 44px; border: 1px solid #ff7183; border-radius: 11px; background: #9c2f43; color: #fff; font-weight: 900; }
.settings-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: #f2faff; font-size: 16px; }
.settings-close { width: 44px; height: 44px; padding: 0; border: 1px solid #45657a; border-radius: 12px; background: #0d202d; color: #fff; font-size: 27px; line-height: 1; cursor: pointer; }
.setup label { color: #86a3b4; font-size: 9px; letter-spacing: .06em; }
.setup select, .setup input:not([type="checkbox"]) { display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 8px 9px; border: 1px solid #315064; border-radius: 9px; background: #0a1721; color: #fff; font-size: 16px; }
.effect-toggle { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(100, 187, 237, .2); border-radius: 11px; background: rgba(16, 39, 53, .7); cursor: pointer; }
.effect-toggle input { appearance: none; flex: 0 0 46px; width: 46px; height: 28px; margin: 0; border: 1px solid #49677b; border-radius: 999px; background: #09151e; position: relative; }
.effect-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #8ea4b2; transition: .18s; }
.effect-toggle input:checked { background: #824052; border-color: #ff718c; }
.effect-toggle input:checked::after { left: 21px; background: #fff; }
.effect-toggle span { display: grid; gap: 2px; }
.effect-toggle strong { color: #edf8ff; font-size: 11px; letter-spacing: 0; }
.effect-toggle small { color: #7794a5; font-size: 8px; letter-spacing: 0; }
.sound-samples { display: grid; gap: 7px; padding: 9px 10px; border: 1px solid rgba(100, 187, 237, .2); border-radius: 11px; background: rgba(16, 39, 53, .7); }
.sound-samples > div:first-child { display: grid; gap: 2px; }
.sound-samples strong { color: #edf8ff; font-size: 11px; }
.sound-samples small { color: #7794a5; font-size: 8px; }
.sound-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sound-options button { min-width: 0; min-height: 44px; padding: 6px; border: 1px solid #315269; border-radius: 9px; background: #0a1822; color: #c9dce6; font-size: 11px; font-weight: 850; }
.sound-options button[aria-pressed="true"] { border-color: #63d1ff; background: linear-gradient(145deg, #124865, #0b2536); color: #fff; box-shadow: inset 0 0 14px rgba(44,190,255,.14); }
.dice-color-setting { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; gap: 8px 10px; padding: 9px 10px; border: 1px solid rgba(100, 187, 237, .2); border-radius: 11px; background: rgba(16, 39, 53, .7); }
.dice-color-setting > div:first-child { display: grid; gap: 2px; }
.dice-color-setting strong { color: #edf8ff; font-size: 11px; }
.dice-color-setting small { color: #7794a5; font-size: 8px; }
.dice-color-setting small.warning { color: #ffd166; }
#dice-color { width: 52px; height: 42px; margin: 0; padding: 3px; border: 1px solid #52738a; border-radius: 9px; background: #09151e; cursor: pointer; }
.color-presets { grid-column: 1 / -1; display: flex; gap: 7px; }
.color-swatch { width: 30px; height: 30px; padding: 0; border: 2px solid rgba(255,255,255,.24); border-radius: 50%; background: var(--swatch); cursor: pointer; }
.color-swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px #132b39, 0 0 0 4px var(--swatch); }
.settings-profile-inline { display: grid; gap: 9px; padding-top: 10px; border-top: 1px solid rgba(112, 181, 218, .24); }
.settings-subhead { color: #edf8ff; font-size: 12px; }
.account-linking { margin-top: 4px; padding: 10px; display: grid; gap: 8px; border: 1px solid rgba(99,209,255,.25); border-radius: 11px; background: rgba(8,28,39,.8); }
.account-linking .settings-subhead { display: flex; justify-content: space-between; gap: 8px; }
.account-linking p { margin: 0; color: #86a3b4; font-size: 9px; line-height: 1.5; }
.account-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.account-buttons button { min-height: 44px; border: 1px solid #35586d; border-radius: 9px; background: #102532; color: #9bb3c0; font-size: 10px; font-weight: 850; }
.account-buttons button[data-auth-state="linked"] { border-color: #62e6b4; background: linear-gradient(145deg, rgba(20, 102, 78, .98), rgba(8, 47, 40, .98)); color: #effff8; box-shadow: inset 0 0 16px rgba(98, 230, 180, .16), 0 0 12px rgba(98, 230, 180, .16); }
.account-buttons button[data-auth-state="linked"]:disabled { opacity: 1; cursor: default; }
.account-buttons button[data-auth-state="linked"]:focus-visible { outline-color: #a4ffda; }
.svg-die[data-finish="1"], .die[data-finish="1"], .board-die[data-finish="1"] { --style-edge: #ffd66b; filter: saturate(1.18) contrast(1.05); }
.svg-die[data-finish="2"], .die[data-finish="2"], .board-die[data-finish="2"] { --style-edge: #9ca7b2; filter: saturate(.55) contrast(1.28); }
.svg-die[data-finish="3"], .die[data-finish="3"], .board-die[data-finish="3"] { --style-edge: #bff7ff; filter: saturate(.9) brightness(1.12); }
.svg-die[data-finish="4"], .die[data-finish="4"], .board-die[data-finish="4"] { --style-edge: #78f0c2; filter: saturate(1.3) hue-rotate(8deg); }
.svg-die[data-finish="5"], .die[data-finish="5"], .board-die[data-finish="5"] { --style-edge: #d5e0e8; filter: saturate(.72) contrast(1.12); }
.svg-die[data-finish] .die-face-top, .svg-die[data-finish] .die-face-left, .svg-die[data-finish] .die-face-right { stroke: var(--die-edge, rgba(10,12,11,.82)); }
[data-pip-style="1"] .svg-pip, [data-pip-style="1"] .pip { fill: transparent; background: transparent; stroke: var(--pip-color, #10151a); border: 1px solid var(--pip-color, #10151a); }
[data-pip-style="2"] .svg-pip, [data-pip-style="2"] .pip { filter: drop-shadow(0 0 2px #fff); }
[data-pip-style="3"] .svg-pip, [data-pip-style="3"] .pip { opacity: .72; transform-box: fill-box; transform-origin: center; transform: scale(.72); }
.profile-icon-editor { display: grid; gap: 7px; }
.profile-image-row { display: flex; align-items: center; gap: 10px; }
.profile-icon-preview { width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border: 1px solid #3b657d; border-radius: 14px; background: #0b1b25; font-size: 30px; }
.profile-icon-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.player-icon-image { width: 16px; height: 16px; display: inline-block; vertical-align: middle; object-fit: cover; border-radius: 50%; }
.image-upload { min-height: 44px; padding: 0 14px; display: flex; align-items: center; border: 1px solid #315064; border-radius: 10px; background: #102532; color: #dff5ff; font-size: 11px; font-weight: 850; cursor: pointer; }
.setup .image-upload input { position: absolute; width: 1px; height: 1px; min-height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

.match-found { position: fixed; z-index: 85; left: 50%; top: calc(env(safe-area-inset-top) + 57px); transform: translateX(-50%); width: min(94vw, 560px); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px; border: 1px solid #4289b5; border-radius: 14px; background: rgba(5, 18, 28, .97); box-shadow: 0 20px 70px #000; }
.match-found > div { grid-column: 1 / -1; display: grid; }
.match-found span { color: #8ba8b8; font-size: 9px; }
.primary { background: linear-gradient(135deg, #178be8, #55c7ff); }
.ghost { background: #0e202c; }

.game, .arena-wrap, .battle-dock, .battle-hud, .actions { min-width: 0; max-width: 100%; }
.game { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 92px 37px; gap: 5px; }
.game.playing { grid-template-rows: minmax(0, 1fr) 92px 37px; }
.game.online-mode.playing { grid-template-rows: minmax(0, 1fr) 92px; }
.game.online-mode .actions { display: none; }
.game:not(.playing) { grid-template-rows: minmax(0, 1fr); }
.game.pregame-stage:not(.playing) { grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
.game.pregame-stage > .arena-wrap { grid-row: 1; }
.game:not(.playing) .battle-hud, .game:not(.playing) .actions { display: none; }
.arena-wrap {
  position: relative;
  min-height: 0;
  contain: layout paint;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #315d78;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(35, 77, 108, .68) 0, rgba(17, 45, 68, .82) 45%, rgba(7, 25, 39, .96) 100%),
    #071927;
  box-shadow: inset 0 1px rgba(181, 231, 255, .16), inset 0 -34px 78px rgba(0, 0, 0, .34), 0 18px 48px rgba(0, 0, 0, .48);
}
.arena-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .42; background-image: radial-gradient(circle, rgba(144, 205, 235, .2) .75px, transparent 1px); background-size: 18px 18px; mask-image: radial-gradient(ellipse at center, #000 12%, transparent 88%); }
body[data-world="archipelago"] .arena-wrap { background: radial-gradient(ellipse at 18% 24%, rgba(71,119,103,.28) 0 7%, transparent 8%), radial-gradient(ellipse at 76% 72%, rgba(67,112,91,.24) 0 9%, transparent 10%), repeating-radial-gradient(ellipse at 45% 52%, transparent 0 24px, rgba(87,174,202,.09) 25px 27px, transparent 28px 44px), linear-gradient(160deg, #123a50, #061a29 72%); }
body[data-world="archipelago"] .arena-wrap::before { opacity: .35; background-image: linear-gradient(28deg, transparent 48%, rgba(136,211,224,.18) 49% 50%, transparent 51%), linear-gradient(-21deg, transparent 48%, rgba(136,211,224,.12) 49% 50%, transparent 51%); background-size: 52px 42px; }
body[data-world="highlands"] .arena-wrap { background: radial-gradient(ellipse at 35% 28%, rgba(167,181,147,.24), transparent 30%), radial-gradient(ellipse at 72% 64%, rgba(116,145,125,.24), transparent 32%), repeating-radial-gradient(ellipse at 50% 50%, transparent 0 29px, rgba(205,222,194,.08) 30px 31px, transparent 32px 51px), linear-gradient(150deg, #243b3a, #081b23 74%); }
body[data-world="highlands"] .arena-wrap::before { opacity: .28; background: linear-gradient(110deg, transparent 0 20%, rgba(225,235,224,.2) 35%, transparent 52% 100%); }
body[data-world="night"] .arena-wrap { background: radial-gradient(circle at 82% 14%, rgba(244,238,194,.58) 0 18px, rgba(150,196,217,.13) 19px 42px, transparent 43px), radial-gradient(ellipse at 50% 48%, rgba(49,73,119,.48), transparent 58%), linear-gradient(165deg, #101b3b, #050b18 78%); }
body[data-world="night"] .arena-wrap::before { opacity: .48; background-image: radial-gradient(circle, rgba(220,238,255,.55) .65px, transparent .9px); background-size: 23px 23px; }
body[data-world="volcanic-rift"] .arena-wrap, body[data-world="glacial-basin"] .arena-wrap, body[data-world="desert-fortress"] .arena-wrap, body[data-world="marsh-ruins"] .arena-wrap, body[data-world="ancient-grove"] .arena-wrap, body[data-world="storm-coast"] .arena-wrap, body[data-world="autumn-valley"] .arena-wrap, body[data-world="crystal-cavern"] .arena-wrap, body[data-world="moonlit-ruins"] .arena-wrap, body[data-world="thunder-plateau"] .arena-wrap, body[data-world="crimson-badlands"] .arena-wrap, body[data-world="coral-shallows"] .arena-wrap, body[data-world="sunken-empire"] .arena-wrap, body[data-world="bamboo-gorge"] .arena-wrap, body[data-world="obsidian-citadel"] .arena-wrap, body[data-world="aurora-tundra"] .arena-wrap { background-position: center; background-repeat: no-repeat; background-size: cover; }
body[data-world="volcanic-rift"] .arena-wrap { background-image: linear-gradient(rgba(3,12,20,.34), rgba(3,12,20,.65)), url("./assets/battlefields/volcanic-rift.webp"); }
body[data-world="glacial-basin"] .arena-wrap { background-image: linear-gradient(rgba(3,12,28,.30), rgba(3,12,28,.65)), url("./assets/battlefields/glacial-basin.webp"); }
body[data-world="desert-fortress"] .arena-wrap { background-image: linear-gradient(rgba(25,8,4,.28), rgba(20,7,4,.64)), url("./assets/battlefields/desert-fortress.webp"); }
body[data-world="marsh-ruins"] .arena-wrap { background-image: linear-gradient(rgba(3,20,18,.30), rgba(2,13,15,.66)), url("./assets/battlefields/marsh-ruins.webp"); }
body[data-world="ancient-grove"] .arena-wrap { background-image: linear-gradient(rgba(4,19,12,.30), rgba(2,13,12,.64)), url("./assets/battlefields/ancient-grove.webp"); }
body[data-world="storm-coast"] .arena-wrap { background-image: linear-gradient(rgba(3,11,24,.34), rgba(3,9,19,.66)), url("./assets/battlefields/storm-coast.webp"); }
body[data-world="autumn-valley"] .arena-wrap { background-image: linear-gradient(rgba(24,10,5,.28), rgba(15,8,6,.63)), url("./assets/battlefields/autumn-valley.webp"); }
body[data-world="crystal-cavern"] .arena-wrap { background-image: linear-gradient(rgba(8,5,26,.30), rgba(4,4,18,.64)), url("./assets/battlefields/crystal-cavern.webp"); }
body[data-world="moonlit-ruins"] .arena-wrap { background-image: linear-gradient(rgba(3,11,28,.30), rgba(3,9,23,.65)), url("./assets/battlefields/moonlit-ruins.webp"); }
body[data-world="thunder-plateau"] .arena-wrap { background-image: linear-gradient(rgba(2,9,21,.32), rgba(2,8,17,.66)), url("./assets/battlefields/thunder-plateau.webp"); }
body[data-world="crimson-badlands"] .arena-wrap { background-image: linear-gradient(rgba(30,7,4,.28), rgba(19,6,3,.65)), url("./assets/battlefields/crimson-badlands.webp"); }
body[data-world="coral-shallows"] .arena-wrap { background-image: linear-gradient(rgba(1,23,31,.34), rgba(1,14,23,.66)), url("./assets/battlefields/coral-shallows.webp"); }
body[data-world="sunken-empire"] .arena-wrap { background-image: linear-gradient(rgba(14,20,6,.30), rgba(7,13,7,.64)), url("./assets/battlefields/sunken-empire.webp"); }
body[data-world="bamboo-gorge"] .arena-wrap { background-image: linear-gradient(rgba(2,16,12,.34), rgba(2,10,9,.66)), url("./assets/battlefields/bamboo-gorge.webp"); }
body[data-world="obsidian-citadel"] .arena-wrap { background-image: linear-gradient(rgba(22,5,1,.28), rgba(13,4,2,.66)), url("./assets/battlefields/obsidian-citadel.webp"); }
body[data-world="aurora-tundra"] .arena-wrap { background-image: linear-gradient(rgba(2,9,27,.30), rgba(2,7,20,.65)), url("./assets/battlefields/aurora-tundra.webp"); }
body[data-world="volcanic-rift"] .arena-wrap::before, body[data-world="glacial-basin"] .arena-wrap::before, body[data-world="desert-fortress"] .arena-wrap::before, body[data-world="marsh-ruins"] .arena-wrap::before, body[data-world="ancient-grove"] .arena-wrap::before, body[data-world="storm-coast"] .arena-wrap::before, body[data-world="autumn-valley"] .arena-wrap::before, body[data-world="crystal-cavern"] .arena-wrap::before, body[data-world="moonlit-ruins"] .arena-wrap::before, body[data-world="thunder-plateau"] .arena-wrap::before, body[data-world="crimson-badlands"] .arena-wrap::before, body[data-world="coral-shallows"] .arena-wrap::before, body[data-world="sunken-empire"] .arena-wrap::before, body[data-world="bamboo-gorge"] .arena-wrap::before, body[data-world="obsidian-citadel"] .arena-wrap::before, body[data-world="aurora-tundra"] .arena-wrap::before { opacity: .16; }
.arena { position: relative; z-index: 2; grid-row: 1; min-height: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.arena-wrap.online-setup-visible { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
.arena-wrap.online-setup-visible .arena { position: relative; z-index: 2; grid-row: 1; inset: auto; width: 100%; height: 100%; }
.arena-wrap.controls-visible { grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
.arena-wrap.controls-visible .arena { position: relative; z-index: 2; grid-row: 1; inset: auto; width: 100%; height: 100%; }
.arena-wrap.roster-visible.controls-visible { grid-template-rows: auto minmax(0, 1fr) auto; }
.arena-wrap.roster-visible .match-roster { grid-row: 1; }
.arena-wrap.roster-visible .arena { grid-row: 2; }
.arena-wrap.controls-visible .board-controls { position: relative; grid-row: 2; right: auto; bottom: auto; min-height: 44px; }
.arena-wrap.roster-visible.controls-visible .board-controls { grid-row: 3; }
.arena-wrap.controls-visible .replay-controls { bottom: 56px; }
.online-lobby { position: fixed; z-index: 94; top: calc(max(env(safe-area-inset-top), 8px) + 58px); right: 8px; width: min(320px, calc(100vw - 16px)); display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(99, 209, 255, .45); border-radius: 14px; background: rgba(3, 13, 20, .98); box-shadow: 0 10px 28px rgba(0,0,0,.52); }
.online-lobby.presearch { position: relative; z-index: 24; grid-row: 2; align-self: end; top: auto; right: auto; left: auto; width: min(100%, 440px); margin: 0 auto; transform: none; padding: 14px; }
.online-lobby-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.online-lobby-heading > span { display: grid; gap: 2px; }
.rules-link { min-height: 44px; padding: 4px 11px; border: 1px solid #315269; border-radius: 9px; background: #0d2431; color: #bdefff; font-size: 10px; font-weight: 900; }
.online-lobby small, .online-lobby legend { color: #77a0b5; font-size: 7px; font-weight: 900; letter-spacing: .11em; }
.population { display: flex; gap: 7px; }
.population span { flex: 1; padding: 6px; border-radius: 8px; background: #0d202c; color: #9cb7c5; font-size: 9px; text-align: center; }
.population b { color: #fff; font-size: 13px; }
.online-lobby fieldset { display: flex; gap: 6px; margin: 0; padding: 6px; border: 1px solid #264556; border-radius: 9px; }
.online-lobby fieldset label { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 7px; background: #102532; font-size: 10px; font-weight: 850; }
.online-lobby input { accent-color: #35dca4; }
.online-lobby .match-passphrase-toggle { min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid #264556; border-radius: 9px; background: #102532; }
.match-passphrase-toggle > span { display: grid; gap: 1px; }
.match-passphrase-toggle strong { font-size: 10px; }
.match-passphrase-toggle small { color: #84a9bb; font-size: 9px; font-weight: 700; }
.match-passphrase-field { display: grid; gap: 4px; padding: 8px 9px; border: 1px solid #264556; border-radius: 9px; background: #0d202c; }
.match-passphrase-field[hidden] { display: none; }
.match-passphrase-field label { display: grid; gap: 4px; color: #b7d0dc; font-size: 9px; font-weight: 850; }
.match-passphrase-field input { width: 100%; min-height: 42px; margin-top: 0; padding: 7px 9px; border: 1px solid #315064; border-radius: 8px; background: #071923; color: #fff; font-size: 16px; letter-spacing: .08em; }
.match-passphrase-field input:focus { border-color: #55cfff; outline: 2px solid rgba(85, 207, 255, .22); outline-offset: 1px; }
.online-lobby .match-bot-option { min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid #264556; border-radius: 9px; background: #102532; }
.match-bot-option > span { display: grid; gap: 1px; }
.match-bot-option strong { font-size: 10px; }
.online-setup-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.online-practice-note { margin: 0; color: #a9d8ef; font-size: clamp(9px, 2.5vw, 11px); font-weight: 700; line-height: 1.3; text-align: center; }
.online-setup-actions button { min-height: 46px; }
.spectator-list-section { display: grid; gap: 6px; padding-top: 7px; border-top: 1px solid rgba(101, 171, 203, .22); }
.spectator-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spectator-list-head > strong { font-size: 10px; }
.spectator-list-head button { min-height: 44px; padding: 3px 9px; border: 1px solid #315269; border-radius: 8px; background: #0d2431; color: #bdefff; font-size: 8px; }
.active-match-list { max-height: 132px; display: grid; gap: 5px; overflow-y: auto; }
.active-match-card { min-width: 0; padding: 7px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 7px; border: 1px solid #294b5e; border-radius: 9px; background: #0c202b; }
.active-match-card > div { min-width: 0; display: grid; gap: 2px; }
.active-match-card b { overflow: hidden; text-overflow: ellipsis; color: #f2fbff; font-size: 9px; white-space: nowrap; }
.active-match-card small { color: #8eafbf; font-size: 7px; }
.active-match-card button { grid-column: 2; grid-row: 1 / 3; min-height: 36px; padding: 4px 10px; border: 1px solid #4e9ec5; border-radius: 8px; background: #12384a; color: #eaf9ff; font-size: 9px; font-weight: 900; }
.match-roster { position: relative; z-index: 25; display: flex; gap: 4px; overflow-x: auto; overflow-y: visible; padding-bottom: 3px; scrollbar-width: none; }
.match-roster::-webkit-scrollbar { display: none; }
.game.pregame-stage .match-roster,
.arena-wrap.online-setup-visible .match-roster { display: none; }
.roster-player { position: relative; flex: 0 0 142px; min-width: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--player-color), white 25%); border-radius: 9px; background: rgba(3, 13, 20, .92); font-size: 8px; }
.roster-player.active { border-color: #ffe178; box-shadow: inset 0 0 12px rgba(255, 214, 90, .15); }
.roster-player.eliminated { order: 2; border-color: #69757b; background: rgba(29, 35, 39, .94); filter: grayscale(1); opacity: .58; }
.roster-profile { width: 100%; min-width: 0; min-height: 44px; padding: 5px 6px; display: grid; align-content: start; gap: 2px; border: 0; border-radius: inherit; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.roster-profile .roster-name-line { display: grid; grid-template-columns: max-content 7px max-content minmax(0, 1fr); align-items: start; gap: 3px; min-width: 0; white-space: normal; }
.roster-profile .rank, .roster-profile .roster-dot, .roster-profile .roster-icon { min-width: 0; white-space: nowrap; }
.roster-profile .roster-icon { line-height: 1; }
.roster-profile .player-icon-image { width: 12px; height: 12px; border-radius: 50%; object-fit: cover; vertical-align: top; }
.roster-profile .roster-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.roster-player .roster-metrics { min-width: 0; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 5px; overflow: visible; color: #86a3b4; line-height: 1.25; white-space: nowrap; }
.roster-player .roster-metrics > * { flex: 0 0 auto; white-space: nowrap; }
.roster-player .rank { color: #ffd166; }
.roster-player .roster-rating { color: #b9d7e5; }
.roster-reaction { position: absolute; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 9px; border: 1px solid #6fd9ff; border-radius: 999px; background: rgba(4,17,25,.97); font-size: 20px; box-shadow: 0 6px 20px #000; pointer-events: none; }
.result-panel { position: absolute; z-index: 50; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(88%, 360px); display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(255, 211, 92, .65); border-radius: 16px; background: rgba(4, 14, 21, .96); box-shadow: 0 0 50px rgba(255,196,53,.22), 0 20px 70px #000; }
.replay-controls { position: absolute; z-index: 49; left: 50%; bottom: 8px; width: min(220px, calc(100% - 16px)); transform: translateX(-50%); }
.replay-controls button { width: 100%; min-height: 44px; border-color: rgba(255, 196, 87, .72); background: linear-gradient(145deg, #3f2b1b, #1a1c1b); color: #ffe4a3; box-shadow: 0 5px 16px rgba(0, 0, 0, .44); }
.victory-title { color: #ffe07a; font-size: 28px; font-weight: 1000; text-align: center; letter-spacing: .12em; text-shadow: 0 0 20px rgba(255,207,69,.7); animation: victoryIn .55s cubic-bezier(.16,.9,.2,1); }
.victory-title.defeat { color: #b8c7cf; text-shadow: none; }
.total-turns { padding: 5px 8px; border: 1px solid rgba(255,211,92,.24); border-radius: 8px; background: rgba(255,211,92,.07); color: #ffe69b; text-align: center; font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.result-rating-change { color: #9ff0d0; text-align: center; font-size: 18px; font-weight: 1000; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.result-actions button { min-height: 46px; }
.final-ranking { display: grid; gap: 4px; }
.final-rank-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(18,40,52,.85); font-size: 10px; }
.final-rank-row > strong { font-size: 9px; color: #9fe5c8; white-space: nowrap; }
.final-rank-row em, .roster-rating-change { color: #79e4bd; font-style: normal; }
.final-rank-row em.negative, .roster-rating-change.negative { color: #ff7895; }
.pregame { position: relative; z-index: 22; grid-row: 2; align-self: end; width: min(100%, 520px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 88px; align-items: end; gap: 7px; padding: 10px; border: 1px solid rgba(154, 218, 245, .25); border-radius: 14px; background: rgba(3, 12, 18, .98); box-shadow: 0 7px 18px rgba(0, 0, 0, .3); }
.matchmaking-banner { grid-column: 1 / -1; min-width: 0; padding: 8px 10px; display: grid; gap: 2px; border: 1px solid rgba(100, 207, 255, .62); border-radius: 10px; background: linear-gradient(135deg, rgba(20, 94, 128, .92), rgba(9, 37, 54, .96)); box-shadow: inset 0 0 18px rgba(75, 195, 255, .12), 0 0 14px rgba(41, 172, 231, .12); }
.matchmaking-banner strong { min-width: 0; display: flex; align-items: center; gap: 7px; overflow-wrap: anywhere; color: #f5fcff; font-size: 12px; }
.matchmaking-banner strong i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #74dcff; }
.matchmaking-banner small { min-width: 0; overflow-wrap: anywhere; color: #b8d9e8; font-size: 9px; font-weight: 750; }
.matchmaking-banner.standalone { position: absolute; z-index: 21; left: 50%; top: 50%; width: min(calc(100% - 32px), 420px); transform: translate(-50%, -50%); padding: 14px 16px; }
.pregame label { min-width: 0; }
.pregame label span { display: block; color: #86a9bb; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.pregame select { width: 100%; min-height: 44px; margin-top: 3px; padding: 7px 27px 7px 8px; border: 1px solid #315064; border-radius: 10px; background: #0a1721; color: #fff; font-size: 16px; }
.map-refresh { align-self: end; width: 88px; min-height: 44px; padding: 0 7px; border: 1px solid #315064; border-radius: 10px; background: linear-gradient(145deg, rgba(28, 76, 91, .9), rgba(8, 24, 34, .94)); color: #c8f5ff; font-size: 11px; font-weight: 900; white-space: nowrap; cursor: pointer; }
.map-refresh:disabled { opacity: .38; cursor: default; }
.start-game { grid-column: 1 / -1; min-height: 48px; border: 1px solid rgba(100, 232, 188, .72); border-radius: 11px; background: linear-gradient(135deg, #167c69, #1eaf86); color: #fff; font-size: 13px; font-weight: 950; letter-spacing: .04em; cursor: pointer; }
.territory-depth { fill: #050c13; stroke: #02070c; stroke-width: 12; opacity: .96; filter: none; pointer-events: none; }
.territory { stroke: #07131e; stroke-width: 8; stroke-linejoin: round; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; filter: none; }
.territory.neutral { opacity: .76; }
.territory:focus, .territory:focus-visible { outline: none; }
.territory.cellular, .territory-depth.cellular { stroke: none; }
.territory-border { pointer-events: none; fill: none; stroke: #06121c; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.territory-terrain { pointer-events: none; fill: url(#terrain-photo); opacity: .065; mix-blend-mode: normal; }
.territory-surface { pointer-events: none; fill: url(#territory-grain); opacity: .1; mix-blend-mode: normal; }
.territory-contours { pointer-events: none; fill: none; opacity: 0; }
.territory-rim { pointer-events: none; fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2; transform: translateY(-1px); }
.territory-rim.cellular { display: none; }
.territory-highlight { pointer-events: none; fill: none; stroke: transparent; stroke-width: 0; stroke-linejoin: round; stroke-linecap: round; }
.game.playing .territory-highlight.own { fill: none; }
.territory-highlight.actionable { fill: none; stroke: rgba(255, 232, 125, .5); stroke-width: .7; filter: none; animation: none; }
.territory-highlight.selected { stroke: #fff; stroke-width: 2; filter: none; }
.territory-highlight.targetable { stroke: #ffdc61; stroke-width: 2; stroke-dasharray: 7 6; filter: none; }
.territory-highlight.targetable.favorable { stroke: #43e9a7; }
.territory-highlight.targetable.risky { stroke: #ff6b5b; }
.attack-guide { pointer-events: none; fill: none; stroke: #ffdc61; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 8; animation: none; filter: none; }
.attack-guide.favorable { stroke: #43e9a7; }
.attack-guide.risky { stroke: #ff6b5b; }
.attack-guide-end { pointer-events: none; fill: #fff; stroke: #ffdc61; stroke-width: 2; animation: none; }
.replay-attack-guide { pointer-events: none; fill: none; stroke: #ffba52; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 12; animation: none; }
.replay-attack-guide.captured { stroke: #68e6ad; }
.replay-arrowhead-shape { fill: #fff4bd; stroke: #ffba52; stroke-width: .8; }
.replay-source-ring, .replay-target-ring { pointer-events: none; fill: rgba(20,173,255,.12); stroke: #58cfff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: replaySourceCharge .34s ease-out infinite; }
.replay-target-ring { fill: rgba(255,153,46,.18); stroke: #ffad42; animation: replayTargetImpact .34s ease-out infinite; }
.replay-impact-core { pointer-events: none; fill: #fff8d8; stroke: #ffad42; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: replayImpactCore .34s ease-out infinite; filter: drop-shadow(0 0 7px #ff9e38); }
.replay-impact-core.captured { stroke: #68e6ad; filter: drop-shadow(0 0 7px #68e6ad); }
.replay-flight-orb { pointer-events: none; fill: #fff; stroke: #ffba52; stroke-width: 2; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 9px #ff9e38); }
.replay-flight-orb.captured { stroke: #68e6ad; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 9px #68e6ad); }
.territory-highlight.combat-source { stroke: #35c9ff; stroke-width: 2.2; }
.territory-highlight.combat-target { stroke: #ffb52d; stroke-width: 2.2; filter: none; }
.territory-name { pointer-events: none; fill: rgba(255, 255, 255, .9); text-anchor: middle; paint-order: stroke; stroke: #020507; stroke-width: 4; font-size: 10px; font-weight: 900; }
.territory-dice { pointer-events: visiblePainted; }
.reinforcement-growing { transform-box: fill-box; transform-origin: center bottom; animation: reinforcementGrow .055s cubic-bezier(.18, .82, .2, 1); }
.svg-die { filter: none; }
.die-face-top, .die-face-left, .die-face-right { stroke: rgba(3,9,14,.92); stroke-width: 1.4; stroke-linejoin: round; }
.svg-pip, .svg-side-pip { fill: var(--pip-color, #0a0c0d); stroke: rgba(255,255,255,.28); stroke-width: .55; }
.die-edge-shine { fill: none; stroke: rgba(255,255,255,.42); stroke-width: 1.1; stroke-linecap: round; }
.die-side-pips { pointer-events: none; }
.die-stack-separator-halo, .die-stack-separator { pointer-events: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.die-stack-separator-halo { stroke: rgba(255,255,255,.72); stroke-width: 5; opacity: .92; }
.die-stack-separator { stroke: #071017; stroke-width: 2.7; opacity: 1; }

.dice-flight-layer, .attack-effect-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dice-flight-layer { z-index: 38; }
.attack-effect-layer { z-index: 37; isolation: isolate; mix-blend-mode: normal; }
.board-die { position: absolute; isolation: isolate; left: 0; top: 0; width: clamp(34px, 5vw, 46px); height: clamp(34px, 5vw, 46px); overflow: visible; filter: drop-shadow(0 8px 8px rgba(0,0,0,.58)); will-change: transform; }
.board-die.defense { border-color: #ffdc79; box-shadow: inset -4px -5px 8px rgba(12, 29, 39, .18), 0 8px 18px rgba(0, 0, 0, .5), 0 0 12px rgba(255, 200, 76, .58); }
.attack-beam { position: absolute; height: 3px; transform-origin: left center; border-radius: 999px; background: linear-gradient(90deg, transparent, #70cfff 22%, #fff 64%, #ffcf65); box-shadow: 0 0 8px #65c9ff, 0 0 19px #248ed6, 0 0 34px rgba(255, 181, 56, .72); }
.impact-core { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px 8px #65d0ff, 0 0 48px 20px rgba(64, 162, 255, .72); animation: impactCore .4s ease-out forwards; }
.impact-core.captured { box-shadow: 0 0 20px 8px #fff0a4, 0 0 52px 22px rgba(255, 124, 52, .82); }
.impact-ring { position: absolute; width: 18px; height: 18px; margin: -9px; border: 3px solid #e9f9ff; border-radius: 50%; box-shadow: 0 0 15px #75d8ff; animation: impactRing .5s ease-out forwards; }
.impact-spark { position: absolute; width: 4px; height: 15px; margin: -7px -2px; border-radius: 999px; background: linear-gradient(#fff, #ffb836, transparent); box-shadow: 0 0 8px #ffe6a5; animation: sparkBurst .48s cubic-bezier(.12, .7, .2, 1) forwards; }

.actions { position: relative; min-height: 0; display: grid; grid-template-rows: 31px; gap: 5px; }
.legend { min-width: 0; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.legend::-webkit-scrollbar { display: none; }
.player-chip { flex: 0 0 105px; padding: 3px 5px; border: 1px solid rgba(154, 218, 245, .12); border-radius: 9px; background: rgba(5, 15, 22, .88); font-size: 8px; white-space: nowrap; }
.player-chip.active { border-color: #ffd165; box-shadow: inset 0 0 12px rgba(255, 196, 63, .13); }
.player-chip i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; }
.player-chip small { display: block; color: #7591a2; font-size: 7px; }
.player-chip .rank { margin-right: 3px; color: #ffd166; }
.command-row { display: none; }
.board-controls { position: absolute; z-index: 47; right: 8px; bottom: 8px; display: flex; align-items: stretch; justify-content: flex-end; gap: 6px; }
.online-connection-status { position: absolute; z-index: 28; left: 50%; top: 50%; width: min(88%, 320px); transform: translate(-50%, -50%); display: grid; gap: 4px; padding: 14px; border: 1px solid rgba(95, 195, 236, .55); border-radius: 14px; background: rgba(3, 14, 24, .92); box-shadow: 0 12px 35px rgba(0, 0, 0, .46); color: #eaf9ff; text-align: center; }
.online-connection-status small { color: #9cc5d8; font-size: 10px; line-height: 1.4; }
.end-turn { position: relative; flex: 0 0 74px; width: 74px; min-height: 44px; padding: 0; background: linear-gradient(145deg, #153447, #071723); border-color: #5d91ad; color: #eaf8ff; font-size: 9px; line-height: 1.05; letter-spacing: .07em; box-shadow: 0 5px 14px rgba(0,0,0,.42); }
.end-turn:disabled { border-color: #34434c; background: #172128; color: #65747d; box-shadow: none; opacity: .82; }
.defense-side .total { transform: translateX(-30px); }
.reaction-toggle { min-height: 44px; border: 1px solid #315269; border-radius: 11px; background: #0e202c; color: #eef8ff; }
.reaction-wrap { position: relative; z-index: 48; flex: 0 0 44px; width: 44px; height: 44px; }
.reaction-toggle { width: 44px; font-size: 18px; }
.reaction-palette { position: absolute; right: -80px; bottom: 49px; width: min(360px, calc(100vw - 20px)); max-height: 190px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 36px); justify-content: end; gap: 4px; padding: 7px; border: 1px solid #3b6076; border-radius: 10px; background: rgba(4,14,21,.98); box-shadow: 0 12px 36px rgba(0,0,0,.58); }
.reaction-palette button { width: 36px; height: 36px; border: 0; border-radius: 8px; background: #122b39; font-size: 17px; }
.reaction-bubble { display: none !important; }
.feedback-dialog { position: fixed; z-index: 98; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 560px); max-height: min(90dvh, 760px); padding: 14px; display: grid; gap: 10px; overflow-y: auto; border: 1px solid #3c6077; border-radius: 16px; background: rgba(4,13,20,.99); box-shadow: 0 24px 80px rgba(0,0,0,.72); }
.feedback-dialog > .settings-head { position: sticky; z-index: 2; top: -14px; padding-top: 8px; background: #040d14; }
#feedback-form, #forum-form { display: grid; gap: 8px; }
#feedback-form label, #forum-form label { display: grid; gap: 4px; color: #b7d0dc; font-size: 9px; font-weight: 850; }
#feedback-form select, #feedback-form input, #feedback-form textarea, #forum-form select, #forum-form input, #forum-form textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #315064; border-radius: 9px; background: #0a1721; color: #fff; font-size: 16px; resize: vertical; }
#feedback-form button, #forum-form button { min-height: 44px; border: 1px solid #4ebeea; border-radius: 10px; color: #fff; }
.attachment-picker input { padding: 9px !important; }
.attachment-picker small { color: #718f9f; font-weight: 500; }
.attachment-preview, .feedback-attachments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.attachment-preview img, .feedback-attachments img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; border: 1px solid #355e75; border-radius: 7px; background: #06121a; }
.feedback-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.feedback-list-head small { color: #7f9baa; font-size: 8px; }
.feedback-list { display: grid; gap: 7px; }
.feedback-post { padding: 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; border: 1px solid #29495a; border-radius: 10px; background: #0b1d27; }
.feedback-post h3, .feedback-post p { grid-column: 1; margin: 0; }
.feedback-post h3 { font-size: 11px; }
.feedback-post p { color: #abc1cc; font-size: 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-post small { grid-column: 1; color: #7595a5; font-size: 8px; }
.feedback-post button { grid-column: 2; grid-row: 1 / 4; min-width: 52px; min-height: 44px; border: 1px solid #3c7188; border-radius: 9px; background: #102b38; color: #d9f6ff; font-size: 9px; }
.feedback-post.prioritized { border-color: #e1ba52; }
.feedback-post .feedback-attachments { grid-column: 1 / -1; }
.forum-dialog { width: min(96vw, 720px); padding: 0; gap: 0; overflow: hidden; }
.forum-dialog > .settings-head { position: static; padding: 14px 14px 11px; border-bottom: 1px solid #1b3b4d; background: linear-gradient(135deg, #102c3c, #091821); }
.forum-dialog > .settings-head span { display: grid; gap: 1px; }
.forum-dialog > .settings-head span small { color: #54c9ec; font-size: 8px; letter-spacing: .2em; }
.forum-dialog > .settings-head span strong { font-size: 17px; }
#forum-home, .forum-thread { max-height: calc(90dvh - 65px); overflow-y: auto; padding: 12px; }
.forum-categories { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 9px; scrollbar-width: none; }
.forum-categories::-webkit-scrollbar { display: none; }
.forum-categories button { flex: 0 0 auto; min-height: 38px; padding: 0 11px; border: 1px solid #28495a; border-radius: 999px; background: #081720; color: #a9c1ce; font-size: 11px; font-weight: 800; white-space: nowrap; }
.forum-categories button.active { border-color: #53c8ea; background: #12394a; color: #fff; box-shadow: inset 0 0 0 1px #53c8ea44; }
.forum-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px 12px; }
.forum-toolbar > span { display: grid; gap: 2px; }
.forum-toolbar strong { color: #fff; font-size: 14px; }
.forum-toolbar small { color: #7894a3; font-size: 9px; }
.forum-toolbar button { width: auto; min-height: 40px; padding: 0 12px; }
.forum-compose { margin-bottom: 12px; padding: 12px; border: 1px solid #2c566c; border-radius: 14px; background: #0b1c27; box-shadow: inset 0 1px 0 #ffffff0a; }
.forum-compose-head { display: flex; align-items: center; justify-content: space-between; }
.forum-compose-head strong { color: #fff; font-size: 13px; }
.forum-compose-head button { width: auto !important; min-width: 64px; }
.forum-topic-list { display: grid; gap: 7px; }
.forum-topic { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 76px; padding: 10px; border: 1px solid #203f50; border-radius: 12px; background: linear-gradient(135deg, #0a1b25, #07131b); color: #fff; text-align: left; }
.forum-topic:hover, .forum-topic:focus-visible { border-color: #4bbfe5; background: #0e2633; }
.forum-topic-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #153547; font-size: 20px; }
.forum-topic-main { min-width: 0; }
.forum-topic-main strong { display: block; overflow: hidden; color: #f7fbfd; font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.forum-topic-main small { display: block; margin-top: 4px; overflow: hidden; color: #7896a6; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.forum-topic-stats { display: grid; gap: 4px; min-width: 54px; color: #8ba7b5; font-size: 9px; text-align: right; }
.forum-topic-stats b { color: #dcebf1; font-size: 11px; }
.forum-priority { display: inline-block; margin-right: 5px; padding: 2px 5px; border-radius: 5px; background: #f0aa2522; color: #ffc454; font-size: 8px; }
.forum-pending { display: inline-block; margin-right: 5px; padding: 2px 5px; border-radius: 5px; background: #3c5f7222; color: #9fd5e8; font-size: 8px; }
.forum-back { min-height: 40px; padding: 0 10px; border: 0; background: transparent; color: #62cdf0; font-weight: 800; }
.forum-thread-post { padding: 13px; border: 1px solid #2d5265; border-radius: 14px; background: #091a24; }
.forum-thread-post h2 { margin: 7px 0; color: #fff; font-size: 18px; line-height: 1.35; }
.forum-thread-post > p, .forum-reply p { margin: 9px 0; color: #cfdee5; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.forum-thread-meta { color: #7998a7; font-size: 9px; }
.forum-thread-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.forum-thread-actions button { min-height: 40px; padding: 0 13px; border: 1px solid #376779; border-radius: 9px; background: #102b38; color: #fff; font-weight: 800; }
.forum-moderation-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.forum-moderation-actions button { min-height: 38px; padding: 0 10px; border: 1px solid #49606d; border-radius: 8px; background: #13232c; color: #c5d8df; font-size: 11px; font-weight: 800; }
.forum-moderation-actions button[data-forum-report-type] { border-color: #9d5961; background: #3e2029; color: #ffd9dc; }
.forum-blocked-label { display: inline-flex; align-items: center; min-height: 38px; padding: 0 10px; border-radius: 8px; background: #17302b; color: #9be4c8; font-size: 11px; font-weight: 800; }
.forum-replies-head { margin: 15px 2px 7px; color: #b7d0dc; font-size: 11px; }
.forum-replies { display: grid; gap: 7px; }
.forum-reply { padding: 10px 12px; border-left: 3px solid #28566c; border-radius: 6px 10px 10px 6px; background: #081720; }
.forum-reply p { margin: 4px 0; }
.forum-reply-form { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #1e3d4d; }
.forum-reply-form label { display: grid; gap: 5px; color: #b7d0dc; font-size: 10px; font-weight: 800; }
.forum-reply-form textarea { width: 100%; min-height: 82px; padding: 9px 10px; border: 1px solid #315064; border-radius: 10px; background: #07141d; color: #fff; font-size: 16px; resize: vertical; }
.forum-reply-form button { min-height: 44px; }
.forum-thread-post .feedback-attachments { margin-top: 10px; }
.account-help { display: block; margin-top: 6px; color: #7794a3; font-size: 9px; line-height: 1.45; }
.account-help.error { color: #ff9a9a; }
.account-existing-login { width: 100%; min-height: 42px; margin-top: 8px; border: 1px solid #53c8ea; border-radius: 9px; background: #12394a; color: #f4fbff; font-size: 11px; font-weight: 850; }
.account-auth-retry { width: 100%; min-height: 42px; margin-top: 8px; border: 1px solid #35586d; border-radius: 9px; background: #102532; color: #d9edf5; font-size: 11px; font-weight: 850; }
.promotion-dialog { position: fixed; z-index: 104; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 360px); max-height: 92dvh; padding: 12px; display: grid; justify-items: center; gap: 9px; border: 1px solid rgba(255,211,91,.7); border-radius: 18px; background: rgba(4,13,20,.99); box-shadow: 0 24px 90px rgba(0,0,0,.82); }
.promotion-dialog .settings-close { position: absolute; right: 8px; top: 8px; z-index: 2; }
.promotion-dialog canvas { width: 100%; max-height: 66dvh; object-fit: contain; border-radius: 12px; background: #071927; }
.promotion-dialog > strong { color: #ffe68d; font-size: 20px; }
.promotion-dialog > small { color: #9db6c3; }
.promotion-dialog .primary { width: 100%; min-height: 48px; border-radius: 11px; color: #fff; }
.profile-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.profile-icons button { width: 42px; height: 42px; border: 1px solid #315269; border-radius: 10px; background: #0b1b26; font-size: 20px; }
.profile-icons button.active { border-color: #5ee4b5; box-shadow: 0 0 0 2px rgba(94,228,181,.2); }
.friends-head { display: flex; justify-content: space-between; align-items: center; }
.friends-head button { min-height: 34px; border: 1px solid #315269; border-radius: 8px; color: #fff; }
.friends-list { max-height: 160px; overflow: auto; display: grid; gap: 5px; }
.friend-row { display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 8px; background: #0d202c; font-size: 10px; }
.friend-row button { margin-left: auto; border: 0; border-radius: 6px; background: #18785f; color: #fff; }
.secondary { padding: 7px 11px; background: #152b38; }
.battle-dock { min-height: 0; position: relative; }
.battle-hud { position: relative; z-index: 45; width: 100%; height: 100%; box-sizing: border-box; padding: 5px 9px; border: 1px solid rgba(119, 216, 255, .48); border-radius: 14px; background: linear-gradient(180deg, rgba(11, 27, 40, .96), rgba(3, 10, 17, .96)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 22px rgba(61,177,233,.1); pointer-events: none; animation: combatIn .18s cubic-bezier(.2,.8,.2,1); transition: opacity .18s, filter .18s; }
.battle-hud.idle { opacity: .46; filter: saturate(.3); }
.battle-hud.idle .battle-score strong { font-size: 0; }
.battle-hud.idle .battle-score strong::after { content: "READY"; font-size: 15px; }
.battle-head { position: absolute; inset: 4px 8px auto; z-index: 2; display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; gap: 5px; min-height: 12px; color: #83a9bd; font-size: 7px; letter-spacing: .14em; }
.battle-head span { color: #fff; font-size: 10px; }
.battle-head #battle-result { text-align: right; }
.battle-head .live-turn-count { color: #ffe69b; font-size: 8px; font-weight: 900; letter-spacing: .04em; }
.battle-head .turn-clock { min-width: 43px; padding: 1px 4px; border: 1px solid rgba(105,217,255,.3); border-radius: 6px; color: #bdefff; font-size: 8px; font-weight: 900; letter-spacing: 0; text-align: center; }
.battle-head .turn-clock.urgent { border-color: rgba(255,98,113,.7); color: #ff9aa5; }
.battle-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr); align-items: center; gap: 3px; }
.battle-side { min-width: 0; height: 76px; padding-top: 12px; display: grid; grid-template-rows: 9px 43px 11px; align-items: center; justify-items: center; gap: 1px; }
.battle-side small { color: #86a4b4; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.dice-rack { min-height: 39px; display: grid; grid-template-columns: repeat(4, 18px); grid-auto-rows: 18px; justify-content: center; align-content: center; gap: 2px; overflow: visible; }
.die { width: 20px; height: 20px; overflow: visible; filter: drop-shadow(0 4px 3px rgba(0,0,0,.5)); }
.die-face-front { stroke: var(--die-edge, rgba(10,12,11,.82)); stroke-width: 1.2; }
.die.rolling { animation: rollFlat .22s linear infinite; }
.total { display: block; color: #f7fbff; font-size: 12px; line-height: 1; }
.battle-score { display: grid; justify-items: center; gap: 2px; }
.battle-score strong { color: #fff; font-size: 21px; font-weight: 950; white-space: nowrap; text-shadow: 0 0 18px rgba(105,211,255,.42); }
.battle-score small { color: #57798a; font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.battle-outcome { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); min-height: 14px; color: #ffd166; text-align: center; font-size: 10px; font-weight: 950; letter-spacing: .04em; white-space: nowrap; }
.your-turn-cue { position: absolute; z-index: 44; left: 50%; top: 54px; transform: translateX(-50%); padding: 8px 18px; border: 1px solid rgba(255,224,104,.72); border-radius: 999px; background: rgba(45,35,8,.92); color: #fff0a7; font-size: 13px; font-weight: 1000; letter-spacing: .08em; pointer-events: none; box-shadow: 0 0 24px rgba(255,211,73,.38); animation: yourTurnCue 1.2s ease-out both; }
.player-color-cue { position: absolute; z-index: 46; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 190px; min-height: 54px; padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 14px; background: rgba(3,13,20,.94); color: #fff; font-size: 15px; box-shadow: 0 14px 40px rgba(0,0,0,.5); pointer-events: none; }
.player-color-cue i { width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; background: var(--player-color); box-shadow: 0 0 16px color-mix(in srgb, var(--player-color), transparent 35%); }
.game.player-intro .territory-group:not(.player-intro-own) { opacity: .24; }
.game.player-intro .territory-group.player-intro-own { opacity: 1; }

#toast { position: fixed; z-index: 120; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translate(-50%, 18px); padding: 9px 14px; border-radius: 10px; background: #e9f7ff; color: #07141c; font-size: 11px; font-weight: 850; opacity: 0; pointer-events: none; transition: .2s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes pulse { 50% { opacity: .38; } }
@keyframes ownOverlayPulse { from { fill-opacity: .12; } to { fill-opacity: .58; } }
@keyframes attackGuideFlow { to { stroke-dashoffset: -26; } }
@keyframes replayGuideFlow { to { stroke-dashoffset: -22; } }
@keyframes replaySourceCharge { from { transform: scale(1.45); opacity: 0; } 35% { opacity: 1; } to { transform: scale(.62); opacity: .78; } }
@keyframes replayTargetImpact { from { transform: scale(.38); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@keyframes replayImpactCore { from { transform: scale(.55); opacity: .95; } to { transform: scale(1.55); opacity: 0; } }
@keyframes attackGuideEnd { from { r: 3; opacity: .55; } to { r: 5; opacity: 1; } }
@keyframes combatIn { from { opacity: 0; transform: translateY(3px) scale(.98); } }
@keyframes reinforcementGrow { from { opacity: .45; transform: translateY(12px) scaleY(.55); filter: brightness(1.9) drop-shadow(0 0 12px rgba(118, 255, 213, .9)); } 70% { transform: translateY(-2px) scaleY(1.05); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rollFlat { 50% { transform: translateY(-2px) rotate(10deg) scale(.95); } }
@keyframes impactCore { from { transform: scale(.25); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@keyframes impactRing { from { transform: scale(.2); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
@keyframes sparkBurst { from { transform: translate(0, 0) scaleY(.35); opacity: 1; } to { transform: translate(var(--spark-x), var(--spark-y)) scaleY(1); opacity: 0; } }
@keyframes victoryIn { from { opacity: 0; transform: scale(.55); } 70% { transform: scale(1.12); } }
@keyframes yourTurnCue { 0% { opacity: 0; transform: translate(-50%, -8px) scale(.92); } 18%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: .78; } }

@media (min-width: 761px) {
  main { padding: 14px; grid-template-rows: 56px minmax(0, 1fr); gap: 9px; }
  .game { grid-template-rows: minmax(0, 1fr) 104px 42px; gap: 8px; }
  .game.playing { grid-template-rows: minmax(0, 1fr) 104px 42px; }
  .actions { grid-template-rows: 35px; }
  .player-chip { flex-basis: 110px; font-size: 10px; }
  .battle-hud { max-width: 700px; margin-inline: auto; }
}
@media (hover: hover) and (pointer: fine) {
  .territory:hover { filter: none; }
}
@media (max-width: 760px) {
  .topbar { width: 100%; padding-inline: 3px; }
  .game { grid-template-rows: minmax(0, 1fr) 92px 37px; }
  .game.playing { grid-template-rows: minmax(0, 1fr) 92px 37px; }
  .pregame { grid-template-columns: minmax(0, 1fr) 88px; }
  .match-roster { display: grid; grid-template-columns: repeat(var(--roster-columns, 4), minmax(0, 1fr)); gap: 3px; overflow: visible; }
  .roster-player { width: auto; min-width: 0; }
  .roster-profile { min-height: 44px; padding: 4px 3px; gap: 2px; }
  .roster-profile .roster-name-line { align-items: flex-start; font-size: 7px; }
  .roster-player .roster-metrics { gap: 2px; font-size: clamp(5.2px, 1.55vw, 6.1px); letter-spacing: -.015em; }
}
@media (max-width: 420px) {
  .forum-dialog { width: calc(100vw - 12px); }
  #forum-home, .forum-thread { padding: 10px; }
  .forum-topic { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; min-height: 70px; padding: 8px; }
  .forum-topic-icon { width: 38px; height: 38px; }
  .forum-toolbar button { padding-inline: 9px; font-size: 10px; }
  .topbar { gap: 4px; padding: 0 4px 0 1px; }
  .brand { font-size: 18px; }
  .top-actions { gap: 3px; }
  .top-actions { width: 219px; min-width: 219px; }
  .top-actions:has(#matchmaking:not(.hidden)) { width: clamp(253px, calc(165px + 22vw), 277px); min-width: clamp(253px, calc(165px + 22vw), 277px); }
  .top-actions:has(#surrender:not(.hidden)) { width: 138px; min-width: 138px; }
  .top-actions:has(#matchmaking:not(.hidden)):has(#surrender:not(.hidden)) { width: 229px; min-width: 229px; }
  .rating-pair { min-width: 64px; padding-inline: 4px; }
  .top-surrender { flex-basis: 44px; }
  .icon-button { flex-basis: 44px; width: 44px; }
  .share-button { flex-basis: 58px; width: 58px; }
  .match-button { min-width: 88px; padding-inline: 5px; }
}
@media (max-width: 360px) {
  .top-actions { width: 211px; min-width: 211px; }
  .top-actions:has(#matchmaking:not(.hidden)):has(#surrender:not(.hidden)) #forum-toggle { display: none; }
  .top-actions:has(#matchmaking:not(.hidden)):has(#surrender:not(.hidden)) { width: 182px; min-width: 182px; }
  .brand { font-size: 16px; }
  .rating-pair { min-width: 60px; font-size: 7px; }
  .top-surrender { flex-basis: 44px; }
  .icon-button { flex-basis: 44px; width: 44px; }
  .share-button { flex-basis: 54px; width: 54px; }
  .share-button .icon-button-label { display: none; }
  .match-button { min-width: 82px; width: 82px; padding-inline: 4px; }
  .match-button span { font-size: 9px; }
  .player-chip { flex-basis: 75px; }
  .battle-hud { padding-inline: 5px; }
  .battle-grid { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); }
  .dice-rack { grid-template-columns: repeat(4, 16px); grid-auto-rows: 16px; }
  .die { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .territory-highlight.own { animation: none !important; }
  .attack-guide { animation: none !important; }
  .replay-attack-guide, .replay-source-ring, .replay-target-ring, .replay-impact-core { animation: none !important; }
  .replay-flight-orb { display: none; }
}