/* Chromedoku inside the shell frame. Its own stylesheets are nested under #chromedoku-host
   (chromedoku-bridge.js); these rules are prefixed with :root .chromedoku-shell to take precedence. */
.chromedoku-shell {
  --game-accent: var(--g-chromedoku);
}
.chromedoku-shell .shell-stage {
  padding: var(--space-2) var(--space-4) 0;
}
.chromedoku-shell .shell-board-area {
  display: block;
  width: 100%;
}
/* Chromedoku's own tokens, mapped onto the shell palette. */
:root .chromedoku-shell #chromedoku-host {
  --bg: #ffffff;
  --surface: #ffffff;
  --panel: #ffffff;
  --panel-deep: #f3f3f0;
  --line: #dcdcd8;
  --line-soft: #ececea;
  --accent: #6d4fc2;
  --accent-ink: #ffffff;
  --ink: #121212;
  --muted: #6b6b6b;
  --muted-2: #8a8a8a;
  --board-surface: #f3f3f0;
  display: block;
  width: 100%;
  /* The nested page rules give the host the old body's full height and safe-area padding. */
  min-height: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-app);
}
:root[data-theme='dark'] .chromedoku-shell #chromedoku-host {
  --bg: #121212;
  --surface: #1e1e1e;
  --panel: #1e1e1e;
  --panel-deep: #2a2a2a;
  --line: #3a3a3a;
  --line-soft: #2a2a2a;
  --accent: #b9a2f0;
  --accent-ink: #121212;
  --ink: #f2f2f2;
  --muted: #a0a0a0;
  --muted-2: #8a8a8a;
  --board-surface: #1a1a1a;
}
/* The shell provides the header, status, timer and edit buttons. */
:root .chromedoku-shell #chromedoku-host :is(.top, .status, .edit-actions, #done) {
  display: none;
}
:root .chromedoku-shell #chromedoku-host main {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}
:root .chromedoku-shell #chromedoku-host .board-wrap {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:root .chromedoku-shell #chromedoku-host .board-frame {
  width: min(560px, calc(100vw - 32px), calc(100dvh - 250px));
  margin: 0 auto;
  /* Row labels take a column on the left; the same space on the right keeps the board itself centred. */
  padding: 0 28px 0 0;
  border: 0;
  /* The hub's legacy .board-frame rule (another game) would otherwise tint the axes green. */
  background: transparent;
  box-shadow: none;
}
:root .chromedoku-shell #chromedoku-host .under {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}
:root .chromedoku-shell #chromedoku-host .board-feedback:empty {
  display: none;
}
/* The reasoning panel only appears while trial or tutorial mode needs its controls. */
:root .chromedoku-shell #chromedoku-host .panel {
  display: none;
}
:root .chromedoku-shell:is([data-mode='trial'], [data-mode='tutorial']) .shell-stage {
  justify-content: flex-start;
  overflow-y: auto;
  padding-bottom: var(--space-4);
}
:root .chromedoku-shell:is([data-mode='trial'], [data-mode='tutorial']) #chromedoku-host .panel {
  display: block;
  width: min(560px, 100%);
  margin: var(--space-3) auto 0;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: 16px;
  background: var(--panel-deep);
  box-shadow: none;
}
:root .chromedoku-shell #chromedoku-host .panel > :is(.panel-title, .hint-actions, .trial-controls) {
  display: none;
}
:root .chromedoku-shell #chromedoku-host .panel > :is(.secondary-actions, .settings, .puzzle-info) {
  display: none;
}
/* Step-by-step hint: a floating card above the toolbar, like the other games. */
:root .chromedoku-shell #chromedoku-host .hint-mobile:not([hidden]) {
  position: fixed;
  z-index: 30;
  right: var(--space-3);
  bottom: calc(84px + env(safe-area-inset-bottom));
  left: var(--space-3);
  display: grid;
  max-width: 520px;
  max-height: 45dvh;
  gap: var(--space-2);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  overflow-y: auto;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.18);
}
:root .chromedoku-shell #chromedoku-host .hint-mobile p {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
:root .chromedoku-shell #chromedoku-host .hint-mobile b {
  color: var(--accent);
  font-size: 12px;
}
:root .chromedoku-shell #chromedoku-host .hint-mobile > div {
  display: flex;
  gap: 6px;
}
:root .chromedoku-shell #chromedoku-host .hint-mobile button {
  min-width: 44px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
}
:root .chromedoku-shell #chromedoku-host .hint-mobile button.primary {
  flex: 1;
}
:root .chromedoku-shell #chromedoku-host #toast {
  bottom: calc(96px + env(safe-area-inset-bottom));
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 13px;
}
/* The hub's dark theme restyles plain buttons; board cells keep their region colours. */
:root[data-theme='dark'] .chromedoku-shell #chromedoku-host #board .cell {
  border: 0;
  background-color: var(--rc, #cfd8dc);
  background-image: var(--rp, none);
  background-size: var(--rps, auto);
  color: var(--ri, #163044);
}
@media (max-width: 850px) {
  :root .chromedoku-shell #chromedoku-host .board-frame {
    padding-right: 22px;
  }
}