/* Unified panel sizing and view visibility have a single owner. */
:root {
  --t-ui-bg: #071628;
  --t-ui-surface: #0c2035;
  --t-ui-card: #10283e;
  --t-ui-border: #246784;
  --t-ui-cyan: #38e9ff;
  --t-ui-lime: #a7ff24;
  --t-ui-pink: #d56bff;
  --t-ui-text: #e0f6ff;
  --t-ui-muted: #9dbbd2;
}

#tutorial-music, #tutorial-controls, #tutorial-scoreRules { min-width: 0; }
#tutorial-music .settings-category-card,
#tutorial-music .audio-card {
  border: 1px solid var(--t-ui-border);
  border-radius: 13px;
  background: linear-gradient(150deg, #12334a, var(--t-ui-surface) 58%, #101a35);
  color: var(--t-ui-text);
  box-shadow: inset 3px 0 0 #30c9d52c;
}
#tutorial-music .settings-category-card h4,
#tutorial-music .audio-card-heading h3 { color: #dcfaff; }
#tutorial-music label, #tutorial-music span { color: #cce6f6; }
#tutorial-music [data-help-for] { display: inline-flex; }
#tutorial-music input[type="range"] { accent-color: #28c9f7; }
#tutorial-music input[type="checkbox"],
#tutorial-music input[type="radio"] { accent-color: var(--t-ui-lime); }
#tutorial-music select { background: #152c44; border: 1px solid #337797; color: #dff9ff; }
#tutorial-music .settings-controls { flex-wrap: wrap; }
#tutorial-music .settings-controls input[type="range"] { min-width: 85px; }
#tutorial-music [data-settings-category] { margin-block: 7px 11px; }
#tutorial-music [data-settings-category="controls"] label { min-height: 30px; }


html, body { height: 100%; }
body { height: 100dvh; }
[hidden] { display: none !important; }
.container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 100dvh;
  min-height: 0;
  gap: 12px;
}
.game-column {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  transition: none;
}
.table-column { display: none; min-width: 0; min-height: 0; transition: none; }
#music-settings-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #2b7898;
  border-radius: 14px;
  background: linear-gradient(135deg, #07172b, #0b2036 66%, #10132a);
  color: var(--t-ui-text);
  font-family: system-ui, sans-serif;
}
#controlGrid {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid #256684;
}
#controlGrid > .settings-action-button {
  display: inline-flex;
  position: static;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid #39c6ed;
  border-radius: 50%;
  color: #b6f2ff;
  font: 700 15px/1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: none;
  animation: none;
  -webkit-text-fill-color: currentColor;
}
#controlGrid > [data-panel-view="controls"] { color: var(--t-ui-lime); }
#controlGrid > [data-panel-view="score"] { color: var(--t-ui-pink); }
#controlGrid > [aria-pressed="true"] {
  color: #061928;
  background: linear-gradient(135deg, #38e9ff, #a7ff24);
  border: 2px solid #d2ffdb;
  box-shadow: 0 0 10px #38e9ff66;
}
#controlGrid > #tutorialRestartButton { display: inline-flex; }
#controlGrid > #settingsRestartButton { display: none; }
#controlGrid > #closeTutorialButton { margin-left: auto; color: #f0b5ff; }
#controlGrid button:focus-visible { outline: 3px solid var(--t-ui-lime); outline-offset: 2px; }
#desktopSettingsContent {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-top: 8px;
}
#desktopSettingsContent > .tutorial-tab-content {
  display: block;
  width: 100%;
  min-width: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
#tutorial-music .settings-controls { flex-wrap: wrap; }
#tutorial-music input, #tutorial-music select { min-width: 0; max-width: 100%; box-sizing: border-box; }
#tutorial-music .settings-field-row { grid-template-columns: minmax(0, 1fr) 28px minmax(65px, 1fr) 26px; }
#tutorial-music .settings-field-row > * { min-width: 0; }
#tutorial-music .audio-field { grid-template-columns: minmax(50px, .75fr) 26px minmax(0, 1.25fr); }
#tutorial-screen { z-index: 20000; padding: 8px; box-sizing: border-box; }
#tutorial-content {
  display: flex;
  width: min(440px, 100%);
  height: calc(100dvh - 16px);
  max-height: calc(100dvh - 16px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--t-ui-text);
}
#settingsButton { display: flex; }
#welcome-screen {
  z-index: 10000;
  box-sizing: border-box;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  padding: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
#welcome-screen input { box-sizing: border-box; max-width: 100%; }
/* Both mode pickers stay reachable above the compact settings dialog. */
.duel-modal { z-index: 21000; overflow-y: auto; }
.duel-card { box-sizing: border-box; max-height: calc(100dvh - 32px); overflow-y: auto; }
#tutorial-scoreRules .rules-summary {
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--t-ui-text);
  font: 12px/1.5 system-ui, sans-serif;
}
#tutorial-scoreRules .rules-summary h2 {
  margin: 0 0 8px;
  color: var(--t-ui-cyan);
  font-size: 15px;
  letter-spacing: .04em;
}
#tutorial-scoreRules .rules-summary .score-rule-card {
  border: 1px solid #2f6e8c;
  border-left: 3px solid #37dcf1;
  border-radius: 11px;
  padding: 10px 12px;
  margin: 8px 0;
  background: linear-gradient(145deg, #123146, #0c2034);
}
#tutorial-scoreRules .rules-summary .score-rule-card:nth-of-type(2n) { border-left-color: #a7ff24; }
#tutorial-scoreRules .rules-summary .score-rule-card:nth-of-type(3n) { border-left-color: #d36dff; }
#tutorial-scoreRules .rules-summary h3 { margin: 0 0 6px; font-size: 13px; color: #9bf8ff; }
#tutorial-scoreRules .rules-summary p { font-size: 12px; line-height: 1.5; margin: 0 0 7px; color: #bdd9ed; }
#tutorial-scoreRules .rules-summary ul { margin: 0; padding-left: 17px; }
#tutorial-scoreRules .rules-summary li { font-size: 12px; line-height: 1.5; margin: 0 0 5px; }
#tutorial-scoreRules .rules-summary a { color: #86f4f9; }
#tutorial-scoreRules #variableInfo {
  min-height: 0;
  margin: 0 0 12px;
  border: 1px solid #2f7898;
  background: #0d2b3f;
  -webkit-text-fill-color: #e0f6ff;
  animation: none;
}
#tutorial-scoreRules #highScoreList li { margin: 0; padding: 5px 0; }
#tutorial-scoreRules #highScoreList li a { color: #8ff5ff; }


#tutorial-scoreRules #variableInfo { display: block; width: auto; max-height: none; box-sizing: border-box; }
#highScoreInfo { min-width: 0; -webkit-text-fill-color: currentColor; animation: none; }
#highScoreInfo h4 { margin: 0 0 8px; color: #dff4ff; font: 700 13px system-ui, sans-serif; }
#highScoreList { margin: 0; padding: 0; list-style: none; }
#highScoreList li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
#highScoreList li img { width: 20px; height: 20px; border-radius: 50%; }
#highScoreList li a { min-width: 0; overflow-wrap: anywhere; }
#highScoreList li strong { margin-left: auto; }
/* Blue, translucent controls without the old grey control PANEL frames. */
.game-rotate-btn, #controlTable button,
#rotate-buttons-float .game-rotate-btn, #controlTable .control-table-btn {
  background: linear-gradient(150deg, rgba(20,98,149,.78), rgba(9,37,80,.80)) !important;
  border: 1px solid #39c6ed !important;
  color: #b6f2ff;
  box-shadow: inset 0 0 10px rgba(20,145,216,.12);
}
.game-rotate-btn:active, #controlTable button:active,
.game-rotate-btn.active-btn, #controlTable button.active-btn {
  background: linear-gradient(145deg, rgba(10,158,207,.92), rgba(35,77,157,.94)) !important;
  box-shadow: 0 0 14px rgba(26,210,244,.5);
}
#controlTable { background: transparent; border: 0 !important; }
#controlTable td { background: transparent; border: 0; }


@media (min-width: 1040px) {
  .container { grid-template-columns: minmax(0, 1fr) clamp(380px, 32vw, 440px); padding: 10px; box-sizing: border-box; }
  .table-column { display: flex; flex-direction: column; width: auto; height: 100%; max-width: none; padding: 0; overflow: hidden; }
  #controlGrid > #settingsRestartButton { display: inline-flex; }
  #controlGrid > #tutorialRestartButton { display: none; }
  html[data-panel-closed] .container { grid-template-columns: minmax(0, 1fr); }
  html[data-panel-closed] .table-column { display: none; }
  .game-column > .control-section, .game-column > #rotate-buttons-float { background: transparent; border: 0; box-shadow: none; padding: 3px; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .game-rotate-btn, #controlTable button, .settings-action-button { transition: none; }
}