:root {
  --paper:#f3f0e7;
  --ink:#282b24;
  --orange:#ef603a;
  --muted:#686e5e;
  --line:#d7d8cc;
  --green:#526a44;
  --cream:#fffaf0;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background-image:radial-gradient(#a9a99728 .65px,transparent .65px);
  background-size:6px 6px
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit;
  cursor:pointer;
  color:inherit
}
button {
  border:0
}
button:disabled {
  cursor:default
}
button:focus-visible,a:focus-visible {
  outline:3px solid #287b8b;
  outline-offset:5px
}
button:not(:disabled) {
  touch-action:manipulation
}
button {
  transition:background .15s,transform .15s,box-shadow .15s
}
button:not(:disabled):active {
  transform:translateY(2px)
}
[hidden] {
  display:none!important
}
a {
  color:inherit
}
.app-shell {
  --page-gutter:54px;
  max-width:1360px;
  margin:auto;
  padding:env(safe-area-inset-top,0px) max(var(--page-gutter),env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(var(--page-gutter),env(safe-area-inset-left,0px))
}
.topbar {
  height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand {
  min-height:44px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  flex-shrink:0;
  text-decoration:none;
  white-space:nowrap
}
.brand-name {
  display:flex;
  align-items:baseline;
  position:relative;
  padding-right:20px;
  font-size:32px;
  font-weight:900;
  line-height:1;
  letter-spacing:-1px
}
.brand-flash,.brand-step {
  display:inline-block;
  transition:transform .2s ease
}
.brand-flash {
  color:var(--orange);
  transform:rotate(-10deg) translateY(1px)
}
.brand-step {
  transform:rotate(7deg) translateY(-2px)
}
.brand-club {
  margin-left:5px;
  font-size:22px;
  letter-spacing:1px;
  transform:rotate(-3deg)
}
.brand-spark {
  position:absolute;
  right:0;
  top:-4px;
  width:18px;
  height:18px;
  fill:var(--orange);
  transform:rotate(12deg)
}
.brand:hover .brand-flash,.brand:focus-visible .brand-flash {
  transform:rotate(-15deg) translate(-2px,-1px)
}
.brand:hover .brand-step,.brand:focus-visible .brand-step {
  transform:rotate(11deg) translate(2px,-3px)
}
.brand small {
  display:block;
  font-size:8px;
  letter-spacing:3px;
  margin-left:2px;
  font-weight:700;
  color:var(--muted)
}
.top-actions {
  display:flex;
  gap:20px;
  align-items:center
}
.edition {
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--muted);
  margin-right:12px
}
.icon-button {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent
}
.icon-button:hover {
  background:#e8e6dc
}
.icon-button svg {
  width:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linejoin:round;
  stroke-linecap:round
}
.help-button {
  min-height:44px;
  min-width:44px;
  display:flex;
  align-items:center;
  gap:9px;
  background:none;
  font-size:12px;
  font-weight:650;
  padding:8px 0
}
.help-button span {
  border:1px solid var(--ink);
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px
}
.hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);
  gap:54px;
  padding:48px 0 40px;
  align-items:center
}
.hero-copy,.hero-heading {
  min-width:0
}
.hero-heading {
  margin-bottom:14px
}
.eyebrow {
  font-size:11px;
  letter-spacing:2px;
  display:flex;
  align-items:center;
  gap:8px
}
.live-dot,.caption-dot {
  width:6px;
  height:6px;
  background:var(--orange);
  border-radius:50%;
  display:inline-block
}
.hero h1 {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:clamp(65px,7.4vw,102px);
  line-height:1.14;
  margin:20px 0 0;
  white-space:nowrap
}
.title-wordmark {
  display:block;
  width:2.83em;
  height:1.04em;
  flex-shrink:0
}
.title-en {
  display:block;
  letter-spacing:4.4px;
  font-size:11px;
  font-weight:800;
  margin:10px 0 0 4px
}
.title-star {
  font-size:48px;
  font-weight:400;
  color:var(--orange);
  align-self:flex-start;
  margin-top:8px;
  letter-spacing:0;
  line-height:1;
  transform:rotate(-12deg)
}
.tagline {
  display:flex;
  flex-wrap:wrap;
  column-gap:.35em;
  font-size:20px;
  line-height:1.55;
  font-weight:700;
  letter-spacing:.5px;
  margin:22px 0 0
}
.tagline span {
  white-space:nowrap
}
.selection-heading {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  align-items:center;
  margin:0 0 12px
}
.selection-heading>span:first-child {
  font-size:12px;
  font-weight:650
}
.selection-heading b {
  font-size:10px;
  margin-right:8px;
  color:var(--orange)
}
.selection-heading>span:last-child {
  color:var(--muted)
}
.characters {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.character {
  position:relative;
  min-width:0;
  padding:0 5px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#eeede3;
  overflow:hidden
}
.character:hover {
  background:#e5e5d7
}
.character.selected {
  border:2px solid var(--orange);
  background:#ffe8d7;
  padding:0 4px 11px;
  box-shadow:0 3px 0 #ef603a17
}
.character canvas {
  display:block;
  width:100%;
  height:83px;
  object-fit:contain
}
.character-name {
  display:block;
  font-size:12px;
  font-weight:800
}
.character small {
  font-size:9px;
  display:block;
  color:var(--muted);
  margin-top:5px
}
.selected-mark {
  position:absolute;
  right:5px;
  top:5px;
  background:var(--orange);
  color:#fff;
  width:15px;
  height:15px;
  font-size:10px;
  border-radius:50%;
  display:none;
  place-items:center
}
.selected .selected-mark {
  display:grid
}
.launch-row {
  display:flex;
  gap:14px;
  margin-top:22px
}
.primary {
  background:#c34325;
  border:1px solid #c34325;
  color:#fffaf0;
  padding:17px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:16px;
  font-weight:800;
  gap:40px;
  border-radius:7px;
  box-shadow:0 4px 0 #b3442b;
  flex:1
}
.primary:hover {
  background:#ad381e
}
.primary span {
  font-size:25px;
  line-height:1;
  font-weight:400
}
.practice {
  background:transparent;
  border:1px solid #c8cabc;
  font-size:12px;
  padding:0 18px;
  border-radius:7px;
  white-space:nowrap
}
.practice:hover {
  background:#e7e8dc
}
.practice span {
  margin-left:5px
}
.launch-note {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:var(--muted);
  margin-top:13px;
  gap:8px
}
.launch-note b {
  font-variant-numeric:tabular-nums;
  color:var(--ink)
}
.hero-stage {
  height:588px;
  position:relative;
  border:1px solid #cdcec0;
  background:#e3e7d7;
  border-radius:24px;
  overflow:hidden;
  isolation:isolate
}
.hero-stage:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 18%,#ffffed80,transparent 60%);
  pointer-events:none
}
.hero-stage canvas {
  width:100%;
  height:100%;
  display:block
}
.stage-corner {
  position:absolute;
  top:33px;
  left:0;
  right:0;
  text-align:center;
  font-size:10px;
  line-height:1.9;
  letter-spacing:4px;
  z-index:1;
  color:#68795d
}
.stage-corner strong {
  font-size:20px;
  color:var(--ink);
  letter-spacing:5px
}
.stage-ticket {
  position:absolute;
  top:33px;
  right:30px;
  transform:rotate(8deg);
  padding:7px 9px;
  font-size:9px;
  line-height:1.6;
  letter-spacing:1px;
  writing-mode:horizontal-tb;
  background:var(--paper);
  border:1px solid #b7baa7;
  box-shadow:3px 3px 0 #c8cebb
}
.preview-caption {
  position:absolute;
  left:25px;
  right:25px;
  bottom:24px;
  display:flex;
  align-items:center;
  gap:9px;
  border-top:1px solid #b9c2ad;
  padding-top:17px;
  font-size:12px;
  font-weight:800
}
.caption-detail {
  font-size:10px;
  font-weight:400;
  color:#65715c;
  margin-left:auto
}
.stage-sticker {
  position:absolute;
  left:30px;
  top:33px;
  font-size:17px;
  line-height:1.3;
  font-weight:850;
  color:var(--orange);
  transform:rotate(-11deg)
}
.stage-sticker svg {
  display:none;
  width:52px;
  fill:none;
  stroke:var(--orange);
  stroke-width:2;
  margin:8px 0 0 15px
}
.how-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:23px 0
}
.how-strip>div {
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 28px;
  border-left:1px solid var(--line)
}
.how-strip>div:first-child {
  padding-left:0;
  border-left:0
}
.how-strip>div:last-child {
  padding-right:0
}
.step-num {
  color:var(--orange);
  font-size:11px;
  font-family:monospace;
  align-self:flex-start;
  margin-top:3px
}
.how-strip strong {
  font-size:12px;
  font-weight:800
}
.how-strip p {
  font-size:10px;
  color:var(--muted);
  margin:8px 0 0;
  line-height:1.7
}
.strip-icon {
  font-size:30px;
  margin-left:auto;
  font-weight:400;
  color:#7d8674
}
kbd {
  font-family:inherit;
  font-size:9px;
  display:inline-block;
  min-width:15px;
  text-align:center;
  border:1px solid #c1c6b5;
  border-radius:3px;
  padding:0 3px;
  box-shadow:0 1px 0 #c1c6b5;
  line-height:1.4
}
footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:25px 0;
  font-size:9px;
  color:#848577
}
footer .text-button {
  font-size:10px;
  color:#68735a
}
.footer-code {
  letter-spacing:5px
}
.text-button {
  background:none;
  padding:6px 0;
  font-size:12px
}
.text-button:hover {
  color:var(--orange)
}
.game-heading {
  max-width:970px;
  margin:18px auto 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted)
}
.game-board {
  position:relative;
  border:1px solid #b7bfa9;
  border-radius:15px;
  overflow:hidden;
  background:#e3e7d7;
  max-width:970px;
  margin:auto
}
.hud {
  height:84px;
  padding:15px 27px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #c5cdb9;
  background:#eaf0df;
  position:relative;
  z-index:1
}
.hud small {
  font-size:9px;
  color:#6a765f;
  display:block;
  letter-spacing:1px
}
.hud-score {
  min-width:100px
}
.hud-score strong {
  font-size:29px;
  letter-spacing:2px;
  display:block;
  font-variant-numeric:tabular-nums
}
.hud-center {
  text-align:center;
  position:relative
}
.hud-center>span {
  font-size:10px;
  letter-spacing:1px;
  display:block
}
.hud-center>b {
  font-size:28px;
  font-weight:800;
  line-height:1.2;
  font-variant-numeric:tabular-nums
}
.hud-center b span {
  font-size:10px;
  font-weight:400;
  padding-left:5px
}
.hud-center .urgent {
  color:#bc4228;
}
.hud-lives {
  text-align:right;
  min-width:100px
}
.hud-lives>div {
  font-size:21px;
  color:#c34325;
  letter-spacing:3px;
  margin-top:4px
}
.lost-heart {
  color:#bac1ad
}
.arena-wrap {
  position:relative;
  width:100%;
  height:min(49vh,450px);
  min-height:300px
}
.arena-wrap::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 65px 10px #be542950;
  opacity:0;
}
.arena-wrap.impact::after {
  animation:impact-feedback .4s ease-out both;
}
@keyframes impact-feedback {
  from { opacity:1; }
  to { opacity:0; }
}
.arena-wrap canvas {
  width:100%;
  height:100%;
  display:block;
  touch-action:none
}
#arena:focus {
  outline:none
}
#arena:focus-visible {
  outline:2px solid #82916f;
  outline-offset:-2px
}
.power-row {
  display:flex;
  align-items:center;
  gap:15px;
  height:65px;
  padding:12px 27px;
  background:var(--paper);
  border-top:1px solid var(--line)
}
.power-copy {
  min-width:104px
}
.power-copy b {
  display:block;
  font-size:11px;
  font-weight:650;
  color:var(--green)
}
.power-copy span {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:4px
}
.power-track {
  height:5px;
  background:#dfe2d5;
  flex:1;
  border-radius:3px;
  overflow:hidden
}
.power-track>div {
  width:0;
  height:100%;
  background:#899976;
  transition:width .2s
}
.power-row>span {
  font-size:11px;
  min-width:31px;
  text-align:right;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.power-row.ready .power-track>div {
  background:#bc6949
}
.power-row.ready .power-copy span {
  color:#9d4b30;
  font-weight:600
}
.controls {
  max-width:970px;
  margin:15px auto 0;
  display:grid;
  grid-template-columns:1fr 1.12fr 1fr;
  gap:12px
}
.controls button {
  height:52px;
  border-radius:10px;
  border:1px solid #cbd0be;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 12px;
  font-size:13px;
  font-weight:650;
  box-shadow:none
}
.move-button {
  background:var(--cream);
  color:var(--ink)
}
.controls button>span {
  font-size:20px;
  line-height:1;
  font-weight:400;
  color:var(--green)
}
.controls kbd {
  color:var(--muted);
  border-color:#d7d8cc;
  box-shadow:none;
  font-weight:400
}
.burst-button {
  background:#f7e6d8;
  color:#964128
}
.burst-button:disabled {
  background:#ebece3;
  border-color:#d7dacd;
  color:#7c8173
}
.burst-button:disabled>span {
  color:#949b86
}
.burst-button:not(:disabled) {
  background:#f7e6d8;
  border-color:#c88360
}
.burst-button:not(:disabled)>span {
  color:#b25738
}
.burst-button:not(:disabled) kbd {
  color:#985137;
  border-color:#d4aa8d
}
.controls button:focus-visible {
  outline:2px solid var(--green);
  outline-offset:3px
}
.controls button:not(:disabled):active {
  transform:translateY(1px)
}
@media(hover:hover) {
  .move-button:hover {
    background:#eef1e4;
    border-color:#a4b18e
  }
  .burst-button:not(:disabled):hover {
    background:#f2d9c6;
    border-color:#b46440
  }
}
.game-tip {
  text-align:center;
  font-size:10px;
  color:var(--muted);
  margin:19px auto 0;
  line-height:1.8
}
.game-tip span {
  margin-left:18px;
  font-size:9px
}
.game-overlay {
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:#edf0e3df;
  backdrop-filter:blur(5px);
  padding:24px;
  overflow:auto
}
.overlay-card {
  text-align:center;
  width:min(360px,100%);
  margin:auto
}
.overlay-card .overline {
  letter-spacing:4px;
  font-size:10px;
  color:var(--green)
}
.overlay-card h2 {
  font-size:34px;
  margin:15px 0;
  letter-spacing:-1px;
  text-wrap:balance
}
.overlay-card p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin:8px 0 20px
}
.overlay-card .primary {
  min-height:44px;
  width:100%;
  justify-content:center;
  gap:20px;
  margin-top:18px
}
.overlay-card .text-button {
  min-height:44px;
  margin-top:17px
}
.countdown-number {
  font-size:100px;
  line-height:1;
  font-weight:900;
  color:var(--orange);
  font-variant-numeric:tabular-nums
}
.countdown-card p {
  margin-top:20px
}
.callout {
  position:absolute;
  left:50%;
  top:-1px;
  transform:translateX(-50%);
  font-size:13px;
  font-weight:850;
  color:#ed5933;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  text-shadow:none
}
.callout.visible {
  animation:callout .9s ease both
}
.callout.skill {
  animation-duration:1.3s;
  font-size:13px;
  color:var(--green)
}
.announcing #round-label {
  visibility:hidden;
}
@keyframes callout {
  0% {
    opacity:0;
    transform:translate(-50%,10px) scale(.85)
  }
  15%,70% {
    opacity:1;
    transform:translate(-50%,0) scale(1)
  }
  100% {
    opacity:0;
    transform:translate(-50%,-15px)
  }
}
.combo {
  position:absolute;
  top:18px;
  right:25px;
  font-size:10px;
  color:var(--green);
  text-align:center
}
.combo b {
  display:block;
  font-size:31px;
  font-style:italic
}
dialog {
  border:1px solid #c3c7b7;
  border-radius:17px;
  padding:38px;
  width:min(530px,calc(100% - 32px));
  max-height:85dvh;
  color:var(--ink);
  background:var(--cream);
  box-shadow:0 25px 90px #28302133
}
dialog::backdrop {
  background:#242b2470;
  backdrop-filter:blur(4px)
}
.dialog-close {
  min-height:44px;
  min-width:44px;
  position:absolute;
  top:13px;
  right:15px;
  background:none;
  font-size:25px;
  line-height:1;
  padding:6px
}
.dialog-overline {
  font-size:10px;
  letter-spacing:3px;
  color:var(--orange)
}
dialog h2 {
  font-size:29px;
  letter-spacing:-1px;
  margin:17px 0 25px
}
dialog h3 {
  font-size:14px;
  margin:23px 0 7px
}
dialog p,dialog li {
  font-size:12px;
  line-height:1.95;
  color:#69705e
}
dialog ol {
  padding-left:20px
}
dialog li {
  padding-left:5px;
  margin:12px 0
}
dialog strong {
  color:var(--ink)
}
.source-links {
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:23px
}
.source-links a {
  font-size:10px;
  display:block;
  line-height:2;
  color:#536e42
}
.dialog-note {
  background:#e9ecdf;
  padding:12px 16px;
  border-radius:6px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@media(min-width:1450px) {
  .hero {
    padding-top:60px;
    padding-bottom:52px
  }
  .hero-stage {
    height:620px
  }
  .hero-copy {
    padding-right:10px
  }
}
@media(max-width:1100px) {
  .app-shell {
    --page-gutter:32px
  }
  .hero {
    gap:32px
  }
  .hero-stage {
    height:568px
  }
  .hero h1 {
    font-size:78px
  }
  .title-star {
    font-size:40px
  }
  .tagline {
    font-size:18px
  }
  .caption-detail {
    font-size:9px
  }
  .preview-caption {
    left:18px;
    right:18px;
    gap:6px
  }
  .how-strip>div {
    padding:0 16px;
    gap:10px
  }
  .strip-icon {
    display:none
  }
  .primary {
    padding:16px 19px;
    gap:18px
  }
  .practice {
    padding:0 13px
  }
}
@media(max-width:800px) {
  .app-shell {
    --page-gutter:24px
  }
  .topbar {
    height:83px
  }
  .edition {
    display:none
  }
  .hero {
    grid-template-columns:1fr 1fr;
    gap:24px;
    padding-top:35px
  }
  .hero h1 {
    font-size:61px;
    gap:16px
  }
  .title-star {
    font-size:32px
  }
  .title-en {
    font-size:8px;
    letter-spacing:3px
  }
  .tagline {
    font-size:16px
  }
  .hero-stage {
    height:540px;
    border-radius:20px
  }
  .stage-corner strong {
    font-size:17px
  }
  .stage-sticker {
    font-size:15px;
    left:23px
  }
  .stage-ticket {
    right:23px;
    font-size:9px
  }
  .caption-detail {
    display:none
  }
  .character small {
    font-size:8px
  }
  .character-name {
    font-size:10px
  }
  .character canvas {
    height:72px
  }
  .characters {
    gap:7px
  }
  .launch-row {
    gap:10px
  }
  .primary {
    font-size:13px;
    padding:15px 12px
  }
  .practice {
    font-size:10px;
    padding:0 10px
  }
  .launch-note {
    font-size:8px
  }
  .how-strip p {
    font-size:9px
  }
  .footer-code {
    display:none
  }
}
@media(max-width:620px) {
  .app-shell {
    --page-gutter:20px
  }
  .topbar {
    height:75px
  }
  .brand {
    gap:6px
  }
  .brand-name {
    font-size:28px;
    padding-right:17px
  }
  .brand-club {
    font-size:18px;
    margin-left:4px
  }
  .brand-spark {
    width:15px;
    height:15px;
    top:-2px
  }
  .brand small {
    font-size:7px;
    letter-spacing:2.4px
  }
  .top-actions {
    gap:12px
  }
  .help-button {
    font-size:11px
  }
  .help-button span {
    display:none
  }
  .hero {
    display:flex;
    flex-direction:column;
    gap:24px;
    padding:26px 0 29px;
    align-items:stretch
  }
  .hero-copy {
    display:contents
  }
  .hero-heading {
    order:0;
    margin:0
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.5px
  }
  .hero h1 {
    font-size:clamp(64px,18vw,96px);
    margin:16px 0 0;
    gap:20px
  }
  .title-star {
    font-size:36px;
    margin-top:6px
  }
  .title-en {
    font-size:8px;
    letter-spacing:3.5px;
    margin:8px 0 0 3px
  }
  .tagline {
    font-size:13px;
    line-height:1.7;
    letter-spacing:0;
    margin:16px 0 0
  }
  .hero-stage {
    order:1;
    height:300px;
    border-radius:18px
  }
  .stage-corner {
    top:17px;
    font-size:8px;
    line-height:1.6;
    letter-spacing:2px
  }
  .stage-corner strong {
    font-size:15px;
    letter-spacing:3px
  }
  .stage-sticker {
    top:20px;
    left:22px;
    font-size:13px
  }
  .stage-sticker svg {
    width:39px;
    margin-top:3px
  }
  .stage-ticket {
    top:20px;
    right:23px;
    font-size:7px;
    letter-spacing:1px;
    padding:5px;
    line-height:1.5
  }
  .preview-caption {
    bottom:13px;
    padding-top:11px;
    font-size:10px
  }
  .caption-detail {
    display:inline;
    font-size:8px
  }
  .selection-heading {
    order:3;
    margin:-3px 0 -13px
  }
  .characters {
    order:4;
    gap:10px
  }
  .character canvas {
    height:76px
  }
  .character-name {
    font-size:11px
  }
  .character small {
    font-size:8px
  }
  .character {
    padding-bottom:11px
  }
  .character.selected {
    padding-bottom:10px
  }
  .launch-row {
    order:5;
    margin-top:-6px;
    gap:12px
  }
  .primary {
    font-size:15px;
    padding:15px 19px
  }
  .practice {
    font-size:12px;
    padding:0 18px
  }
  .launch-note {
    order:6;
    margin-top:-13px;
    font-size:9px
  }
  .how-strip {
    padding:18px 0;
    gap:16px;
    grid-template-columns:1fr
  }
  .how-strip>div {
    padding:0;
    border:0;
    gap:14px;
    align-items:center
  }
  .how-strip strong {
    font-size:11px;
    display:block;
    min-width:71px
  }
  .how-strip>div>div {
    display:flex;
    gap:8px;
    align-items:center
  }
  .how-strip p {
    margin:0;
    font-size:10px
  }
  .how-strip strong {
    flex-shrink:0
  }
  .step-num {
    font-size:10px;
    align-self:auto;
    margin:0
  }
  .how-strip>div:last-child {
    padding:0
  }
  footer {
    font-size:8px;
    padding:20px 0;
    gap:8px
  }
  footer .text-button {
    font-size:9px
  }
  .game-heading {
    margin-top:15px;
    font-size:9px
  }
  .game-heading .text-button {
    font-size:10px
  }
  .hud {
    height:73px;
    padding:12px 16px
  }
  .hud-score {
    min-width:74px
  }
  .hud-score strong {
    font-size:23px;
    letter-spacing:1px
  }
  .hud small {
    font-size:8px
  }
  .hud-center>span {
    font-size:8px;
    letter-spacing:0
  }
  .hud-center>b {
    font-size:25px
  }
  .hud-lives {
    min-width:74px
  }
  .hud-lives>div {
    font-size:18px;
    letter-spacing:0
  }
  .arena-wrap {
    height:calc(100dvh - 385px);
    min-height:210px;
    max-height:540px
  }
  .power-row {
    height:59px;
    padding:10px 15px;
    gap:9px
  }
  .power-copy {
    min-width:90px
  }
  .power-copy b {
    font-size:10px
  }
  .power-copy span {
    font-size:8px
  }
  .controls {
    gap:9px;
    margin-top:13px
  }
  .controls button {
    font-size:12px;
    gap:7px;
    height:58px
  }
  .controls kbd {
    display:none
  }
  .controls button>span {
    font-size:20px
  }
  .game-tip {
    font-size:9px;
    margin-top:13px
  }
  .game-tip span {
    display:block;
    font-size:8px;
    margin:3px 0 0
  }
  .game-overlay {
    padding:18px
  }
  .overlay-card h2 {
    font-size:27px;
    margin:10px 0
  }
  .overlay-card p {
    font-size:10px
  }
  .overlay-card .primary {
    margin-top:12px;
    padding:13px
  }
  .overlay-card .text-button {
    margin-top:12px
  }
  .combo {
    right:14px;
    top:13px
  }
  .combo b {
    font-size:24px
  }
  .callout {
    font-size:10px;
    top:-1px
  }
  .callout.skill {
    font-size:11px
  }
  dialog {
    padding:30px 24px
  }
  dialog h2 {
    font-size:25px
  }
}
@media(max-width:360px) {
  .app-shell {
    --page-gutter:14px
  }
  .title-star {
    font-size:32px
  }
  .hero-stage {
    height:280px
  }
  .caption-detail {
    font-size:7px
  }
  .primary {
    font-size:13px
  }
  .practice {
    padding:0 12px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration:.01ms!important;
    transition:none!important
  }
  .callout.visible {
    animation:none;
    opacity:1
  }
}
/* The lobby is a page; the match owns the entire viewport. */
body[data-screen="game"] {
  overflow:hidden;
  background:#e8e2cc;
}
body[data-screen="game"] .app-shell {
  max-width:none;
  padding:0;
}
body[data-screen="game"] .topbar,
body[data-screen="game"] footer {
  display:none;
}
body[data-screen="game"] #game {
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--paper);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-top:env(safe-area-inset-top,0px);
}
body[data-screen="game"] .game-heading {
  --toolbar-gutter:28px;
  flex:0 0 48px;
  width:100%;
  max-width:none;
  margin:0;
  padding:0 max(var(--toolbar-gutter),env(safe-area-inset-right,0px)) 0 max(var(--toolbar-gutter),env(safe-area-inset-left,0px));
  color:#59664b;
  background:#f4efdf;
  border-bottom:1px solid #d8ddc9;
}
.game-tools {
  display:flex;
  align-items:center;
  gap:22px;
}
.game-tools .text-button,
.game-heading>#leave {
  min-height:44px;
  min-width:44px;
}
#game-help {
  font-size:15px;
  width:28px;
}
#fullscreen {
  font-size:23px;
  line-height:1;
}
body[data-screen="game"] .game-board {
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:none;
  min-height:0;
  margin:0;
  border:0;
  border-radius:0;
}
body[data-screen="game"] .hud {
  flex:0 0 76px;
  height:auto;
  padding:12px max(28px,calc((100vw - 1100px)/2),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  background:#f5efd9;
  border-bottom:1px solid #d8d9bf;
}
body[data-screen="game"] .arena-wrap {
  flex:1;
  height:auto;
  min-height:0;
  max-height:none;
}
body[data-screen="game"] .power-row {
  flex:0 0 52px;
  height:auto;
  padding:9px max(24px,calc((100vw - 680px)/2),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
}
body[data-screen="game"] .controls {
  flex:0 0 52px;
  width:min(680px,calc(100% - 48px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
  margin:3px auto 16px;
  gap:12px;
}
body[data-screen="game"] .controls button {
  height:52px;
  font-size:14px;
}
body[data-screen="game"] .game-tip {
  display:none;
}
body[data-screen="game"] .combo {
  right:max(24px,calc((100vw - 1100px)/2));
  top:16px;
  padding:8px 12px;
  border:1px solid #b9c6a2;
  border-radius:10px;
  background:#f9f5dfd9;
}
body[data-screen="game"] .game-overlay {
  position:fixed;
  z-index:20;
  background:#edf0e3c9;
  padding:max(24px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));
}
body[data-screen="game"] .overlay-card {
  background:#fff9eaf2;
  border:1px solid #c9d0b7;
  border-radius:18px;
  padding:28px;
  width:min(420px,100%);
  box-shadow:0 14px 50px #48533918;
}
body[data-screen="game"] .countdown-card {
  background:transparent;
  border:0;
  box-shadow:none;
}
body[data-screen="game"] .overlay-card button {
  min-height:44px;
}
@media(max-width:620px) {
  body[data-screen="game"] .game-heading {
    flex-basis:44px;
    --toolbar-gutter:16px;
  }
  body[data-screen="game"] .game-heading .text-button {
    font-size:10px;
    min-height:44px;
  }
  .game-tools {
    gap:12px;
  }
  #mode-label {
    display:none;
  }
  #fullscreen {
    display:none;
  }
  body[data-screen="game"] .hud {
    flex-basis:65px;
    padding:9px 18px;
  }
  body[data-screen="game"] .power-row {
    flex-basis:47px;
    padding:7px max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  }
  body[data-screen="game"] .controls {
    flex-basis:52px;
    width:calc(100% - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
    gap:9px;
    margin:3px auto 12px;
  }
  body[data-screen="game"] .controls button {
    height:52px;
    font-size:12px;
    gap:8px;
    padding:0 8px;
  }
  body[data-screen="game"] .combo {
    right:13px;
    top:11px;
    padding:5px 8px;
    font-size:8px;
  }
  body[data-screen="game"] .combo b {
    font-size:22px;
  }
  body[data-screen="game"] .overlay-card {
    padding:22px 17px;
  }
  body[data-screen="game"] .overlay-card h2 {
    font-size:24px;
    line-height:1.35;
  }
}
@media(max-height:650px) and (max-width:620px) {
  body[data-screen="game"] .overlay-card {
    padding:16px 14px;
  }
  .overlay-card .overline {
    font-size:8px;
    letter-spacing:2px;
  }
  body[data-screen="game"] .overlay-card h2 {
    font-size:22px;
    margin:8px 0;
  }
  .overlay-card p {
    line-height:1.6;
    margin:6px 0 10px;
  }
  .overlay-card .primary,
  .overlay-card .text-button {
    margin-top:8px;
  }
}
@media(max-height:500px) and (min-width:621px) {
  body[data-screen="game"] .game-heading {
    flex-basis:44px;
  }
  body[data-screen="game"] .game-heading .text-button {
    min-height:44px;
  }
  body[data-screen="game"] .hud {
    flex-basis:44px;
    padding:3px max(28px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  }
  body[data-screen="game"] .hud-score,
  body[data-screen="game"] .hud-lives {
    display:flex;
    align-items:center;
    gap:9px;
  }
  body[data-screen="game"] .hud-lives>div {
    margin-top:0;
  }
  body[data-screen="game"] .hud-center>span {
    font-size:8px;
  }
  body[data-screen="game"] .hud-score strong {
    font-size:23px;
  }
  body[data-screen="game"] .hud-center>b {
    font-size:22px;
  }
  body[data-screen="game"] .power-row {
    flex-basis:28px;
    padding-top:3px;
    padding-bottom:3px;
  }
  body[data-screen="game"] .power-copy span {
    display:none;
  }
  body[data-screen="game"] .controls {
    flex-basis:44px;
    margin:5px auto 8px;
  }
  body[data-screen="game"] .controls button {
    height:44px;
  }
}

/* A compact match report; the game remains visible behind the paper card. */
body[data-screen="game"] .result-card {
  width:min(420px,100%);
  padding:24px;
  text-align:left;
  background:#fffaf0;
  border-radius:16px;
}
.result-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
}
.result-status {
  flex-shrink:0;
  padding:4px 8px;
  border-radius:4px;
  background:#edf0e3;
  color:var(--green);
  letter-spacing:0;
}
.result-status.is-record {
  color:#b43b22;
  background:#fbe3d6;
  font-weight:800;
}
.result-heading {
  display:flex;
  align-items:center;
  gap:14px;
  margin:18px 0 12px;
}
body[data-screen="game"] .result-heading h2 {
  flex:1;
  font-size:25px;
  line-height:1.4;
  letter-spacing:-.5px;
  margin:0;
  text-wrap:balance;
}
.result-portrait {
  width:58px;
  height:58px;
  flex-shrink:0;
  background:#e8ecd9;
  border-radius:50%;
}
.result-summary {
  display:flex;
  align-items:center;
  gap:20px;
  padding:8px 0 18px;
}
.result-score {
  font-size:64px;
  font-weight:850;
  letter-spacing:-3px;
  line-height:1;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.result-score small {
  font-size:13px;
  letter-spacing:0;
  margin-left:6px;
  font-weight:500;
}
.result-standing {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding-left:18px;
  border-left:1px solid var(--line);
}
.result-rank {
  font-size:16px;
  font-weight:800;
  color:#b44127;
}
.result-record {
  font-size:10px;
  line-height:1.5;
  color:var(--muted);
}
.result-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:14px 0;
  border-block:1px solid var(--line);
  text-align:center;
}
.result-stats>div+div {
  border-left:1px solid var(--line);
}
.result-stats b {
  display:block;
  font-size:23px;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.result-stats span {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
}
.result-duration {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:12px 0;
  font-size:11px;
  color:var(--muted);
}
.result-duration b {
  color:var(--ink);
  font-weight:600;
}
.result-tip {
  padding:12px 14px;
  border-radius:7px;
  background:#eef0e3;
}
.result-tip strong {
  font-size:11px;
  color:var(--green);
}
.result-card .result-tip p {
  margin:4px 0 0;
  font-size:12px;
  line-height:1.6;
  color:#545d48;
}
.result-actions {
  margin-top:18px;
  text-align:center;
}
.result-card .result-actions .primary {
  min-height:50px;
  padding:12px 18px;
  margin:0;
  font-size:15px;
  justify-content:space-between;
  box-shadow:0 2px 0 #9e361e;
}
.result-card .result-actions .primary:focus-visible {
  outline:2px solid #fffaf0;
  outline-offset:-5px;
  box-shadow:0 0 0 2px #287b8b;
}
.result-card .result-actions .text-button {
  width:100%;
  margin:7px 0 -5px;
  padding:10px;
  font-size:12px;
  color:var(--muted);
}
@media(max-width:620px) {
  body[data-screen="game"] .game-overlay:has(.result-card) {
    padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  }
  body[data-screen="game"] .result-card {
    padding:20px;
  }
  body[data-screen="game"] .result-heading h2 {
    font-size:23px;
  }
}
@media(max-width:620px) and (max-height:650px) {
  body[data-screen="game"] .result-card {
    padding:16px;
  }
  .result-heading {
    margin:12px 0 8px;
    gap:10px;
  }
  body[data-screen="game"] .result-heading h2 {
    font-size:21px;
  }
  .result-portrait {
    width:48px;
    height:48px;
  }
  .result-summary {
    gap:14px;
    padding:6px 0 14px;
  }
  .result-score {
    font-size:54px;
  }
  .result-standing {
    padding-left:14px;
  }
  .result-rank {
    font-size:14px;
  }
  .result-stats {
    padding:11px 0;
  }
  .result-tip {
    padding:9px 11px;
  }
  .result-actions {
    margin-top:14px;
  }
}
@media(max-height:500px) and (min-width:621px) {
  body[data-screen="game"] .result-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"top top" "heading tip" "summary tip" "stats actions" "duration actions";
    gap:10px 24px;
    width:min(700px,100%);
    padding:18px 24px;
  }
  .result-topline { grid-area:top; }
  .result-heading { grid-area:heading; margin:0; gap:8px; }
  body[data-screen="game"] .result-heading h2 { font-size:20px; }
  .result-portrait { width:44px; height:44px; }
  .result-summary { grid-area:summary; padding:0; gap:14px; }
  .result-score { font-size:48px; }
  .result-standing { padding-left:12px; }
  .result-rank { font-size:14px; }
  .result-stats { grid-area:stats; padding:9px 0; }
  .result-stats b { font-size:20px; }
  .result-duration { grid-area:duration; margin:0; font-size:10px; }
  .result-tip { grid-area:tip; align-self:center; }
  .result-actions { grid-area:actions; align-self:center; margin:0; }
}

/* One character selects a complete cast, pressure set and stage. */
.theme-characters {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.theme-characters .character {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  min-height:100px;
  padding:5px 15px;
  text-align:left;
  background:#faf7ee;
}
.theme-characters .character.selected {
  border:1px solid var(--theme-accent,var(--orange));
  box-shadow:inset 0 0 0 1px var(--theme-accent,var(--orange));
  background:#f0efdf;
  padding:5px 15px;
}
.theme-characters .character:active {
  transform:none;
}
@media(hover:hover) and (pointer:fine) {
  .theme-characters .character:not(.selected):hover {
    background:#f0efdf;
    border-color:#9da98d;
  }
}
.theme-characters .character canvas {
  flex:0 0 76px;
  width:76px;
  height:88px;
}
.theme-characters .character-copy {
  flex:0 1 auto;
  min-width:0;
  max-width:148px;
}
.theme-characters .character-name {
  font-size:15px;
  line-height:1.4;
  white-space:nowrap;
}
.theme-characters .character small {
  font-size:10px;
  line-height:1.5;
  margin-top:4px;
  text-wrap:balance;
}
.theme-characters .selected-mark {
  background:var(--theme-accent,var(--orange));
  width:13px;
  height:13px;
  font-size:8px;
  right:4px;
  top:4px;
}
.theme-brief {
  border-left:2px solid var(--theme-accent,var(--orange));
  padding:0 0 0 12px;
  margin-top:16px;
}
.theme-brief>div {
  display:flex;
  align-items:center;
  gap:9px;
}
.theme-brief>div>span {
  font-size:9px;
  color:var(--muted);
}
.theme-brief b {
  font-size:12px;
  font-weight:700;
}
.theme-brief p {
  margin:5px 0 0;
  font-size:11px;
  line-height:1.5;
}
.theme-brief #scene-description {
  font-size:10px;
  color:var(--muted);
}
.attack-readout {
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 24px);
  min-height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:5px 12px;
  z-index:2;
  background:#fff9eae8;
  border:1px solid #c7cfb7;
  border-radius:5px;
  pointer-events:none;
  white-space:nowrap;
}
.attack-readout span {
  color:var(--green);
  font-size:10px;
  padding-right:10px;
  border-right:1px solid #d7d8cc;
}
.attack-readout b {
  font-size:12px;
  font-weight:650;
  color:#626c54;
}
.attack-readout.attacking {
  background:#fff4e4;
  border-color:#ce9575;
}
.attack-readout.attacking b {
  color:#a1492b;
}
@media(max-width:1100px) {
  .theme-characters .character,
  .theme-characters .character.selected {
    gap:7px;
    padding:5px 9px;
    min-height:76px;
  }
  .theme-characters .character canvas {
    flex-basis:48px;
    width:48px;
    height:64px;
  }
  .theme-characters .character-name { font-size:12px; }
  .theme-characters .character small { font-size:9px; }
}
@media(max-width:620px) {
  .theme-brief {
    order:4;
    margin-top:-8px;
  }
  .attack-readout { gap:7px; padding:5px 8px; }
  .attack-readout span { font-size:9px; padding-right:7px; }
  .attack-readout b { font-size:11px; }
}

/* Input hints describe the available input device rather than screen width. */
.touch-copy { display:none; }
html[data-input="touch"] .touch-copy { display:inline; }
html[data-input="touch"] .keyboard-copy,
html[data-input="touch"] .controls kbd { display:none; }
#start-label { font:inherit; line-height:1.3; white-space:nowrap; }
html[data-input="touch"] body[data-screen="game"] .game-tip {
  display:block;
  flex:0 0 18px;
  margin:0;
  font-size:10px;
  line-height:16px;
}
html[data-input="touch"] .game-tip span { margin:0; font-size:10px; }
html[data-input="touch"] body[data-screen="game"] .controls { margin-bottom:4px; }

/* The avatar belongs to the report metadata, leaving the title its full width. */
.result-topline>span:first-child { flex:1; min-width:0; }
.result-topline .result-portrait { width:34px; height:34px; }
.result-title-part { display:inline-block; white-space:nowrap; }
.result-actions.practice-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.result-actions.practice-actions .primary { font-size:14px; gap:6px; padding:12px; }
.result-actions.practice-actions .secondary {
  min-height:50px;
  background:#f7f5e9;
  border:1px solid #bbc5ad;
  border-radius:7px;
  font-size:14px;
  font-weight:650;
}
.result-actions.practice-actions .text-button { grid-column:1 / -1; margin:0 0 -5px; }
@media(max-width:620px) {
  .result-topline { letter-spacing:0; }
  .result-topline .result-portrait { width:30px; height:30px; }
}

/* Keep the same launch controls reachable while choosing a role on a phone. */
@media(max-width:620px), (any-pointer:coarse) and (max-height:500px) {
  body:not([data-screen="game"]) .app-shell {
    padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));
  }
  .launch-row {
    position:fixed;
    z-index:10;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) 102px;
    gap:10px;
    margin:0;
    padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));
    background:#f3f0e7f5;
    border-top:1px solid #d1d5c6;
    box-shadow:0 -5px 20px #4853390b;
  }
  .launch-row .primary {
    min-height:50px;
    min-width:0;
    padding:12px 16px;
    font-size:14px;
    gap:12px;
    box-shadow:none;
  }
  .launch-row .practice { min-height:50px; padding:0 10px; }
  .characters { scroll-margin-block:30px 90px; }
  .launch-note { margin-top:0; }
}

/* Scroll the explanation while keeping its close control in the dialog header. */
#info-dialog { padding:0; overflow:hidden; }
#info-dialog[open] { display:flex; flex-direction:column; }
.dialog-toolbar {
  display:flex;
  flex:0 0 54px;
  align-items:center;
  justify-content:space-between;
  padding:5px 12px 5px 28px;
  border-bottom:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
}
.dialog-toolbar .dialog-close { position:static; }
#dialog-content { min-height:0; overflow:auto; overscroll-behavior:contain; padding:24px 32px 28px; }
#dialog-content:focus-visible { outline:2px solid var(--green); outline-offset:-3px; }
@media(max-width:620px) {
  .dialog-toolbar { padding-left:24px; }
  #dialog-content { padding:20px 24px 24px; }
}