.view {
  display: none;
}

.view.active {
  display: block;
}

body[data-view="gameView"] header {
  display: none;
}

body[data-view="boot"] {
  padding: 0;
  place-items: stretch;
  background:
    linear-gradient(90deg, rgba(2, 8, 16, .92) 0%, rgba(3, 11, 18, .78) 38%, rgba(3, 10, 18, .3) 100%),
    url("../assets/home/othello-main-bg.webp?v=20260818-3") center / cover no-repeat,
    #020812;
  overflow: hidden;
}

body[data-view="boot"] header {
  display: none;
}

body[data-view="boot"] .app {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

body[data-view="boot"] .app::before {
  content: "TOKAGEN OTHELLO RPG";
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f5e9ff;
  font-size: clamp(26px, 5vw, 54px);
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 0 12px #b771ff, 0 0 28px #45e8ff;
  background:
    repeating-linear-gradient(0deg, rgba(63, 233, 255, .05) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 28% 26%, rgba(95, 235, 255, .18), transparent 24%);
  z-index: 0;
}

body[data-view="homeView"] {
  padding: 0;
  place-items: stretch;
  overflow: hidden;
}

body[data-view="homeView"] .app {
  width: 100%;
}

body[data-view="homeView"] header {
  display: none;
}

body[data-view="prologueView"] {
  padding: 0;
  place-items: stretch;
  overflow: hidden;
}

body[data-view="prologueView"] .app {
  width: 100%;
}

body[data-view="prologueView"] header {
  display: none;
}

body[data-view="endingView"] {
  padding: 0;
  place-items: stretch;
  overflow: hidden;
}

body[data-view="endingView"] .app {
  width: 100%;
}

body[data-view="endingView"] header {
  display: none;
}

.home-stage {
  position: relative;
  min-height: 100vh;
  padding: clamp(22px, 4vw, 48px);
  background: #020812;
  box-shadow: inset 0 0 90px #000;
  overflow: hidden;
}

.home-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(63, 233, 255, .06) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 26% 20%, rgba(95, 235, 255, .2), transparent 24%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: homeScanIn 1.2s ease-out .35s forwards;
}

.home-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 8, 16, .9) 0%, rgba(3, 11, 18, .78) 33%, rgba(3, 10, 18, .24) 56%, rgba(3, 8, 14, .18) 100%),
    url("../assets/home/othello-main-bg.webp?v=20260818-3") center / cover no-repeat;
  z-index: 0;
  opacity: 0;
  transform: scale(1.035);
  animation: homeBgIn 1.35s cubic-bezier(.2, .85, .2, 1) forwards;
}

.home-mode {
  position: relative;
  z-index: 2;
  display: inline-flex;
  margin: 0 0 clamp(24px, 5vw, 44px);
  padding: 10px 18px 12px;
  border-radius: 8px;
  color: #f5e9ff;
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 0 10px #b771ff, 0 0 22px #45e8ff;
  background: rgba(4, 8, 18, .64);
  box-shadow: inset 0 0 0 1px rgba(130, 244, 255, .45), 0 0 26px rgba(88, 222, 255, .28);
  opacity: 0;
  transform: translateY(-14px) scale(.98);
  animation: homeTitleIn .65s cubic-bezier(.2, .9, .2, 1) .25s forwards;
}

.hero-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  background: linear-gradient(135deg, #ffffff0d, transparent 42%), #07100dcc;
  box-shadow: 0 22px 70px #0008, inset 0 1px 0 #ffffff18;
}

.hero-panel h2 {
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.25;
  margin: 0 0 12px;
}

.hero-panel p {
  color: var(--muted);
  line-height: 1.8;
  margin: 0;
}

.main-menu {
  display: grid;
  position: relative;
  z-index: 2;
  width: min(520px, 92vw);
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 0;
  transition: transform .62s cubic-bezier(.18, .82, .2, 1), opacity .45s ease, filter .45s ease;
}

.home-stage.panel-open .main-menu {
  opacity: 0;
  pointer-events: none;
  filter: blur(5px);
  transform: translateX(-130%);
}

.menu-button {
  min-height: 76px;
  border-radius: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
  letter-spacing: .04em;
  text-align: left;
  background: rgba(3, 7, 13, .82);
  border: 2px solid #07cce8;
  color: #fff;
  box-shadow: 0 12px 26px #0009, inset 0 0 0 2px #000, 0 0 18px #00d8ff33;
  opacity: 0;
  transform: translateX(110px);
  animation: homeMenuIn 1.15s cubic-bezier(.16, .82, .2, 1) forwards;
}

.menu-button:nth-child(1) {
  animation-delay: .95s;
}

.menu-button:nth-child(2) {
  animation-delay: 1.25s;
}

.menu-button:nth-child(3) {
  animation-delay: 1.55s;
}

.menu-button:nth-child(4) {
  animation-delay: 1.85s;
}

.menu-button:nth-child(5) {
  animation-delay: 2.15s;
}

.menu-button:nth-child(6) {
  animation-delay: 2.45s;
}

.menu-button:nth-child(7) {
  animation-delay: 2.75s;
}

.menu-button:nth-child(8) {
  animation-delay: 3.05s;
}

.menu-button:nth-child(9) {
  animation-delay: 3.35s;
}

.menu-button.debug-button {
  min-height: 54px;
  font-size: 18px;
  border-color: #ff68d8;
  color: #ffd7f4;
}

.menu-button i {
  color: #bdf8ff;
  font-size: 48px;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 14px #00eaff;
}

.menu-button:hover,
.menu-button:focus-visible {
  color: #101612;
  background: linear-gradient(90deg, #f6dd87, #65f7ff);
  border-color: #fff3a8;
  transform: translateX(6px);
  box-shadow: 0 16px 36px #000b, 0 0 26px #66f6ff99;
  outline: none;
}

.menu-button.primary {
  background: rgba(3, 7, 13, .86);
  color: #fff;
}

.home-back {
  position: absolute;
  z-index: 2;
  right: clamp(22px, 4vw, 46px);
  bottom: clamp(22px, 4vw, 42px);
  min-width: 128px;
  min-height: 54px;
  border-radius: 0;
  border: 2px solid #76f8ff;
  background: rgba(12, 16, 31, .68);
  color: #bffaff;
  font-size: 24px;
  letter-spacing: .06em;
  box-shadow: 0 0 18px #00d8ff55, inset 0 0 0 2px #0009;
  opacity: 0;
  transform: translateY(12px);
  animation: homeBackIn .65s ease-out 2.35s forwards;
}

.debug-panel,
.config-panel {
  position: absolute;
  z-index: 5;
  right: clamp(18px, 5vw, 72px);
  bottom: clamp(18px, 5vw, 72px);
  width: min(440px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid #ff68d8;
  background: rgba(4, 9, 18, .9);
  box-shadow: 0 18px 42px #000b, 0 0 26px #ff68d866;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity .2s ease, transform .2s ease;
}

.debug-panel.active,
.config-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.debug-head strong {
  color: #ff9ee6;
  letter-spacing: .12em;
}

.debug-head button,
.debug-grid button,
.debug-reset,
.config-grid button {
  border: 1px solid #5ddfff;
  background: rgba(8, 26, 42, .9);
  color: #fff;
  min-height: 38px;
  padding: 0 12px;
  font-weight: 800;
}

.config-panel {
  border-color: #5df2ff;
  box-shadow: 0 18px 42px #000b, 0 0 26px rgba(93, 242, 255, .42);
}

.config-panel .debug-head strong {
  color: #aaf9ff;
}

.config-grid {
  display: grid;
  gap: 12px;
}

.config-grid label {
  display: grid;
  grid-template-columns: 72px 76px 42px 1fr 42px;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 12px;
  border: 1px solid #ffffff20;
  border-radius: 12px;
  background: rgba(1, 8, 14, .74);
}

.config-grid label span {
  color: #d8fff8;
  font-weight: 900;
}

.config-grid input[type="range"] {
  width: 100%;
  accent-color: #5df2ff;
}

.config-spacer {
  display: block;
  width: 42px;
  height: 1px;
}

.config-grid button.sound-test {
  min-width: 42px;
  padding: 0;
  border-color: #e9bd65;
  color: #1b1509;
  background: linear-gradient(135deg, #fff2a9, #e9bd65 48%, #ff9f4f);
  box-shadow: 0 0 16px rgba(233, 189, 101, .38);
  font-size: 20px;
}

.config-grid b {
  color: var(--gold);
  text-align: right;
}

.debug-grid {
  display: grid;
  gap: 10px;
}

.debug-grid > div {
  display: grid;
  grid-template-columns: 70px 1fr repeat(4, auto);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #2e7f91;
  background: rgba(8, 20, 31, .72);
}

.debug-grid strong {
  color: #ffe26f;
  font-size: 22px;
}

.debug-reset {
  width: 100%;
  margin-top: 12px;
  border-color: #ff6b6b;
  color: #ffd2d2;
}

.home-stage.panel-open .home-back {
  opacity: 0;
  pointer-events: none;
}

.home-panel {
  position: absolute;
  z-index: 3;
  top: clamp(98px, 15vh, 150px);
  right: clamp(18px, 4vw, 56px);
  bottom: clamp(22px, 4vw, 44px);
  width: min(780px, calc(100vw - 36px));
  padding: 0 clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px);
  border: 1px solid rgba(98, 239, 255, .48);
  background: linear-gradient(135deg, rgba(4, 13, 22, .92), rgba(6, 18, 18, .78));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .12);
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(110%);
  transition: transform .7s cubic-bezier(.16, .86, .16, 1), opacity .42s ease, filter .42s ease;
  filter: blur(3px);
}

.home-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
}

.home-panel-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 calc(clamp(14px, 2vw, 24px) * -1) 16px;
  padding: clamp(12px, 2vw, 18px) clamp(14px, 2vw, 24px);
  border-bottom: 1px solid rgba(98, 239, 255, .26);
  background: linear-gradient(180deg, rgba(4, 13, 22, .98), rgba(4, 13, 22, .88));
  backdrop-filter: blur(10px);
}

.home-panel-head h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 36px);
}

.home-panel-back {
  min-width: 76px;
  border-color: #62efff;
  background: rgba(5, 17, 24, .82);
}

.home-card-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.home-tournament-card {
  background: linear-gradient(135deg, rgba(233, 189, 101, .16), transparent 42%), rgba(7, 16, 13, .86);
}

.ranking-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(98, 239, 255, .32);
  background: rgba(3, 10, 8, .78);
  color: var(--muted);
}

.ranking-status {
  margin: 0 0 12px;
  color: #bdf8ff;
}

.ranking-list {
  display: grid;
  gap: 10px;
}

.ranking-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto minmax(120px, auto);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(98, 239, 255, .28);
  background: linear-gradient(90deg, rgba(6, 24, 28, .82), rgba(4, 8, 18, .84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.ranking-row.self {
  border-color: rgba(255, 214, 109, .86);
  box-shadow: 0 0 18px rgba(255, 214, 109, .16), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.ranking-place {
  color: #62efff;
  font-size: 28px;
  text-shadow: 0 0 14px rgba(98, 239, 255, .72);
}

.ranking-main {
  min-width: 0;
}

.ranking-main strong,
.ranking-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-main strong {
  color: #fff;
  font-size: 20px;
}

.ranking-main span,
.ranking-row time {
  color: var(--muted);
  font-size: 14px;
}

.ranking-row time {
  text-align: right;
}

.puzzle-select-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(3, 10, 8, .82);
}

.puzzle-select-head span {
  color: var(--muted);
  font-weight: 800;
}

.puzzle-select-head strong {
  color: var(--gold);
  font-size: 20px;
}

.puzzle-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
}

.puzzle-select-button {
  min-height: 58px;
  border-radius: 10px;
  background: rgba(5, 15, 12, .9);
  border-color: #315c4d;
  font-weight: 900;
  position: relative;
}

.puzzle-select-button.solved {
  border-color: #e9bd65;
  background: linear-gradient(135deg, rgba(233, 189, 101, .22), rgba(5, 15, 12, .9));
  color: #fff5bf;
  box-shadow: 0 0 12px rgba(233, 189, 101, .22);
}

.puzzle-select-button.solved::after {
  content: "CLEAR";
  display: block;
  margin-top: 3px;
  color: #baf0ff;
  font-size: 9px;
  letter-spacing: .08em;
}

.prologue-stage {
  position: relative;
  min-height: 100vh;
  padding: clamp(18px, 4vw, 44px);
  display: grid;
  align-content: end;
  background: #020812 center / cover no-repeat;
  overflow: hidden;
  box-shadow: inset 0 0 120px #000;
}

.ending-stage {
  position: relative;
  min-height: 100vh;
  padding: clamp(18px, 4vw, 44px);
  display: grid;
  align-content: end;
  background: #020812 center / cover no-repeat;
  overflow: hidden;
  box-shadow: inset 0 0 140px #000;
}

.ending-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 226, 138, .28), transparent 25%),
    linear-gradient(180deg, rgba(2, 8, 18, .08), rgba(2, 8, 18, .22) 48%, rgba(1, 4, 9, .88)),
    repeating-linear-gradient(0deg, rgba(90, 245, 255, .04) 0 1px, transparent 1px 6px);
}

.ending-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .58), transparent 25%, transparent 72%, rgba(0, 0, 0, .62)),
    radial-gradient(circle at 50% 56%, transparent 0 24%, rgba(0, 0, 0, .3) 63%, rgba(0, 0, 0, .76));
}

.ending-nameplate {
  position: absolute;
  z-index: 3;
  top: clamp(28px, 7vh, 72px);
  left: 50%;
  width: min(880px, calc(100vw - 40px));
  transform: translateX(-50%);
  padding: clamp(18px, 3vw, 28px);
  text-align: center;
  border: 1px solid rgba(255, 226, 138, .76);
  background: linear-gradient(135deg, rgba(3, 16, 24, .54), rgba(16, 8, 28, .42));
  box-shadow: 0 0 42px rgba(255, 226, 138, .24), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  opacity: 0;
}

.ending-nameplate.active {
  animation: endingNameIn 1.45s cubic-bezier(.18, .82, .2, 1) forwards;
}

.ending-nameplate p {
  margin: 0 0 8px;
  color: #5df2ff;
  font-size: clamp(11px, 2vw, 18px);
  font-weight: 900;
  letter-spacing: .28em;
}

.ending-nameplate strong {
  display: block;
  color: #fff7ce;
  font-size: clamp(42px, 10vw, 104px);
  line-height: 1;
  text-shadow: 0 0 12px #fff, 0 0 36px #e9bd65, 0 0 70px #5df2ff;
  letter-spacing: .08em;
}

.ending-box {
  z-index: 4;
}

.debug-ending {
  margin-top: 12px;
  border-color: #ffd979;
  background: linear-gradient(90deg, rgba(9, 54, 73, .92), rgba(78, 38, 93, .88));
  color: #fff7ce;
}

@keyframes endingNameIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px) scale(.92);
    filter: blur(10px);
  }
  64% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.025);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
}

.prologue-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 8, 18, .14), rgba(2, 8, 18, .34) 45%, rgba(1, 4, 9, .82)),
    repeating-linear-gradient(0deg, rgba(90, 245, 255, .05) 0 1px, transparent 1px 6px);
  pointer-events: none;
  z-index: 1;
}

.prologue-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 70% 35%, transparent 0 28%, rgba(0, 0, 0, .28) 62%, rgba(0, 0, 0, .72));
}

.prologue-top {
  position: absolute;
  z-index: 2;
  top: clamp(18px, 4vw, 42px);
  left: clamp(18px, 4vw, 48px);
  max-width: min(620px, calc(100vw - 36px));
  padding: 16px 20px;
  border-left: 4px solid #5df2ff;
  background: rgba(2, 8, 18, .58);
  text-shadow: 0 0 18px rgba(93, 242, 255, .5);
}

.prologue-top h2 {
  margin: 0;
  font-size: clamp(30px, 6vw, 64px);
  letter-spacing: .06em;
}

.prologue-audio {
  position: absolute;
  z-index: 4;
  top: clamp(18px, 4vw, 42px);
  right: clamp(18px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid rgba(93, 242, 255, .62);
  background: linear-gradient(135deg, rgba(3, 16, 24, .88), rgba(28, 13, 48, .74));
  box-shadow: 0 0 26px rgba(93, 242, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .14);
  color: #eaffff;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.prologue-audio span {
  color: #5df2ff;
  letter-spacing: .12em;
}

.prologue-audio button {
  min-width: 64px;
  min-height: 34px;
  border: 1px solid #5df2ff;
  background: linear-gradient(90deg, #103755, #34184f);
  color: #fff;
  font-weight: 900;
}

.prologue-audio input {
  width: min(160px, 18vw);
  accent-color: #5df2ff;
}

.prologue-audio b {
  min-width: 34px;
  color: #ffe28a;
  text-align: right;
}

.novel-box {
  position: relative;
  z-index: 3;
  width: min(960px, 100%);
  min-height: 190px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(120, 245, 255, .58);
  background: linear-gradient(135deg, rgba(8, 18, 28, .92), rgba(10, 6, 24, .86));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(255, 255, 255, .13);
  backdrop-filter: blur(10px);
}

.novel-speaker {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 6px 18px;
  border: 1px solid #ffd979;
  color: #201408;
  background: linear-gradient(90deg, #ffeaa4, #e9bd65);
  font-weight: 900;
}

.novel-text {
  min-height: 72px;
  margin: 0;
  white-space: pre-wrap;
  color: #fff;
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1.75;
  font-weight: 800;
  text-shadow: 0 2px 10px #000;
}

.prologue-next {
  display: block;
  min-width: 180px;
  min-height: 52px;
  margin: 18px 0 0 auto;
  border: 1px solid #5df2ff;
  background: linear-gradient(90deg, #103755, #34184f);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(93, 242, 255, .3);
}

.prologue-stage:has(.android-select:not([hidden])) .novel-box .prologue-next {
  display: none;
}

.android-select {
  position: relative;
  z-index: 4;
  width: min(980px, 100%);
  margin: 0 auto 16px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid rgba(255, 217, 121, .7);
  background: linear-gradient(135deg, rgba(10, 12, 24, .94), rgba(28, 15, 34, .9));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .65), 0 0 30px rgba(255, 217, 121, .18);
}

.android-select h3 {
  margin: 0 0 6px;
  font-size: clamp(24px, 4vw, 34px);
}

.android-select p {
  color: var(--muted);
  margin: 0 0 14px;
}

.android-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.android-card {
  border: 2px solid rgba(93, 242, 255, .28);
  background: rgba(1, 8, 14, .82);
  color: #fff;
  padding: 10px;
  text-align: left;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.android-card.selected,
.android-card[aria-pressed="true"] {
  border-color: #ffd979 !important;
  background: linear-gradient(135deg, rgba(255, 217, 121, .18), rgba(1, 8, 14, .88)) !important;
  box-shadow: 0 0 26px rgba(255, 217, 121, .45), inset 0 0 0 1px rgba(255, 255, 255, .2);
  transform: translateY(-3px);
}

.android-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 8px;
}

.android-card strong,
.android-card span {
  display: block;
}

.android-card span {
  color: var(--muted);
  font-size: 12px;
}

.android-name {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  color: #ffeaa4;
  font-weight: 900;
}

.android-name input {
  min-height: 48px;
  border: 1px solid #5df2ff;
  background: rgba(3, 10, 18, .88);
  color: #fff;
  padding: 0 14px;
  font-size: 18px;
}

@keyframes homeBgIn {
  from {
    opacity: 0;
    filter: blur(10px) brightness(.72);
    transform: scale(1.045);
  }
  to {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1);
  }
}

@keyframes homeScanIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes homeTitleIn {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(.98);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes homeMenuIn {
  from {
    opacity: 0;
    transform: translateX(150px);
  }
  70% {
    opacity: 1;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes homeBackIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-stage::before,
  .home-stage::after,
  .home-mode,
  .menu-button,
  .home-back {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.view-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.view-head h2 {
  font-size: clamp(24px, 4vw, 36px);
  margin: 0;
}

.back-menu {
  min-width: 76px;
}

.online-shell {
  display: grid;
  gap: 16px;
}

.online-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: -4px 0 14px auto;
  padding: 10px 14px;
  border: 1px solid rgba(93, 242, 255, .58);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(3, 16, 24, .9), rgba(28, 13, 48, .74));
  box-shadow: 0 0 22px rgba(93, 242, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #eaffff;
  font-weight: 900;
}

.online-audio span {
  color: #5df2ff;
  letter-spacing: .12em;
}

.online-audio button {
  min-width: 64px;
  min-height: 34px;
  border: 1px solid #5df2ff;
  background: linear-gradient(90deg, #103755, #34184f);
  color: #fff;
  font-weight: 900;
}

.online-audio input {
  width: min(160px, 24vw);
  accent-color: #5df2ff;
}

.online-audio b {
  min-width: 34px;
  color: #ffe28a;
  text-align: right;
}

.online-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at 16% 0%, rgba(86, 216, 255, .12), transparent 34%),
    linear-gradient(135deg, rgba(6, 18, 15, .94), rgba(5, 8, 18, .92));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .24), inset 0 0 36px rgba(255, 255, 255, .04);
}

.online-top,
.online-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.online-panel {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.online-panel.active {
  display: grid;
}

.online-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.online-panel input,
.online-panel select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #54e4ff88;
  border-radius: 10px;
  padding: 0 12px;
  color: var(--text);
  background: #030b11;
  font: inherit;
}

.online-panel button {
  align-self: end;
  min-height: 46px;
}

.online-room-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.online-room-head span,
.online-status-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.online-room-head strong {
  display: block;
  color: var(--gold);
  font-size: 34px;
  letter-spacing: .14em;
}

.online-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.online-status-grid > div,
.online-rules {
  border: 1px solid rgba(86, 216, 255, .26);
  border-radius: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, .22);
}

.online-status-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 18px;
}

.online-rules {
  margin-bottom: 14px;
  color: var(--muted);
  line-height: 1.7;
}

.online-board {
  width: min(72vw, 560px);
  max-width: 100%;
  margin: 0 auto 14px;
}

.online-message {
  min-height: 1.5em;
  color: #aeeeff;
  font-weight: 800;
  line-height: 1.7;
}

.online-board .sq {
  cursor: default;
}

.online-board .sq.legal {
  cursor: pointer;
}

.online-board .sq.hinted {
  box-shadow: inset 0 0 0 3px #f0c560, 0 0 22px rgba(240, 197, 96, .85);
  filter: brightness(1.18);
}

.online-board .sq.hinted::after {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 999px;
  background: #f0c560;
  box-shadow: 0 0 14px rgba(240, 197, 96, .95);
  pointer-events: none;
}

.online-board .sq.online-impact .disc {
  animation: discSlam .38s cubic-bezier(.08, .88, .18, 1.35) both;
}

.online-board .sq.online-thunder-hit {
  filter: brightness(1.85) drop-shadow(0 0 12px #8eeaff);
  animation: onlineThunderHit .46s ease-out both;
}

.online-board .sq.online-thunder-hit::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 12px;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0 36%, rgba(255, 255, 255, .95) 37% 42%, transparent 43%),
    linear-gradient(45deg, transparent 0 46%, rgba(93, 242, 255, .75) 47% 53%, transparent 54%);
  filter: drop-shadow(0 0 8px #5df2ff);
  animation: onlineLightningFlash .42s ease-out both;
}

@keyframes onlineThunderHit {
  0%, 100% { filter: none; }
  36% { filter: brightness(2.3) drop-shadow(0 0 14px #8eeaff); }
}

@keyframes onlineLightningFlash {
  0% { opacity: 0; transform: scale(.72) rotate(-8deg); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.24) rotate(8deg); }
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.status-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: #ffffff08;
}

.status-card span,
.status-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.status-card strong {
  display: block;
  font: 34px Georgia, serif;
  margin: 7px 0;
  color: var(--gold);
}

.ability-workbench {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 18px;
  align-items: stretch;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid #56d8ff66;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(90deg, #56d8ff12 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, #56d8ff0f 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(circle at 18% 35%, #5af7ff22, transparent 34%),
    linear-gradient(135deg, #041412, #061c23 48%, #0e0a19);
  box-shadow: 0 0 34px #20e9ff12, inset 0 0 40px #ffffff08;
}

.ability-workbench::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #ffffff12 46%, transparent 47%);
  background-size: 100% 9px;
  opacity: .35;
}

.ability-workbench.saved-pulse {
  animation: abilitySavedPulse 900ms ease;
}

.ability-android-frame {
  position: relative;
  min-height: 260px;
  border: 1px solid #bdfaff88;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #7ef8ff;
  font-weight: 900;
  background:
    radial-gradient(circle at 50% 42%, #66efff26, transparent 48%),
    linear-gradient(180deg, #03120f, #061821);
  box-shadow: inset 0 0 32px #38f7ff24, 0 0 28px #33dfff18;
}

.ability-android-frame::after {
  content: "SCAN";
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: #8cfaffaa;
  font-size: 11px;
  letter-spacing: .18em;
}

.ability-android-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: drop-shadow(0 0 14px #7bf7ff55);
}

.ability-android-data {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
}

.ability-android-data h3 {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  color: #f7feff;
  text-shadow: 0 0 18px #4ef3ff88;
}

.ability-board {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #ffffff14;
  border-radius: 18px;
  background: linear-gradient(180deg, #07110f, #030807);
}

.ability-row {
  display: grid;
  grid-template-columns: 1fr 48px 64px 78px 48px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #050c09;
  box-shadow: inset 0 0 18px #ffffff05;
}

.ability-row.knowledge {
  border-color: #56d8ff88;
  background: linear-gradient(135deg, #12364a88, #050c09 58%);
}

.ability-row.exp {
  border-color: #e9bd6588;
  background: linear-gradient(135deg, #4d351188, #050c09 58%);
}

.ability-row span small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.ability-row strong {
  font: 28px Georgia, serif;
  color: var(--gold);
  text-align: center;
}

.ability-row em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid #ffffff22;
  border-radius: 999px;
  color: #bfe6d6;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  background: #ffffff0a;
  white-space: nowrap;
}

.ability-row button {
  min-height: 42px;
  padding: 8px;
  font-size: 20px;
  font-weight: 900;
}

.ability-confirm {
  width: 100%;
  min-height: 54px;
  margin-top: 14px;
  border-radius: 14px;
  font-size: 20px;
}

.ability-confirm.saved {
  background: linear-gradient(90deg, #35f0ff, #fff4a8);
  color: #03100e;
  box-shadow: 0 0 26px #54f7ff88, 0 0 42px #ffe68155;
}

.ability-saved-notice {
  min-height: 28px;
  margin-top: 10px;
  color: #8ffcff;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
  text-shadow: 0 0 14px #40f5ff88;
}

.ability-saved-notice.show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes abilitySavedPulse {
  0% {
    box-shadow: 0 0 0 #55f6ff00, inset 0 0 0 #fff0;
  }

  35% {
    box-shadow: 0 0 32px #55f6ff99, inset 0 0 34px #f7ffb833;
    border-color: #eaff9a;
  }

  100% {
    box-shadow: 0 0 0 #55f6ff00, inset 0 0 0 #fff0;
  }
}

.tournament-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.tournament-status span,
.puzzle-head > div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #050c09cc;
}

.tournament-status small,
.puzzle-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.tournament-status strong,
.puzzle-head strong {
  display: block;
  margin-top: 5px;
  color: var(--gold);
  font: 28px Georgia, serif;
}

.puzzle-panel {
  max-width: 760px;
}

.puzzle-head,
.puzzle-actions,
.round-actions {
  display: grid;
  gap: 10px;
}

.puzzle-head,
.round-actions {
  grid-template-columns: 1fr 1fr;
}

.puzzle-actions {
  grid-template-columns: repeat(3, 1fr);
}

.puzzle-board {
  --cell: min(9.6vw, 64px);
  margin: 16px auto;
  pointer-events: auto;
}

.puzzle-board .sq {
  cursor: pointer;
}

.puzzle-board .sq.answer {
  z-index: 2;
  box-shadow: inset 0 0 0 4px #ffe071, 0 0 18px #ffe071cc, 0 0 38px #4eefff88;
  animation: puzzleAnswerPulse 1.1s ease-in-out infinite;
}

.puzzle-board .sq.answer::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 999px;
  background: radial-gradient(circle, #fffbd1 0 18%, #ffe071bb 28%, transparent 70%);
  opacity: .92;
  pointer-events: none;
  animation: puzzleAnswerGlow 1.1s ease-in-out infinite;
}

@keyframes puzzleAnswerPulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow: inset 0 0 0 3px #ffe071, 0 0 12px #ffe07188, 0 0 24px #4eefff55;
  }
  50% {
    filter: brightness(1.26);
    box-shadow: inset 0 0 0 5px #fff4aa, 0 0 24px #ffe071ee, 0 0 52px #4eefffaa;
  }
}

@keyframes puzzleAnswerGlow {
  0%, 100% {
    opacity: .38;
    transform: scale(.82);
  }
  50% {
    opacity: .96;
    transform: scale(1.08);
  }
}

.puzzle-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  place-items: center;
  padding: 18px;
  pointer-events: none;
  background: rgba(0, 0, 0, .74);
  backdrop-filter: blur(3px);
}

.puzzle-result-overlay.active {
  display: grid;
}

.puzzle-result-overlay.clear {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 244, 154, .34), transparent 30%),
    radial-gradient(circle at 36% 62%, rgba(42, 255, 238, .2), transparent 34%),
    rgba(0, 0, 0, .82);
}

.puzzle-result-overlay.clear::before,
.puzzle-result-overlay.clear::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.puzzle-result-overlay.clear::before {
  background:
    radial-gradient(circle at 18% 24%, #fff8 0 2px, transparent 3px),
    radial-gradient(circle at 34% 74%, #5ff 0 2px, transparent 3px),
    radial-gradient(circle at 72% 21%, #ffd86a 0 2px, transparent 3px),
    radial-gradient(circle at 83% 66%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 52% 42%, #ff7ee6 0 2px, transparent 3px);
  background-size: 190px 190px;
  animation: puzzleSpark 2.9s linear both;
}

.puzzle-result-overlay.clear::after {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent),
    linear-gradient(0deg, transparent, rgba(84, 255, 244, .16), transparent);
  mix-blend-mode: screen;
  animation: puzzleClearFlash 2.9s ease both;
}

.puzzle-result-overlay.failed {
  background:
    radial-gradient(circle at 50% 50%, rgba(122, 48, 72, .24), transparent 36%),
    rgba(0, 0, 0, .8);
}

.puzzle-result-card {
  position: relative;
  z-index: 1;
  width: min(760px, 92vw);
  padding: clamp(24px, 6vw, 52px);
  border: 2px solid #ffe88d;
  border-radius: 28px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(9, 32, 28, .98), rgba(3, 8, 12, .98) 58%, rgba(62, 39, 5, .98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 42px);
  box-shadow:
    0 36px 130px #000,
    0 0 84px rgba(255, 223, 101, .72),
    0 0 120px rgba(63, 255, 234, .28),
    inset 0 1px 0 #fff9;
  animation: puzzleClearCard 2.9s ease both;
}

.puzzle-result-overlay.failed .puzzle-result-card {
  border-color: #ff7d9a;
  box-shadow: 0 30px 100px #000, 0 0 42px rgba(255, 74, 118, .32), inset 0 1px 0 #fff5;
  animation-duration: 1.9s;
}

.puzzle-result-card span {
  display: block;
  color: #72fff5;
  font-weight: 900;
  letter-spacing: .2em;
  text-shadow: 0 0 18px rgba(46, 255, 245, .85);
}

.puzzle-result-card strong {
  display: block;
  margin: 10px 0 16px;
  color: #fffbe4;
  font-size: clamp(58px, 12vw, 150px);
  line-height: 1;
  letter-spacing: .03em;
  text-shadow:
    0 0 10px #fff,
    0 0 36px rgba(255, 232, 117, .98),
    0 0 78px rgba(50, 255, 239, .65);
  animation: puzzleClearTitle 2.9s ease both;
}

.puzzle-result-overlay.failed .puzzle-result-card strong {
  color: #ffd0dc;
  font-size: clamp(48px, 9vw, 118px);
  text-shadow: 0 0 28px rgba(255, 96, 134, .55);
}

.puzzle-result-card p {
  margin: 0;
  color: #ecfffb;
  font-size: clamp(20px, 4vw, 34px);
  font-weight: 900;
  line-height: 1.35;
  text-shadow: 0 0 18px rgba(50, 255, 239, .65);
}

.round-result,
.reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(3px);
}

.round-result.active,
.reward-overlay.active {
  display: flex;
}

.round-card,
.reward-card {
  width: min(560px, 92vw);
  border: 2px solid #e9bd65;
  border-radius: 24px;
  padding: 26px;
  background: linear-gradient(135deg, #0b2018, #050908 62%, #33240b);
  box-shadow: 0 28px 100px #000, 0 0 42px #e9bd6566, inset 0 1px 0 #fff5;
  text-align: center;
}

.round-card h2 {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: clamp(28px, 6vw, 52px);
}

.round-card p {
  color: #f8fff9;
  font-weight: 900;
  line-height: 1.7;
}

.reward-card {
  width: min(360px, 86vw);
  animation: rewardPop 1.2s ease both;
}

.reward-card span {
  display: block;
  color: #baf0ff;
  font-weight: 900;
  letter-spacing: .18em;
}

.reward-card strong {
  display: block;
  margin-top: 6px;
  color: var(--gold);
  font: 72px Georgia, serif;
  text-shadow: 0 0 24px #e9bd65aa;
}

@keyframes rewardPop {
  0% { opacity: 0; transform: translateY(18px) scale(.86); }
  20% { opacity: 1; transform: translateY(0) scale(1.08); }
  70% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(.98); }
}

.opponent-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.reward-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid #4ed9ff88;
  border-radius: 999px;
  background: linear-gradient(135deg, #0c2d34cc, #211036cc);
  color: #dffcff;
  font-weight: 900;
  box-shadow: 0 0 18px #34e8ff22;
  cursor: pointer;
  user-select: none;
}

.reward-filter input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.view-filter {
  margin: 0 0 14px;
}

.empty-opponent-list {
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #07100dcc;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.opponent-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px 10px;
  background: linear-gradient(135deg, #ffffff0c, transparent 44%), #08130f;
  box-shadow: 0 14px 34px #0005;
  cursor: pointer;
}

.opponent-card:hover,
.opponent-card:focus-visible {
  border-color: var(--gold);
  background: linear-gradient(135deg, #e9bd6522, transparent 48%), #0b1a14;
  outline: none;
}

.opponent-avatar,
.face-box {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #213d32, #070d0a);
  border: 1px solid #45685a;
  color: var(--gold);
  font-weight: 900;
}

.opponent-main strong {
  display: block;
  font-size: 17px;
}

.opponent-main small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.knowledge-chip {
  border-color: #56d8ff66;
  background: #103548aa;
  color: #baf0ff;
}

.opponent-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.progress-chip {
  display: inline-flex;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 12px;
  font-weight: 800;
}

.exp-chip {
  background: #3c2b0faa;
  color: #ffe39b;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  margin-top: 7px;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}

#battleTitle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#battleTitle .rank-badge {
  margin-top: 0;
  transform: translateY(-1px);
}

.rank-newbie {
  background: linear-gradient(135deg, #1a2a24, #060d0a);
  border: 1px solid #7a8d84;
  color: #eef7f2;
  box-shadow: inset 0 0 0 1px #ffffff12;
}

.rank-kyu {
  background: linear-gradient(135deg, #28483b, #10231b);
  border: 1px solid #5f806e;
  color: #d7eee4;
}

.rank-dan-low {
  background: linear-gradient(135deg, #514019, #e2b14f);
  border: 1px solid #f3d88a;
  color: #201508;
  box-shadow: 0 0 12px #e9bd6544;
}

.rank-dan-mid {
  background: linear-gradient(135deg, #352149, #7c4edb 48%, #e9bd65);
  border: 1px solid #d7c1ff;
  color: #fff7d7;
  box-shadow: 0 0 18px #865cff66;
}

.rank-dan-high {
  background: linear-gradient(135deg, #12090b, #c32c55 36%, #ffd76a 68%, #ffffff);
  border: 1px solid #ffe9a6;
  color: #1a0806;
  box-shadow: 0 0 24px #ffd76a88, 0 0 44px #d52c7777;
}

.face-card {
  position: relative;
  display: grid;
  grid-template-columns: 108px 1fr;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  background: #ffffff08;
}

.face-card.corner-speaking {
  z-index: 106;
  border-color: #ffe58f;
  background: linear-gradient(135deg, rgba(42, 30, 7, .94), rgba(6, 18, 15, .92));
  box-shadow: 0 0 28px rgba(233, 189, 101, .45), inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.face-card.corner-speaking .face-dialogue {
  opacity: 1;
  transform: translateY(0);
  border-color: #ffe58f;
  background: linear-gradient(135deg, rgba(42, 22, 5, .98), rgba(9, 28, 25, .96));
  box-shadow: 0 0 24px rgba(233, 189, 101, .45), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.layout {
  grid-template-areas:
    "board panel"
    "self panel";
  grid-template-rows: auto auto;
}

.game-area {
  grid-area: board;
}

.panel {
  grid-area: panel;
}

.face-card.rival {
  width: min(100%, calc(var(--cell) * 8 + 42px));
  margin: 0 0 12px;
}

.face-card.self {
  grid-area: self;
  width: min(100%, calc(var(--cell) * 8 + 42px));
  margin-top: 12px;
}

.face-card .face-box {
  width: 108px;
  border-radius: 18px;
}

.face-box.has-image,
.opponent-avatar.has-image {
  overflow: hidden;
  padding: 0;
  background: #06100c;
}

.face-box img,
.opponent-avatar img {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  object-fit: contain;
  display: block;
  transform: none;
  border-radius: 14px;
}

.face-info {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.face-card strong {
  font-size: 20px;
}

.face-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.face-dialogue {
  min-height: 42px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid #e9bd6566;
  border-radius: 14px;
  background: linear-gradient(135deg, #06120fcc, #172c23cc);
  color: #f8fff9;
  font-weight: 900;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: inset 0 0 0 1px #ffffff12, 0 8px 18px #0005;
  overflow-wrap: anywhere;
}

.face-dialogue.active {
  opacity: 1;
  transform: translateY(0);
}

.face-card .side-stone {
  justify-self: start;
}

#hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.advice-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.advice-count {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 8px 10px;
  border: 1px solid rgba(95, 255, 244, .45);
  border-radius: 999px;
  color: #f6d16d;
  background: rgba(3, 16, 24, .74);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 18px rgba(95, 255, 244, .16);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.advice-count.visible {
  display: inline-flex;
}

#hint .rank-badge {
  padding: 4px 9px;
  font-size: 11px;
}

.side-stone {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff33, 0 4px 10px #0008;
}

.side-stone.black {
  background: radial-gradient(circle at 34% 25%, #58625d, #111613 43%, #010202);
  border: 1px solid #839087;
}

.side-stone.white {
  background: radial-gradient(circle at 34% 25%, #fff, #e7eae8 55%, #aeb6b1);
  border: 1px solid #f7fff9;
}

.readonly-box {
  width: 100%;
  border: 1px solid #365548;
  border-radius: 9px;
  padding: 10px 12px;
  background: #050c09;
  color: var(--gold);
  font-weight: 900;
}

.parameter-readonly {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.param-pill {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #2b493c;
  border-radius: 12px;
  padding: 10px;
  background: #050c09;
}

.param-pill span {
  color: var(--muted);
  font-size: 12px;
}

.param-pill strong {
  color: var(--gold);
}

.mode-switch button:disabled {
  cursor: not-allowed;
  opacity: .72;
}

.score,
.status,
.setup-controls {
  display: none;
}

.score.visible,
.status.visible,
.setup-controls.visible {
  display: block;
}

.setup-controls.tournament-only label,
.setup-controls.tournament-only .mode-switch {
  display: none;
}

.score.visible {
  display: grid;
}

.battle-start {
  width: 100%;
  min-height: 50px;
  margin: 10px 0 14px;
  border-radius: 13px;
  font-size: 18px;
  font-weight: 900;
}

.board-frame {
  position: relative;
}

.board-frame.corner-shake,
.online-room.corner-shake {
  animation: cornerShake .44s cubic-bezier(.2,.7,.2,1) 0s 2;
}

body.corner-storm::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 88;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(130, 230, 255, .22), transparent 30%),
    rgba(0, 0, 0, .48);
  animation: cornerStormDark 1.45s ease-out both;
}

.corner-storm-layer {
  position: fixed;
  inset: 0;
  z-index: 101;
  pointer-events: none;
  overflow: hidden;
}

.corner-screen-bolt {
  position: absolute;
  width: 14px;
  transform-origin: top center;
  background: linear-gradient(180deg, #fff 0%, #bff8ff 38%, #47ddff 66%, transparent 100%);
  clip-path: polygon(44% 0, 72% 0, 58% 30%, 86% 30%, 47% 100%, 58% 46%, 28% 46%);
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px #26dfff);
  opacity: 0;
  animation: cornerBolt 1.05s cubic-bezier(.18,.72,.2,1) both;
}

.sq.corner-god {
  z-index: 9;
  animation: cornerGodCell 2.2s cubic-bezier(.16,.72,.2,1) both;
}

.sq.corner-god::after {
  content: "";
  position: absolute;
  inset: -16%;
  z-index: 4;
  pointer-events: none;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .9) 0 8%, rgba(255, 235, 134, .7) 9% 23%, transparent 47%),
    conic-gradient(from 0deg, transparent, rgba(255, 239, 145, .88), transparent, rgba(130, 245, 255, .65), transparent);
  filter: blur(.2px) drop-shadow(0 0 16px rgba(255, 229, 91, .95));
  animation: cornerGodAura 2.2s ease-out both;
}

.sq.corner-god .disc {
  position: relative;
  z-index: 5;
  filter: brightness(1.45) drop-shadow(0 0 20px rgba(255, 237, 122, .95)) drop-shadow(0 0 34px rgba(78, 247, 255, .65));
}

.corner-god-ring {
  position: absolute;
  z-index: 12;
  width: 12.5%;
  height: 12.5%;
  pointer-events: none;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 226, 91, .5), transparent 64%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .8), rgba(255, 226, 91, .42) 36%, transparent 72%);
  box-shadow:
    0 0 18px rgba(255, 242, 160, .95),
    0 0 48px rgba(255, 202, 56, .72),
    0 0 76px rgba(40, 230, 255, .35);
  mix-blend-mode: screen;
  animation: cornerGodRing 2.2s cubic-bezier(.16,.72,.2,1) both;
}

.pass-message {
  position: fixed;
  inset: 0;
  z-index: 104;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(233, 189, 101, .14), transparent 34%);
  animation: passLayer 1.15s ease-out both;
}

.pass-message strong {
  display: block;
  padding: 12px 34px 8px;
  border: 2px solid rgba(233, 189, 101, .9);
  border-radius: 18px;
  color: #fff7cf;
  background: linear-gradient(135deg, rgba(5, 16, 12, .92), rgba(45, 31, 10, .88));
  box-shadow: 0 0 34px rgba(233, 189, 101, .45), inset 0 1px 0 rgba(255, 255, 255, .38);
  font-size: clamp(48px, 10vw, 112px);
  line-height: 1;
  letter-spacing: .08em;
  text-shadow: 0 0 22px rgba(233, 189, 101, .7);
  animation: passText .88s cubic-bezier(.16,.78,.2,1) both;
}

.pass-message span {
  display: block;
  margin-top: 14px;
  color: #c8fff0;
  font-weight: 900;
  font-size: clamp(15px, 3vw, 24px);
  text-align: center;
  text-shadow: 0 0 14px rgba(80, 240, 255, .7);
}

@keyframes cornerShake {
  0%, 100% { transform: translate(0, 0); }
  18% { transform: translate(-7px, 3px) rotate(-.3deg); }
  36% { transform: translate(7px, -3px) rotate(.35deg); }
  54% { transform: translate(-5px, 2px); }
  72% { transform: translate(4px, -1px); }
}

@keyframes passLayer {
  0%, 100% { opacity: 0; }
  14%, 82% { opacity: 1; }
}

@keyframes passText {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.88);
  }
  28%, 82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.05);
  }
}

@keyframes cornerStormDark {
  0%, 100% { opacity: 0; }
  12%, 72% { opacity: 1; }
  24%, 38%, 58% { filter: brightness(1.75); }
}

@keyframes cornerBolt {
  0%, 100% {
    opacity: 0;
    scale: .86 0;
  }
  12%, 44% {
    opacity: 1;
    scale: 1 1;
  }
  62% {
    opacity: .55;
  }
}

@keyframes cornerGodCell {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }
  14% {
    filter: brightness(2.6) saturate(1.6);
    transform: scale(1.06);
  }
  36%, 68% {
    filter: brightness(1.72) saturate(1.35);
    transform: scale(1.02);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

@keyframes cornerGodAura {
  0% {
    opacity: 0;
    transform: scale(.45) rotate(0deg);
  }
  18% {
    opacity: 1;
    transform: scale(1.25) rotate(80deg);
  }
  58% {
    opacity: .86;
    transform: scale(1.55) rotate(210deg);
  }
  100% {
    opacity: 0;
    transform: scale(2.15) rotate(360deg);
  }
}

@keyframes cornerGodRing {
  0% {
    opacity: 0;
    transform: scale(.28);
  }
  16% {
    opacity: 1;
    transform: scale(1.35);
  }
  62% {
    opacity: .92;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(2.25);
  }
}

.dramatic-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 50%, #e9bd6530, transparent 34%), rgba(0, 0, 0, .74);
  backdrop-filter: blur(3px);
}

.advice-cutin {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(95, 255, 244, .14), transparent 28%);
}

.advice-cutin.active {
  display: flex;
}

.advice-cutin-frame {
  position: relative;
  width: min(760px, 86vw);
  height: clamp(96px, 16vw, 150px);
  overflow: hidden;
  border: 2px solid #5ffff4;
  border-radius: 18px;
  background: #020908;
  box-shadow: 0 0 34px rgba(95, 255, 244, .48), 0 20px 60px rgba(0, 0, 0, .72);
  animation: adviceCutinIn 1.25s ease both;
}

.advice-cutin-frame::before,
.advice-cutin-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.advice-cutin-frame::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  animation: adviceScan 1.1s ease both;
}

.advice-cutin-frame::after {
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 15px;
  inset: 8px;
}

.advice-cutin-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter: contrast(1.08) saturate(1.08);
  transform: scale(1.18);
}

.advice-cutin-frame strong {
  position: absolute;
  right: clamp(14px, 4vw, 34px);
  bottom: 12px;
  color: #f6d16d;
  font-size: clamp(18px, 3.6vw, 34px);
  letter-spacing: .08em;
  text-shadow: 0 0 16px rgba(0, 0, 0, .9), 0 0 18px rgba(246, 209, 109, .55);
}

@keyframes adviceCutinIn {
  0% {
    opacity: 0;
    transform: translateX(-60px) scale(.96);
  }
  18%, 78% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(42px) scale(1.02);
  }
}

@keyframes adviceScan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.dramatic-overlay.active {
  display: flex;
  animation: dramaticIn .2s ease-out;
}

.dramatic-overlay.promotion {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 235, 151, .28), transparent 36%),
    radial-gradient(circle at 50% 64%, rgba(39, 255, 219, .18), transparent 34%),
    rgba(0, 0, 0, .82);
}

.dramatic-overlay.puzzle-clear {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 246, 160, .34), transparent 30%),
    radial-gradient(circle at 38% 58%, rgba(33, 255, 229, .2), transparent 34%),
    radial-gradient(circle at 64% 36%, rgba(255, 103, 214, .16), transparent 28%),
    rgba(0, 0, 0, .84);
}

.dramatic-overlay.puzzle-clear::before,
.dramatic-overlay.puzzle-clear::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dramatic-overlay.puzzle-clear::before {
  background:
    radial-gradient(circle at 18% 24%, #fff8 0 2px, transparent 3px),
    radial-gradient(circle at 34% 74%, #5ff 0 2px, transparent 3px),
    radial-gradient(circle at 72% 21%, #ffd86a 0 2px, transparent 3px),
    radial-gradient(circle at 83% 66%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 52% 42%, #ff7ee6 0 2px, transparent 3px);
  background-size: 190px 190px;
  animation: puzzleSpark 2.9s linear both;
}

.dramatic-overlay.puzzle-clear::after {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent),
    linear-gradient(0deg, transparent, rgba(84, 255, 244, .16), transparent);
  mix-blend-mode: screen;
  animation: puzzleClearFlash 2.9s ease both;
}

.dramatic-overlay.puzzle-failed {
  background:
    radial-gradient(circle at 50% 50%, rgba(122, 48, 72, .24), transparent 36%),
    rgba(0, 0, 0, .8);
}

.dramatic-card {
  width: min(1060px, 94vw);
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(18px, 4vw, 34px);
  border: 2px solid #e9bd65;
  border-radius: 26px;
  background: linear-gradient(135deg, #0b2018, #050908 62%, #33240b);
  box-shadow: 0 28px 100px #000, 0 0 42px #e9bd6566, inset 0 1px 0 #fff5;
}

.dramatic-overlay.promotion .dramatic-card {
  width: min(1180px, 96vw);
  border-color: #ffe98c;
  background:
    linear-gradient(135deg, rgba(20, 56, 43, .96), rgba(5, 9, 8, .96) 56%, rgba(88, 55, 9, .96)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 46px);
  box-shadow:
    0 34px 120px #000,
    0 0 70px rgba(255, 215, 95, .55),
    0 0 110px rgba(49, 255, 238, .22),
    inset 0 1px 0 #fff8;
  animation: promotionCard 3.2s ease both;
}

.dramatic-overlay.puzzle-clear .dramatic-card {
  border-color: #ffe88d;
  background:
    linear-gradient(135deg, rgba(9, 32, 28, .98), rgba(3, 8, 12, .98) 58%, rgba(62, 39, 5, .98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 42px);
  box-shadow:
    0 36px 130px #000,
    0 0 84px rgba(255, 223, 101, .72),
    0 0 120px rgba(63, 255, 234, .28),
    inset 0 1px 0 #fff9;
  animation: puzzleClearCard 2.9s ease both;
}

.dramatic-overlay.puzzle-failed .dramatic-card {
  border-color: #ff7d9a;
  box-shadow: 0 30px 100px #000, 0 0 42px rgba(255, 74, 118, .32), inset 0 1px 0 #fff5;
}

.dramatic-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #06100c;
  border-radius: 24px;
  border: 2px solid #ffffff66;
  box-shadow: 0 24px 70px #000b;
}

.dramatic-copy span {
  color: var(--gold);
  font-weight: 900;
  letter-spacing: .2em;
}

.dramatic-copy strong {
  display: block;
  margin: 8px 0 16px;
  font-size: clamp(38px, 5.4vw, 78px);
  line-height: 1;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  text-shadow: 0 0 24px #e9bd6588;
}

.dramatic-overlay.promotion .dramatic-copy span {
  color: #7bfff6;
  text-shadow: 0 0 18px rgba(40, 255, 246, .9);
}

.dramatic-overlay.promotion .dramatic-copy strong {
  font-size: clamp(54px, 9vw, 132px);
  color: #fff8d7;
  text-shadow:
    0 0 10px #fff,
    0 0 34px rgba(255, 220, 96, .95),
    0 0 72px rgba(255, 123, 61, .55);
  animation: promotionTitle 3.2s ease both;
}

.dramatic-overlay.puzzle-clear .dramatic-copy span {
  color: #72fff5;
  text-shadow: 0 0 18px rgba(46, 255, 245, .85);
}

.dramatic-overlay.puzzle-clear .dramatic-copy strong {
  font-size: clamp(56px, 10vw, 142px);
  color: #fffbe4;
  letter-spacing: .03em;
  text-shadow:
    0 0 10px #fff,
    0 0 36px rgba(255, 232, 117, .98),
    0 0 78px rgba(50, 255, 239, .65);
  animation: puzzleClearTitle 2.9s ease both;
}

.dramatic-overlay.puzzle-clear .dramatic-copy p {
  color: #ecfffb;
  text-shadow: 0 0 18px rgba(50, 255, 239, .65);
}

.dramatic-overlay.puzzle-failed .dramatic-copy strong {
  color: #ffd0dc;
  text-shadow: 0 0 28px rgba(255, 96, 134, .55);
}

.dramatic-copy p {
  margin: 0;
  font-size: clamp(20px, 4vw, 34px);
  font-weight: 900;
  line-height: 1.35;
}

@keyframes dramaticIn {
  from {
    opacity: 0;
    transform: scale(.98);
  }
}

@keyframes promotionCard {
  0% {
    opacity: 0;
    transform: scale(.86) translateY(22px);
    filter: brightness(1.8) blur(6px);
  }
  18% {
    opacity: 1;
    transform: scale(1.04) translateY(0);
    filter: brightness(1.35) blur(0);
  }
  36%, 82% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.06);
    filter: brightness(1.5) blur(4px);
  }
}

@keyframes promotionTitle {
  0% {
    opacity: 0;
    letter-spacing: .16em;
    transform: translateY(18px) scale(.9);
  }
  22% {
    opacity: 1;
    letter-spacing: .04em;
    transform: translateY(0) scale(1.05);
  }
  42%, 82% {
    opacity: 1;
    letter-spacing: 0;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(1.08);
  }
}

@keyframes puzzleClearCard {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(.88);
    filter: brightness(1.9) blur(8px);
  }
  18% {
    opacity: 1;
    transform: translateY(0) scale(1.06);
    filter: brightness(1.28) blur(0);
  }
  40%, 78% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.05);
    filter: brightness(1.55) blur(4px);
  }
}

@keyframes puzzleClearTitle {
  0% {
    opacity: 0;
    transform: scale(.72) rotate(-2deg);
    letter-spacing: .18em;
  }
  18% {
    opacity: 1;
    transform: scale(1.12) rotate(0deg);
    letter-spacing: .05em;
  }
  36%, 76% {
    opacity: 1;
    transform: scale(1);
    letter-spacing: .03em;
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
    letter-spacing: .12em;
  }
}

@keyframes puzzleSpark {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(.94);
  }
  18%, 78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-38px) scale(1.05);
  }
}

@keyframes puzzleClearFlash {
  0%, 100% {
    opacity: 0;
    transform: translateX(-24%);
  }
  18%, 50% {
    opacity: 1;
  }
  76% {
    opacity: .45;
    transform: translateX(24%);
  }
}

@media (max-width: 820px) {
  .online-card {
    padding: 14px;
    border-radius: 14px;
  }

  .online-panel,
  .online-status-grid {
    grid-template-columns: 1fr;
  }

  .online-room-head {
    align-items: flex-start;
  }

  .online-room-head strong {
    font-size: 28px;
  }

  .online-board {
    width: min(94vw, 520px);
  }

  .online-audio {
    width: 100%;
    justify-content: space-between;
    margin: 0 0 14px;
  }

  .online-audio input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .online-actions > button,
  .online-top > button {
    flex: 1 1 140px;
  }
}

@keyframes thinkingBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.actions {
  grid-template-columns: 1fr 1fr 1fr;
}

.actions .debug-win {
  border-color: #ff75c9;
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 62, 125, .88), rgba(255, 184, 76, .88));
  box-shadow: 0 0 18px rgba(255, 100, 178, .32);
}

.actions .debug-win:disabled {
  opacity: .45;
  box-shadow: none;
}

.danger-exit {
  border-color: #ff7a9f;
  color: #fff;
  background: linear-gradient(90deg, rgba(93, 21, 44, .88), rgba(42, 18, 52, .88));
}

#reviewPrev,
#reviewNext {
  display: none;
}

body.review-ready #reviewPrev,
body.review-ready #reviewNext {
  display: inline-block;
}

body.review-ready #hint,
body.game-started #backToMatch {
  display: none;
}

#exitBattle {
  display: none;
}

body.game-started #exitBattle {
  display: inline-flex;
}

@media (max-width: 800px) {
  .prologue-audio {
    top: 14px;
    left: 14px;
    right: 14px;
    justify-content: space-between;
  }

  .prologue-audio input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .prologue-top {
    top: 104px;
  }

  .main-menu,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .home-stage {
    min-height: 100svh;
  }

  .home-stage::after {
    inset: 0;
    height: auto;
    background:
      linear-gradient(180deg, rgba(2, 8, 16, .92) 0%, rgba(2, 8, 16, .78) 36%, rgba(3, 10, 18, .22) 62%, rgba(3, 8, 14, .12) 100%),
      url("../assets/home/othello-main-bg-mobile.webp?v=20260818-1") center / cover no-repeat;
  }

  .menu-button {
    min-height: 66px;
  }

  .ranking-row {
    grid-template-columns: 42px 1fr auto;
  }

  .ranking-row time {
    grid-column: 2 / 4;
    text-align: left;
  }

  .debug-panel {
    left: 14px;
    right: 14px;
    top: 14px;
  }

  .config-panel {
    left: 14px;
    right: 14px;
    top: auto;
  }

  .config-grid label {
    grid-template-columns: 1fr 72px 42px;
  }

  .config-grid input[type="range"] {
    grid-column: span 2;
  }

  .config-grid b {
    grid-column: span 1;
  }

  .debug-grid > div {
    grid-template-columns: 1fr 1fr;
  }

  .debug-grid > div span,
  .debug-grid > div strong {
    grid-column: span 2;
  }

  .home-back {
    min-width: 104px;
    min-height: 48px;
    font-size: 20px;
  }

  .face-card {
    grid-template-columns: 72px 1fr;
  }

  .face-card .face-box {
    width: 72px;
  }

  .dramatic-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .dramatic-card img {
    width: min(72vw, 300px);
    margin: 0 auto;
  }

  .actions {
    grid-template-columns: 1fr;
  }

  .face-card.self {
    grid-area: self;
  }

  .layout {
    grid-template-areas:
      "board"
      "self"
      "panel";
  }

  .parameter-readonly {
    grid-template-columns: 1fr;
  }

  .ability-workbench {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .ability-android-frame {
    min-height: 220px;
    max-height: 320px;
  }

  .ability-row {
    grid-template-columns: 44px 56px 72px 44px;
  }

  .ability-row > span {
    grid-column: 1 / -1;
  }

  .prologue-stage {
    min-height: 100svh;
    padding: 14px;
    background-position: center top;
  }

  .ending-stage {
    min-height: 100svh;
    padding: 14px;
    background-position: center top;
  }

  .prologue-top {
    top: 112px;
    left: 14px;
    right: 14px;
    padding: 12px 14px;
  }

  .prologue-top h2 {
    font-size: clamp(24px, 8vw, 38px);
    line-height: 1.15;
  }

  .novel-box {
    min-height: 220px;
  }

  .ending-nameplate {
    top: 82px;
    width: calc(100vw - 28px);
    padding: 14px 12px;
  }

  .ending-nameplate p {
    font-size: 10px;
  }

  .ending-nameplate strong {
    font-size: clamp(34px, 11vw, 56px);
  }

  .ending-box {
    min-height: 210px;
  }

  .android-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .android-select {
    max-height: 58svh;
    overflow: auto;
  }
}