:root {
  color-scheme: light;
  font-family: "Yu Gothic", "Hiragino Sans", Meiryo, system-ui, sans-serif;

  --ink: #17323a;
  --muted: #5d7378;
  --surface: rgba(255, 255, 255, 0.58);
  --surface-strong: rgba(255, 255, 255, 0.82);
  --line: rgba(255, 255, 255, 0.78);
  --frame: rgba(23, 50, 58, 0.62);
  --accent: #0f8f9d;
  --accent-dark: #07646e;
  --sand: #ffe0a4;
  --water: #d8f1fb;
  --shadow: 0 8px 18px rgba(23, 50, 58, 0.14);

  --canvas-w: 898px;
  --canvas-h: 652px;
  --game-scale: 1;

  --outer-pad: 10px;
  --column-gap: 8px;
  --card-gap: 6px;
  --field-card-gap: 8px;

  --card-w: 55px;
  --card-h: 91px;
  --card-ratio: 55 / 91;

  --title-h: 28px;

  --header-x: 10px;
  --header-y: 10px;
  --header-w: 878px;
  --header-h: 92px;

  --main-y: 110px;

  --side-w: 248px;
  --side-h: 498px;

  --center-column-x: 266px;
  --center-column-w: 366px;

  --center-panel-w: 258px;
  --center-panel-x: 320px;

  --field-panel-h: 350px;
  --discard-panel-h: 140px;

  --grid-4col-w: 238px;
  --grid-4row-h: 382px;

  --grid-3col-w: 181px;
  --grid-3row-h: 289px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background:
    linear-gradient(180deg, rgba(217, 243, 245, 0.2) 0%, rgba(255, 255, 255, 0.25) 48%, rgba(255, 246, 223, 0.38) 100%),
    url("./images/00_背景画像.webp") center / cover fixed;
  color: var(--ink);
}

.game-viewport {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(12px + env(safe-area-inset-right))
    calc(12px + env(safe-area-inset-bottom))
    calc(12px + env(safe-area-inset-left));
}

.game-scale-frame {
  position: relative;
  width: var(--canvas-w);
  height: var(--canvas-h);
}

.game-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--canvas-w);
  height: var(--canvas-h);
  transform: scale(var(--game-scale));
  transform-origin: top left;
}

.bgm-toggle {
  position: absolute;
  z-index: 10;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(169, 197, 194, 0.92);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  box-shadow: 0 2px 5px rgba(23, 50, 58, 0.08);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.bgm-toggle.is-muted::after {
  position: absolute;
  top: 6px;
  left: 14px;
  width: 2px;
  height: 20px;
  background: #6d8790;
  content: "";
  transform: rotate(-45deg);
  transform-origin: center;
}

.rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(10, 48, 58, 0.9);
  color: #ffffff;
  text-align: center;
}

.rotate-overlay-message {
  width: min(90vw, 320px);
}

.rotate-overlay-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.6;
}

.rotate-overlay-note {
  margin: 24px 0 0;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.65;
}

@media (orientation: portrait) and (pointer: coarse) {
  .rotate-overlay {
    display: grid;
  }
}

button {
  font: inherit;
}

button:focus-visible {
  outline: 3px solid rgba(15, 143, 157, 0.38);
  outline-offset: 2px;
}

.start-screen {
  width: var(--canvas-w);
  height: var(--canvas-h);
  margin: 0 auto;
  display: grid;
  place-items: center;
}

body.game-started .start-screen {
  display: none;
}

body.cpu-selecting .start-screen,
body.game-started .cpu-select-screen,
body.guide-open .start-screen,
body.guide-open .cpu-select-screen {
  display: none;
}

.guide-screen {
  width: var(--canvas-w);
  height: var(--canvas-h);
  margin: 0 auto;
  display: none;
}

body.guide-open .guide-screen {
  display: grid;
}

.guide-layout {
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  grid-template-rows: 43px 48px 505px 52px;
  row-gap: 0;
}

.guide-layout .guide-bgm-toggle {
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
}

.guide-tabs {
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  padding: 10px 10px 0;
}

.guide-tab,
.guide-nav-button,
.guide-back-button {
  border: 1px solid rgba(169, 197, 194, 0.92);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.guide-tab {
  min-width: 0;
  padding: 5px 2px;
  border-radius: 12px 12px 0 0;
  font-size: 1rem;
  line-height: 1.15;
}

.guide-tab + .guide-tab {
  margin-left: -1px;
}

.guide-tab.is-active {
  border-color: var(--accent-dark);
  background: var(--accent);
  color: #ffffff;
}

.guide-image-frame {
  grid-row: 3;
  display: grid;
  min-height: 0;
  place-items: start center;
  overflow: hidden;
}

.guide-image {
  display: block;
  width: 898px;
  height: auto;
  max-width: 100%;
}

.guide-navigation {
  grid-row: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 15px 16px 0;
}

.guide-nav-button {
  width: 148px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(169, 197, 194, 0.92);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  box-shadow: 0 2px 5px rgba(23, 50, 58, 0.08);
  font-size: 1rem;
  line-height: 1;
}

.guide-nav-button.previous {
  justify-self: start;
  clip-path: polygon(0 50%, 18% 0, 100% 0, 100% 100%, 18% 100%);
  padding-left: 32px;
}

.guide-nav-button.next {
  justify-self: end;
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
  padding-right: 32px;
}

.guide-nav-button[hidden] {
  display: block;
  visibility: hidden;
}

.guide-nav-button.is-highlighted {
  border-color: var(--accent-dark);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(23, 50, 58, 0.16);
}

.guide-back-button {
  min-width: 168px;
  min-height: 40px;
  padding: 6px 18px;
}

.guide-back-button.is-highlighted {
  border-color: var(--accent-dark);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(23, 50, 58, 0.16);
}

.cpu-select-screen {
  width: var(--canvas-w);
  height: var(--canvas-h);
  margin: 0 auto;
  display: none;
  place-items: center;
}

body.cpu-selecting .cpu-select-screen {
  display: grid;
}

.start-panel {
  position: relative;
  width: 560px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 48px rgba(23, 50, 58, 0.18);
  backdrop-filter: blur(4px);
  text-align: center;
}

.cpu-select-panel {
  position: relative;
  width: 878px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 48px rgba(23, 50, 58, 0.18);
  backdrop-filter: blur(4px);
  text-align: center;
}

.cpu-guide-button {
  position: absolute;
  top: 16px;
  right: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 168px;
  min-height: 44px;
  border: 1px solid #a9c5c2;
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
}

.cpu-guide-button img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.cpu-guide-button img,
.cpu-guide-button span {
  position: relative;
  left: -10px;
}

.title-logo {
  display: block;
  width: 420px;
  height: auto;
  margin: 0 auto 10px;
}

h1 {
  margin: 0;
  font-size: 1.48rem;
  letter-spacing: 0;
}

.start-panel p {
  margin: 10px 0 20px;
  color: var(--accent-dark);
  font-weight: 800;
}

.start-panel .start-catch {
  margin: 14px 0 10px;
  color: var(--accent-dark);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.55;
}

.start-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.start-actions #guideButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}

.start-actions #guideButton img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.start-actions #guideButton img,
.start-actions #guideButton span {
  position: relative;
  left: -10px;
}

.start-panel .start-copyright {
  margin: 20px 0 0;
  color: rgba(93, 115, 120, 0.68);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.cpu-card-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 16px;
}

.cpu-select-card {
  position: relative;
  min-height: 248px;
  padding: 10px 10px 14px;
  border: 2px solid rgba(169, 197, 194, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  align-content: center;
  gap: 7px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(23, 50, 58, 0.1);
  overflow: hidden;
}

.cpu-select-card img {
  display: block;
  width: 100%;
  max-height: 118px;
  object-fit: contain;
  margin: 0 auto 2px;
}

.cpu-select-card strong {
  font-size: 1.24rem;
}

.cpu-select-card span {
  justify-self: center;
  font-weight: 900;
  color: var(--accent-dark);
}

.cpu-select-card > span:not(.cpu-ribbon) {
  min-width: 148px;
  padding: 5px 10px;
  border-radius: 7px;
  color: var(--ink);
  line-height: 1.1;
}

.cpu-select-card small {
  min-height: 2.8em;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--muted);
}

.cpu-select-card.is-locked,
.cpu-select-card.is-developing {
  border-color: rgba(126, 150, 150, 0.72);
}

.cpu-select-card.is-locked::after,
.cpu-select-card.is-developing::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: calc(100% - 20px);
  height: 118px;
  transform: translateX(-50%);
  z-index: 1;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.cpu-ribbon {
  position: absolute;
  z-index: 2;
  top: 92px;
  left: 12px;
  width: calc(100% - 24px);
  padding: 0 8px;
  transform: rotate(-14deg);
  color: #111111;
  background: transparent;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  box-shadow: none;
  pointer-events: none;
}

.cpu-ribbon.locked {
  background: transparent;
}

.cpu-ribbon.developing {
  background: transparent;
}

.cpu-select-card.is-unlocked .cpu-ribbon.locked {
  display: none;
}

.cpu-select-card.hikaru {
  background: linear-gradient(180deg, rgba(255, 248, 205, 0.96), rgba(255, 255, 255, 0.92));
}

.cpu-select-card.hikaru > span:not(.cpu-ribbon) {
  background: #ffef2d;
}

.cpu-select-card.mio {
  background: linear-gradient(180deg, rgba(219, 246, 255, 0.98), rgba(255, 255, 255, 0.92));
}

.cpu-select-card.mio > span:not(.cpu-ribbon) {
  background: #9ddfff;
}

.cpu-select-card.hayato {
  background: linear-gradient(180deg, rgba(255, 231, 201, 0.98), rgba(255, 255, 255, 0.92));
}

.cpu-select-card.hayato > span:not(.cpu-ribbon) {
  background: #ff8f3b;
  color: var(--ink);
}

.cpu-select-card.sena {
  background: linear-gradient(180deg, rgba(238, 226, 255, 0.98), rgba(255, 255, 255, 0.92));
}

.cpu-select-card.sena > span:not(.cpu-ribbon) {
  background: #e4c3f5;
}

.cpu-select-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(15, 143, 157, 0.14), 0 12px 24px rgba(23, 50, 58, 0.14);
}

.unlock-panel {
  margin: 8px auto 12px;
  padding: 0;
  width: 828px;
  height: 118px;
  display: grid;
  grid-template-columns: 326px 488px;
  column-gap: 14px;
}

.unlock-panel[hidden] {
  display: none;
}

.unlock-panel p {
  margin: 0;
  color: var(--accent-dark);
  font-weight: 900;
}

.unlock-auth {
  display: block;
  padding: 12px;
  border: 1px solid rgba(184, 216, 214, 0.9);
  border-radius: 8px;
  background: rgba(247, 255, 253, 0.94);
}

.unlock-auth #unlockMessage {
  font-size: 1rem;
  line-height: 1.2;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.unlock-instruction {
  margin-top: 10px !important;
  margin-left: 8px !important;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--muted) !important;
  text-align: left;
}

.unlock-input-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.unlock-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 5px;
}

.unlock-row p {
  flex: 0 0 auto;
}

.unlock-row input {
  width: 212px;
  height: 40px;
  min-height: 0;
  padding: 8px 12px;
  border: 1px solid #a9c5c2;
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.unlock-row button {
  width: 80px;
  min-width: 0 !important;
  height: 40px;
  min-height: 0 !important;
  padding: 0;
}

.unlock-row input::placeholder {
  color: rgba(93, 115, 120, 0.5);
}

.unlock-note {
  margin-top: 10px !important;
  color: var(--ink) !important;
  font-size: 0.9rem;
}

.booth-capsule-link {
  display: grid;
  place-items: center;
  width: 164px;
  height: 38px;
  min-height: 0;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--accent-dark);
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 7px 16px rgba(23, 50, 58, 0.16);
}

.unlock-promotion {
  position: relative;
  width: 488px;
  height: 118px;
  display: block;
  padding: 0;
  border: 1px solid rgba(184, 216, 214, 0.9);
  border-radius: 8px;
  background: rgba(247, 255, 253, 0.94);
}

.unlock-promotion-title {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 330px;
  color: var(--accent-dark);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.unlock-copy {
  position: absolute;
  top: 43px;
  left: 20px;
  width: 330px;
  margin: 0;
  color: var(--muted) !important;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
}

.unlock-price {
  color: var(--accent-dark);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.unlock-beer {
  position: absolute;
  top: 4px;
  right: -2px;
  width: auto;
  height: 110px;
  object-fit: contain;
}

.unlock-promo-action {
  display: contents;
}

.unlock-promo-action .booth-capsule-link {
  position: absolute;
  top: auto;
  bottom: 12px;
  left: 225px;
  width: 130px;
  height: 40px;
  font-size: 0.86rem;
  white-space: nowrap;
}

.booth-capsule-link[hidden] {
  display: none;
}

.cpu-confirm-panel {
  margin: 8px auto 0;
  padding: 14px;
  border: 1px solid rgba(184, 216, 214, 0.9);
  border-radius: 8px;
  background: rgba(247, 255, 253, 0.94);
}

.cpu-confirm-panel p {
  margin: 0 0 12px;
  color: var(--accent-dark);
  font-weight: 900;
}

.cpu-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.start-panel button,
.cpu-confirm-panel button,
.unlock-panel button,
.tide-controls button,
.game-end-panel button {
  border: 1px solid #a9c5c2;
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.start-panel button {
  min-width: 168px;
  min-height: 44px;
}

.start-panel .bgm-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 30px;
  min-width: 0;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(169, 197, 194, 0.92);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  box-shadow: 0 2px 5px rgba(23, 50, 58, 0.08);
  font-size: 1rem;
}

.cpu-confirm-panel button {
  min-width: 210px;
  min-height: 40px;
}

.unlock-panel button {
  min-width: 104px;
  min-height: 40px;
}

.start-panel button.primary,
.cpu-confirm-panel button.primary,
.unlock-panel button.primary,
.tide-controls button.primary,
.game-end-panel button.primary {
  border-color: var(--accent-dark);
  background: var(--accent);
  color: #ffffff;
}

.app-shell {
  width: var(--canvas-w);
  height: var(--canvas-h);
  margin: 0 auto;
  overflow: hidden;
}

.play-layout {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: var(--side-w) var(--center-column-w) var(--side-w);
  grid-template-rows: var(--header-h) var(--field-panel-h) var(--discard-panel-h) 1fr;
  grid-template-areas:
    "H H H"
    "L C R"
    "L B R"
    ". . .";
  gap: var(--column-gap);
  padding: var(--outer-pad);
}

.game-header,
.player-zone,
.center-area,
.discard-zone {
  border: 2px solid var(--frame);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(1px);
}

.game-header {
  grid-area: H;
  width: var(--header-w);
  height: var(--header-h);
  display: grid;
  grid-template-columns: 359px 22px 100px 8px 14px 46px 8px 236px 8px 46px 15px;
  grid-template-rows: 35px 6px 35px;
  padding: 6px;
  align-content: start;
}

.message {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 4;
  width: 359px;
  height: 76px;
  padding: 9px 11px;
  border: 1px solid rgba(184, 216, 214, 0.9);
  border-radius: 7px;
  background: rgba(247, 255, 253, 0.94);
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.play-layout .play-bgm-toggle {
  top: calc(var(--header-y) + var(--header-h) + 16px);
  right: auto;
  bottom: auto;
  left: calc(var(--outer-pad) + var(--side-w) + 16px);
  width: 30px;
  height: 30px;
}

.play-layout .play-bgm-toggle.is-muted::after {
  top: 6px;
  left: 14px;
  height: 20px;
}

.message-result,
.message-action {
  margin: 0;
  line-height: 1.35;
}

.message-result {
  color: var(--muted);
}

.message-action:not([hidden]) {
  margin-top: 0.5em;
}

.message-action.is-action {
  color: var(--accent-dark);
}

.message-action.is-cpu {
  color: var(--muted);
}

.tide-controls {
  grid-column: 8;
  grid-row: 1 / 4;
  display: grid;
  grid-template-columns: 20px 88px 20px 88px 20px;
  grid-template-rows: 28px 44px 4px;
  border-radius: 7px;
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px rgba(199, 221, 217, 0.9);
  overflow: hidden;
}

.tide-controls.is-selecting {
  background: rgba(216, 241, 251, 0.72);
  box-shadow: inset 0 0 0 2px var(--accent), var(--shadow);
}

.tide-guide,
.tide-result {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  margin: 0;
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.tide-controls button {
  width: 88px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 1rem;
  background: transparent;
  overflow: hidden;
}

.tide-controls button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.tide-controls button.is-unselected img {
  filter: grayscale(1);
}

#highTideButton {
  grid-column: 2;
  grid-row: 2;
}

#lowTideButton {
  grid-column: 4;
  grid-row: 2;
}

.status-chip {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100px;
  height: 35px;
  padding: 3px 6px;
  border: 1px solid rgba(199, 221, 217, 0.9);
  border-radius: 7px;
  background: var(--surface-strong);
  text-align: center;
}

.status-chip[data-layout-id="H4"] {
  grid-column: 3;
  grid-row: 1;
}

.status-chip[data-layout-id="H6"] {
  grid-column: 3;
  grid-row: 3;
}

.status-chip[data-layout-id="H7"] {
  grid-column: 6;
  grid-row: 1 / 4;
  width: 46px;
  height: 76px;
  position: relative;
  overflow: hidden;
}

.status-chip[data-layout-id="H8"] {
  grid-column: 10;
  grid-row: 1 / 4;
  width: 46px;
  height: 76px;
  position: relative;
  overflow: hidden;
}

.status-chip.wide {
  width: 46px;
}

.status-chip[data-layout-id="H7"]::before,
.status-chip[data-layout-id="H8"]::before {
  position: absolute;
  inset: 0;
  content: "";
  background-position: center;
  background-size: cover;
  opacity: 0.3;
}

.status-chip[data-layout-id="H7"]::before {
  background-image: url("./images/10_浅瀬.png");
}

.status-chip[data-layout-id="H8"]::before {
  background-image: url("./images/20_岩場.png");
}

.status-chip[data-layout-id="H7"] > *,
.status-chip[data-layout-id="H8"] > * {
  position: relative;
  z-index: 1;
  color: var(--ink);
}

.status-chip[data-layout-id="H7"] span,
.status-chip[data-layout-id="H8"] span {
  font-size: 0.82rem;
}

.status-chip span {
  display: block;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
}

.status-chip strong {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  line-height: 1;
}

.player-zone {
  width: var(--side-w);
  height: var(--side-h);
  padding-top: 8px;
}

.player-zone[data-layout-id="L"] {
  grid-area: L;
}

.player-zone[data-layout-id="R"] {
  grid-area: R;
}

.player-zone.current {
  border-color: var(--accent);
  background: rgba(216, 241, 251, 0.72);
  box-shadow: var(--shadow);
}

.player-zone.current .zone-head span {
  color: var(--accent);
}

.zone-head {
  width: 232px;
  height: var(--title-h);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.player-zone .zone-head {
  grid-template-columns: auto 1fr auto;
}

.zone-head.compact {
  width: var(--grid-4col-w);
  grid-template-columns: auto auto 1fr;
}

.discard-zone .zone-head.compact {
  grid-template-columns: auto 1fr auto;
}

.zone-head span {
  width: fit-content;
  max-width: 112px;
  padding: 4px 15px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(23, 50, 58, 0.1);
}

#playerBStatus[data-cpu-character="hikaru"] .zone-head span {
  background: #ffef2d;
  color: var(--muted);
}

#playerBStatus[data-cpu-character="mio"] .zone-head span {
  background: #9ddfff;
}

#playerBStatus[data-cpu-character="hayato"] .zone-head span {
  background: #ff8f3b;
}

#playerBStatus[data-cpu-character="sena"] .zone-head span {
  background: #e4c3f5;
}

#playerBStatus .zone-head span {
  color: #ffffff;
}

#playerBStatus.current .zone-head span {
  color: var(--accent);
}

#playerBStatus.current[data-cpu-character="hikaru"] .zone-head span {
  color: #000000;
}

.zone-head strong,
.zone-head small {
  color: var(--accent-dark);
  font-weight: 900;
  line-height: 1;
}

.player-zone .zone-head strong {
  justify-self: center;
  min-width: 72px;
  padding: 4px 15px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--accent-dark);
  text-align: center;
  box-shadow: 0 3px 10px rgba(23, 50, 58, 0.1);
}

.player-zone .zone-head strong.score-leading {
  background: #fff4b8;
}

.player-zone .zone-head small {
  justify-self: end;
}

.discard-zone .zone-head strong {
  justify-self: end;
  font-size: 0.9rem;
}

.card-history {
  width: var(--grid-4col-w);
  height: var(--grid-4row-h);
  margin: 8px auto 0;
  display: grid;
  grid-template-columns: repeat(4, var(--card-w));
  grid-template-rows: repeat(4, var(--card-h));
  gap: var(--card-gap);
  align-content: start;
  justify-content: center;
}

.center-area {
  grid-area: C;
  position: relative;
  width: var(--center-panel-w);
  height: var(--field-panel-h);
  justify-self: center;
  padding-top: 8px;
}

.center-area .zone-head {
  width: var(--grid-4col-w);
}

.board-section {
  display: grid;
  justify-items: center;
  margin-top: 11px;
}

.field-grid {
  grid-area: 1 / 1;
}

.field-grid {
  width: var(--grid-3col-w);
  height: var(--grid-3row-h);
  display: grid;
  grid-template-columns: repeat(3, var(--card-w));
  grid-template-rows: repeat(3, var(--card-h));
  gap: var(--field-card-gap);
}

.discard-zone {
  grid-area: B;
  width: var(--center-panel-w);
  height: var(--discard-panel-h);
  justify-self: center;
  padding-top: 8px;
}

.discard-history {
  width: var(--grid-4col-w);
  height: var(--card-h);
  margin: 8px auto 0;
  display: grid;
  grid-template-columns: repeat(4, var(--card-w));
  grid-template-rows: var(--card-h);
  gap: var(--card-gap);
  align-items: start;
  justify-content: center;
}

.card-button,
.card-group,
.history-slot,
.discard-slot,
.card-slot {
  width: var(--card-w);
  height: var(--card-h);
  aspect-ratio: var(--card-ratio);
}

.card-group {
  position: relative;
  display: block;
}

.card-group .history-slot {
  position: absolute;
  left: 0;
}

.history-slot,
.discard-slot {
  position: relative;
  display: block;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: none;
  overflow: hidden;
}

.history-slot.filled,
.discard-slot.filled {
  display: grid;
  place-items: center;
  padding: 4px;
  color: var(--ink);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.history-slot strong,
.discard-slot strong,
.history-slot small,
.discard-slot small {
  display: block;
}

.history-slot.shallow,
.discard-slot.shallow,
.card-button.shallow,
.card-button.placeholder.shallow {
  background: var(--water);
}

.history-slot.rocky,
.discard-slot.rocky,
.card-button.rocky,
.card-button.placeholder.rocky {
  background: var(--sand);
}

.card-button {
  position: relative;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden;
}

.card-button:disabled {
  cursor: default;
  opacity: 0.82;
}

.card-inner {
  display: grid;
  height: 100%;
  place-items: center;
  padding: 5px;
  text-align: center;
}

.card-type {
  font-size: 0.63rem;
  font-weight: 900;
  line-height: 1.22;
  white-space: pre-line;
}

.card-area {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 1.15;
}

.card-button.placeholder.preview-top {
  background-image: url("./images/03_中央場_上.png");
  background-position: center;
  background-size: cover;
}

.card-button.placeholder.preview-middle {
  background-image: url("./images/04_中央場_中.png");
  background-position: center;
  background-size: cover;
}

.card-button.placeholder.preview-bottom {
  background-image: url("./images/05_中央場_下.png");
  background-position: center;
  background-size: cover;
}

.card-button.placeholder .card-type,
.card-button.placeholder .card-area {
  color: transparent;
}

.card-button.face-down {
  background-position: center;
  background-size: cover;
}

.card-button.face-down.shallow {
  background-image: url("./images/10_浅瀬.png");
}

.card-button.face-down.rocky {
  background-image: url("./images/20_岩場.png");
}

.card-button.with-front-image,
.history-slot.with-front-image,
.discard-slot.with-front-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.history-slot.filled.with-front-image,
.discard-slot.filled.with-front-image {
  padding: 0;
  background-color: transparent;
}

.card-button.face-down .card-type,
.card-button.face-down .card-area {
  color: transparent;
}

.with-front-image .card-type,
.with-front-image .card-area,
.history-slot.with-front-image strong,
.history-slot.with-front-image small,
.discard-slot.with-front-image strong,
.discard-slot.with-front-image small {
  color: transparent;
}

.card-button.taken {
  box-shadow: none;
}

.card-button.taken .card-inner {
  align-content: center;
  gap: 6px;
}

.card-transfer-highlight {
  outline: 3px solid #ffe66d;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(255, 230, 109, 0.42);
}

.card-transfer-ghost {
  position: fixed;
  z-index: 1000;
  margin: 0;
  pointer-events: none;
  transition: transform 350ms ease-out;
}

.card-transfer-target {
  visibility: hidden;
}

.card-transfer-source {
  visibility: hidden;
}

.game-end-reveal {
  position: absolute;
  top: 46px;
  left: 50%;
  width: var(--grid-3col-w);
  height: var(--grid-3row-h);
  display: grid;
  place-items: center;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-50%);
}

.game-end-reveal[hidden] {
  display: none;
}

.game-end-reveal button {
  min-width: 156px;
  padding: 14px 24px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: #ffffff;
  color: var(--accent-dark);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.game-end-panel {
  position: absolute;
  left: var(--center-column-x);
  top: var(--main-y);
  width: var(--center-column-w);
  height: var(--side-h);
  display: grid;
  grid-template-rows: 7fr auto;
  align-items: stretch;
  gap: 10px;
  padding: 28px 24px 42px;
  border: 2px solid rgba(15, 143, 157, 0.24);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.96);
  text-align: center;
  box-shadow: 0 12px 28px rgba(23, 50, 58, 0.2);
  z-index: 2;
}

.game-end-panel[hidden] {
  display: none;
}

.result-summary {
  display: grid;
  height: 220px;
  align-self: start;
  align-content: center;
  gap: 14px;
}

.game-end-panel p {
  margin: 0;
  color: var(--accent-dark);
  font-weight: 900;
}

.result-scoreboard {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
  justify-items: center;
  justify-content: center;
  color: var(--accent-dark);
  font-weight: 900;
}

.result-player-name {
  font-size: 1.08rem;
}

.result-vs {
  grid-column: 2;
  grid-row: 2;
  color: var(--ink);
  font-size: 0.95rem;
}

.result-score {
  min-width: 100px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #f6fbfb;
  font-size: 1.58rem;
}

.result-score.score-leading {
  background: #fff4b8;
}

.result-scoreboard .result-player-name:first-child {
  grid-column: 1;
  grid-row: 1;
}

#resultCpuName {
  grid-column: 3;
  grid-row: 1;
}

#playerAResultScore {
  grid-column: 1;
  grid-row: 2;
}

#playerBResultScore {
  grid-column: 3;
  grid-row: 2;
}

.game-end-panel .result-winner {
  color: var(--accent);
  font-size: 1.3rem;
}

.game-end-panel .result-sub {
  color: var(--ink);
  font-size: 0.94rem;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  align-content: center;
  transform: translateY(-16px);
}

.result-local-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  transform: translateY(-6px);
}

.result-action {
  min-height: 44px;
  padding: 7px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.result-action.secondary {
  border: 1px solid rgba(169, 197, 194, 0.92);
  background: rgba(255, 255, 255, 0.82);
}

.x-share-link {
  min-height: 44px;
  height: 44px;
  gap: 8px;
}

.x-share-link img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.result-action.primary {
  width: 210px;
  height: 48px;
  min-height: 0;
  padding: 7px 4px;
  justify-content: flex-start;
  gap: 2px;
  font-size: 0.85rem;
  border: 1px solid var(--accent-dark);
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(23, 50, 58, 0.16);
}

.action-text {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
}

.action-pointer {
  flex: 0 0 28px;
  width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
}

.booth-actions {
  position: relative;
  height: 110px;
}

.booth-button-list {
  display: grid;
  grid-template-rows: repeat(2, 48px);
  gap: 14px;
}

.booth-package {
  position: absolute;
  top: -3px;
  right: -3px;
  width: auto;
  height: 130px;
}