:root {
  --paper:#f7f5ef;
  --ink:#193c35;
  --muted:#7b847a;
  --teal:#176c5b;
  --lime:#dafa98;
  --coral:#e26d4f;
  --line:#dfe3d8;
  --sans:Arial,Helvetica,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit;
  cursor:pointer
}
button:focus-visible,a:focus-visible {
  outline:3px solid #ef925a;
  outline-offset:4px
}
button:disabled {
  cursor:default
}
button {
  touch-action:manipulation
}
[hidden] {
  display:none!important
}
.app-shell {
  max-width:1456px;
  margin:auto;
  padding:0 64px
}
.site-header {
  height:110px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
  font-size:24px;
  font-weight:900;
  letter-spacing:-1px
}
.brand-light {
  font-weight:400;
  margin-left:4px
}
.brand small {
  display:block;
  font-size:8px;
  letter-spacing:3.1px;
  margin-top:4px
}
.brand-icon {
  position:relative;
  background:var(--ink);
  color:var(--lime);
  height:44px;
  width:44px;
  border-radius:13px;
  font-size:35px;
  line-height:32px;
  padding-left:4px
}
.brand-icon i {
  position:absolute;
  font-size:24px;
  left:16px;
  top:15px;
  font-style:normal
}
.header-right {
  display:flex;
  gap:12px;
  align-items:center
}
.prototype-badge {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  font-weight:700;
  letter-spacing:1.2px;
  margin-right:16px
}
.prototype-badge>span,.card-kicker i {
  height:6px;
  width:6px;
  background:var(--teal);
  border-radius:50%;
  display:inline-block
}
.prototype-badge b {
  background:#e8ecdf;
  border-radius:4px;
  padding:5px 6px;
  margin-left:4px
}
.icon-button {
  width:35px;
  height:35px;
  background:transparent;
  border:1px solid #d8dfd1;
  border-radius:50%;
  color:var(--ink);
  font-weight:700;
  font-size:17px;
  display:grid;
  place-items:center;
  transition:background .2s
}
.icon-button:hover {
  background:#e4eadc
}
.icon-button svg {
  width:18px;
  height:18px
}
.intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:38px 0 30px
}
.eyebrow {
  font-size:9px;
  letter-spacing:2.4px;
  font-weight:700;
  color:#858d7d
}
h1 {
  margin:10px 0 10px;
  font-size:clamp(36px,4.2vw,62px);
  letter-spacing:-3px;
  font-weight:800;
  line-height:1.06
}
h1 em,h2 em {
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--teal)
}
.intro p {
  font-size:13px;
  color:#7a8379;
  margin:0;
  line-height:1.6
}
.intro p strong {
  color:#4e6657
}
.intro-note {
  display:flex;
  align-items:center;
  gap:20px;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:17px;
  color:#8c9686;
  line-height:1.6
}
.note-line {
  height:1px;
  width:42px;
  background:#cbd5bc
}
.game-card {
  background:#fff;
  border:1px solid #dce1d4;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 14px 40px #233f3110
}
.scoreboard {
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  background:#fffefa
}
.team {
  display:flex;
  gap:12px;
  align-items:center;
  min-width:190px
}
.team small {
  display:block;
  font-size:8px;
  letter-spacing:1.4px;
  color:#899084;
  font-weight:700;
  margin-bottom:5px
}
.team strong {
  font-size:13px
}
.team-icon {
  height:35px;
  width:35px;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size:23px;
  font-weight:700
}
.teal {
  background:#e3eee7;
  color:#26735b
}
.coral {
  background:#fbe9df;
  color:#d66c4d
}
.opponent {
  text-align:right;
  justify-content:flex-end
}
.score-center {
  display:flex;
  gap:22px;
  align-items:center
}
.score-stat {
  display:flex;
  gap:7px;
  align-items:baseline
}
.score-stat strong {
  font-size:27px;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums
}
.score-stat span,.clock-stat>span:last-child {
  font-size:8px;
  color:#8e9688;
  font-weight:700;
  letter-spacing:1px
}
.score-divider {
  height:28px;
  width:1px;
  background:var(--line)
}
.clock-stat {
  display:grid;
  grid-template-columns:18px auto;
  gap:2px 5px;
  align-items:center
}
.clock-stat strong {
  font-size:23px;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums
}
.clock-stat>span:last-child {
  grid-column:2
}
.clock-icon {
  font-size:22px;
  color:#899981
}
.arena-wrap {
  position:relative;
  isolation:isolate;
  background:#174c43;
  aspect-ratio:1280/720;
  overflow:hidden
}
#court {
  display:block;
  width:100%;
  height:100%;
  touch-action:none
}
.arena-topline {
  position:absolute;
  top:18px;
  left:23px;
  right:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none
}
.court-label {
  color:#d2e2cd;
  font-size:8px;
  letter-spacing:1.5px;
  font-weight:700;
  display:flex;
  gap:7px;
  align-items:center
}
.court-label i {
  width:5px;
  height:5px;
  background:#dafa98;
  border-radius:50%
}
.court-label span {
  opacity:.45;
  margin:0 4px
}
.arena-actions {
  display:flex;
  gap:6px;
  pointer-events:auto
}
.arena-button {
  color:#e6eddc;
  background:#143a3266;
  border:1px solid #cbe0c622;
  border-radius:8px;
  font-size:19px;
  width:31px;
  height:31px;
  backdrop-filter:blur(8px)
}
.arena-button:disabled {
  opacity:.35
}
.arena-button:hover:not(:disabled) {
  background:#113a32
}
.court-bottom {
  position:absolute;
  bottom:15px;
  left:23px;
  right:23px;
  display:flex;
  justify-content:space-between;
  color:#b3cfb9;
  font-size:7px;
  letter-spacing:1.4px;
  pointer-events:none
}
.court-bottom>span:first-child {
  display:flex;
  gap:7px;
  align-items:center
}
.dot {
  width:6px;
  height:6px;
  border-radius:50%;
  display:inline-block
}
.teal-dot {
  background:#8de1c9
}
.coral-dot {
  background:#ffab83;
  margin-left:12px
}
.overlay {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:#173b352d;
  backdrop-filter:blur(2px);
  z-index:5;
  transition:opacity .3s
}
.start-card,.pause-card,.result-card {
  background:#fffdf3f5;
  border:1px solid #ffffffcc;
  padding:30px 36px 22px;
  width:360px;
  border-radius:18px;
  text-align:center;
  box-shadow:0 20px 50px #102f3933;
  animation:card-in .45s cubic-bezier(.2,.7,.2,1)
}
.card-kicker {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:8px;
  font-weight:700;
  letter-spacing:1.7px;
  color:#849071
}
h2 {
  font-size:50px;
  letter-spacing:-2px;
  margin:15px 0;
  line-height:.99
}
.start-card h2 em {
  font-size:57px
}
.start-card p,.pause-card p,.result-card p {
  font-size:12px;
  color:#7a8475;
  line-height:1.7;
  margin:12px 0
}
.start-facts {
  display:flex;
  justify-content:center;
  gap:17px;
  margin:20px 0;
  color:#98a08a;
  font-size:9px
}
.start-facts b {
  font-size:14px;
  color:#46634d;
  margin-right:3px
}
.primary-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:17px 20px;
  border:0;
  border-radius:9px;
  background:var(--ink);
  color:#eff6d8;
  font-size:11px;
  letter-spacing:1.5px;
  font-weight:700;
  box-shadow:0 3px 0 #0b2925;
  transition:transform .15s,background .15s
}
.primary-button:hover {
  background:#25604d;
  transform:translateY(-2px)
}
.primary-button span {
  font-size:21px;
  line-height:15px;
  color:var(--lime)
}
.start-footnote {
  display:block;
  font-size:8px;
  color:#959d8b;
  margin-top:17px
}
.start-footnote span {
  margin:0 5px
}
.control-bar {
  display:flex;
  align-items:center;
  gap:30px;
  min-height:77px;
  padding:14px 26px;
  background:#fffefa
}
.movement-guide {
  display:flex;
  align-items:center;
  gap:9px;
  color:#8c9388;
  font-size:10px
}
.keycap {
  background:#f6f7ef;
  border:1px solid #dfe4d6;
  box-shadow:0 2px 0 #e3e7da;
  border-radius:5px;
  padding:8px;
  font-size:9px;
  font-weight:700;
  color:#4c6651;
  white-space:nowrap;
  letter-spacing:1px
}
.stamina-control {
  width:130px;
  margin-left:auto
}
.stamina-heading {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:7px;
  letter-spacing:1.1px;
  font-weight:700;
  margin-bottom:7px
}
.keyboard-hint {
  color:#9aa08c;
  font-size:6px
}
.stamina-track {
  height:5px;
  background:#e6eadc;
  border-radius:5px;
  overflow:hidden
}
.stamina-track>span {
  display:block;
  height:100%;
  width:100%;
  background:#82a963;
  border-radius:5px;
  transition:width .1s linear
}
.kho-button {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  min-width:255px;
  background:#e9edde;
  border:1px solid #e0e5d3;
  border-radius:9px;
  padding:10px 13px;
  text-align:left;
  color:#7c896e;
  transition:background .2s,box-shadow .2s,transform .15s
}
.kho-button>span {
  font-weight:900;
  font-size:18px;
  letter-spacing:-.5px
}
.kho-button small {
  display:block;
  font-size:6px;
  font-weight:700;
  letter-spacing:1px;
  margin-top:2px
}
.kho-button kbd {
  font-family:var(--sans);
  font-size:8px;
  border:1px solid #b3c399;
  border-radius:4px;
  padding:5px;
  color:#637a4a
}
.kho-button:not(:disabled) {
  background:var(--lime);
  color:#294524;
  box-shadow:0 3px 0 #a5c87a
}
.kho-button:not(:disabled):active {
  transform:translateY(2px);
  box-shadow:none
}
.tips {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  padding:28px 0 30px
}
.tips article {
  display:flex;
  align-items:flex-start;
  gap:12px
}
.tip-number {
  font-size:10px;
  font-weight:700;
  padding-top:2px;
  color:#98a383
}
.tips h3 {
  font-size:12px;
  margin:0 0 6px;
  letter-spacing:-.1px
}
.tips p {
  margin:0;
  font-size:10px;
  color:#8a9283;
  line-height:1.7;
  max-width:290px
}
footer {
  border-top:1px solid var(--line);
  padding:20px 0 28px;
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:1px;
  color:#9aa08f
}
footer i {
  margin:0 8px;
  font-style:normal
}
footer>span:last-child {
  letter-spacing:0
}
footer b {
  color:var(--teal);
  margin-left:10px;
  font-size:15px
}
.live-instruction {
  position:absolute;
  top:66px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:#edf6e1;
  background:#133b33bd;
  border:1px solid #adcdb12b;
  padding:8px 15px;
  border-radius:20px;
  white-space:nowrap;
  pointer-events:none
}
.toast {
  position:absolute;
  left:50%;
  top:18%;
  transform:translate(-50%,8px);
  background:#fff8e8;
  color:#295342;
  font-weight:700;
  padding:10px 19px;
  border-radius:25px;
  font-size:12px;
  opacity:0;
  transition:opacity .18s,transform .18s;
  pointer-events:none;
  box-shadow:0 6px 24px #18352822;
  white-space:nowrap;
  z-index:7
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.text-button {
  border:0;
  background:none;
  color:#809075;
  font-size:11px;
  margin-top:17px;
  text-decoration:underline;
  text-underline-offset:4px
}
.result-card h2 {
  font-size:33px;
  margin:18px 0
}
.result-score strong {
  display:block;
  font-size:72px;
  line-height:1.1;
  letter-spacing:-4px;
  color:var(--teal)
}
.result-score>span {
  font-size:8px;
  letter-spacing:2px;
  color:#89977a
}
.result-details {
  display:flex;
  justify-content:center;
  gap:22px;
  font-size:10px;
  color:#829173;
  margin:22px 0
}
.result-details b {
  color:var(--ink)
}
.result-card p {
  font-size:10px
}
.touch-controls {
  position:absolute;
  inset:0;
  pointer-events:none;
  display:none
}
.joystick {
  position:absolute;
  width:100px;
  height:100px;
  bottom:36px;
  left:30px;
  border:1px solid #d9eaca55;
  border-radius:50%;
  background:#13392e33;
  pointer-events:auto;
  touch-action:none;
  display:grid;
  place-items:center
}
.joystick-arrows {
  color:#d2e4bb55;
  font-size:80px;
  font-weight:100
}
.joystick-knob {
  position:absolute;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#d2e6bf99;
  border:2px solid #e8f5d5aa;
  box-shadow:0 3px 12px #12382922;
  pointer-events:none
}
.touch-actions {
  position:absolute;
  bottom:38px;
  right:26px;
  display:flex;
  gap:14px;
  align-items:end
}
.touch-actions button {
  pointer-events:auto;
  touch-action:none;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.touch-actions small {
  font-size:7px;
  letter-spacing:1px;
  margin-top:2px
}
.sprint-touch {
  width:61px;
  height:61px;
  background:#123f36bb;
  color:#dcecc7;
  border:1px solid #dcecc755;
  font-size:25px
}
.sprint-touch.active {
  background:#547643
}
.kho-touch {
  height:88px;
  width:88px;
  border:2px solid #d5edaa88;
  background:#abc783aa;
  font-weight:900;
  color:#244733;
  font-size:23px
}
.kho-touch:disabled {
  opacity:.4
}
.kho-touch:not(:disabled) {
  background:#def79bdc;
  box-shadow:0 0 22px #d8ff8144
}
.touch-controls.enabled {
  display:block
}
dialog {
  border:1px solid #d8e1cb;
  border-radius:20px;
  padding:35px;
  color:var(--ink);
  background:#fffdf5;
  width:min(500px,calc(100% - 30px));
  box-shadow:0 20px 80px #173b3433
}
dialog::backdrop {
  background:#112f2daa;
  backdrop-filter:blur(5px)
}
dialog h2 {
  font-size:36px
}
dialog p,dialog li {
  font-size:13px;
  line-height:1.7;
  color:#728168
}
dialog ol {
  padding-left:20px
}
dialog li {
  margin:10px 0
}
.dialog-close {
  position:absolute;
  right:13px;
  top:13px
}
.rules-note {
  background:#edf0e2;
  border-radius:8px;
  padding:12px;
  font-size:11px!important
}
dialog .card-kicker {
  justify-content:flex-start
}
.urgent {
  color:#d56545!important
}
.game-card:fullscreen {
  background:#174c43;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:0;
  border-radius:0
}
.game-card:fullscreen .arena-wrap {
  max-height:calc(100dvh - 115px);
  width:100%;
  aspect-ratio:auto;
  flex:1
}
.game-card:fullscreen #court {
  object-fit:contain
}
.game-card:fullscreen .scoreboard {
  height:60px;
  flex-shrink:0
}
.game-card:fullscreen .control-bar {
  min-height:55px
}
.game-card:fullscreen .arena-wrap {
  max-width:calc((100dvh - 115px)*1280/720);
  align-self:center
}
.game-card:fullscreen .overlay {
  backdrop-filter:blur(2px)
}
@keyframes card-in {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}
@media(min-width:1600px) {
  .app-shell {
    max-width:1480px
  }
}
@media(max-width:1000px) {
  .app-shell {
    padding:0 28px
  }
  .site-header {
    height:85px
  }
  .intro {
    padding:26px 0
  }
  .intro-note {
    font-size:14px
  }
  .control-bar {
    gap:18px;
    padding:13px 19px
  }
  .movement-guide {
    font-size:8px
  }
  .kho-button {
    min-width:215px
  }
  .start-card,.pause-card,.result-card {
    transform:scale(.87);
    padding:25px 30px
  }
  .tips {
    gap:20px
  }
  .scoreboard {
    height:68px;
    padding:0 20px
  }
  .team {
    min-width:150px
  }
  .team strong {
    font-size:11px
  }
  .team small {
    font-size:7px
  }
  .start-card h2 {
    font-size:44px
  }
  .start-card h2 em {
    font-size:50px
  }
}
@media(max-width:650px) {
  .app-shell {
    padding:0 14px
  }
  .site-header {
    height:74px
  }
  .brand {
    font-size:19px
  }
  .brand-icon {
    width:38px;
    height:38px;
    font-size:30px
  }
  .brand small {
    font-size:6px
  }
  .prototype-badge {
    display:none
  }
  .intro-note {
    display:none
  }
  .intro {
    padding:24px 2px
  }
  .eyebrow {
    font-size:7px;
    letter-spacing:1.6px
  }
  h1 {
    font-size:41px;
    letter-spacing:-2px
  }
  .intro p {
    font-size:11px
  }
  .game-card {
    border-radius:13px
  }
  .scoreboard {
    padding:0 12px;
    height:62px
  }
  .team {
    min-width:0;
    gap:7px
  }
  .team-icon {
    width:25px;
    height:25px;
    font-size:17px;
    border-radius:7px
  }
  .team strong {
    font-size:9px
  }
  .team small {
    font-size:5px;
    letter-spacing:.7px
  }
  .score-center {
    gap:8px
  }
  .score-stat strong {
    font-size:22px
  }
  .score-stat span {
    font-size:6px
  }
  .clock-stat strong {
    font-size:18px
  }
  .clock-stat>span:last-child {
    font-size:5px;
    letter-spacing:0
  }
  .clock-icon {
    font-size:16px
  }
  .clock-stat {
    grid-template-columns:12px auto
  }
  .score-divider {
    height:23px
  }
  .arena-wrap {
    aspect-ratio:1/1;
    min-height:340px
  }
  #court {
    object-fit:contain
  }
  .arena-topline {
    top:11px;
    left:12px;
    right:12px
  }
  .court-label {
    font-size:6px;
    letter-spacing:1px
  }
  .arena-button {
    width:28px;
    height:28px
  }
  .court-bottom {
    font-size:5px;
    left:12px;
    right:12px;
    bottom:10px;
    letter-spacing:.7px
  }
  .start-card,.pause-card,.result-card {
    transform:scale(.81)
  }
  .control-bar {
    padding:10px;
    gap:12px;
    min-height:65px
  }
  .movement-guide {
    display:none
  }
  .stamina-control {
    margin:0;
    width:90px
  }
  .kho-button {
    min-width:0;
    flex:1;
    padding:8px 10px
  }
  .kho-button>span {
    font-size:16px
  }
  .kho-button small {
    font-size:5px;
    letter-spacing:.5px
  }
  .kho-button kbd {
    font-size:6px;
    padding:4px
  }
  .tips {
    grid-template-columns:1fr;
    padding:22px 4px;
    gap:16px
  }
  .tips p {
    max-width:none;
    font-size:11px
  }
  .tips h3 {
    font-size:13px
  }
  .tips article {
    gap:13px
  }
  .tip-number {
    padding:4px 0
  }
  .live-instruction {
    top:48px;
    font-size:8px;
    max-width:95%;
    white-space:normal;
    text-align:center;
    width:max-content
  }
  .toast {
    font-size:10px;
    top:24%;
    max-width:95%;
    white-space:normal;
    text-align:center
  }
  footer {
    font-size:6px;
    letter-spacing:.5px
  }
  .joystick {
    left:18px;
    bottom:28px;
    width:81px;
    height:81px
  }
  .joystick-knob {
    height:34px;
    width:34px
  }
  .joystick-arrows {
    font-size:63px
  }
  .touch-actions {
    right:18px;
    bottom:30px;
    gap:12px
  }
  .sprint-touch {
    width:49px;
    height:49px;
    font-size:22px
  }
  .kho-touch {
    width:69px;
    height:69px;
    font-size:19px
  }
  .keyboard-hint {
    display:none
  }
}
@media(pointer:coarse) {
  .movement-guide {
    font-size:0
  }
  .movement-guide .keycap {
    font-size:0
  }
  .movement-guide .keycap:after {
    content:'DRAG JOYSTICK TO MOVE';
    font-size:8px
  }
  .keyboard-hint {
    font-size:0
  }
  .keyboard-hint:after {
    content:'HOLD ↟';
    font-size:7px
  }
  .kho-button kbd {
    display:none
  }
}
@media(max-height:560px) and (orientation:landscape) {
  .app-shell {
    padding:0 12px
  }
  .site-header,.intro,.tips,footer {
    display:none
  }
  .game-card {
    height:100dvh;
    border:0;
    border-radius:0;
    display:flex;
    flex-direction:column
  }
  .scoreboard {
    height:45px;
    flex-shrink:0;
    padding:0 22px
  }
  .arena-wrap {
    flex:1;
    min-height:0;
    aspect-ratio:auto;
    width:100%
  }
  #court {
    object-fit:contain
  }
  .control-bar {
    min-height:47px;
    padding:5px 18px
  }
  .game-card .start-card,.game-card .pause-card,.game-card .result-card {
    transform:scale(.68)
  }
  .arena-topline {
    top:9px
  }
  .court-bottom {
    bottom:8px
  }
  .live-instruction {
    top:38px;
    font-size:8px
  }
  .joystick {
    width:82px;
    height:82px;
    bottom:30px
  }
  .touch-actions {
    bottom:30px
  }
  .kho-touch {
    width:74px;
    height:74px;
    font-size:20px
  }
  .sprint-touch {
    width:54px;
    height:54px
  }
  .kho-button {
    padding:5px 10px
  }
  .kho-button small {
    font-size:5px
  }
  .game-card:fullscreen .arena-wrap {
    max-height:none;
    max-width:none
  }
  .game-card:fullscreen .scoreboard {
    height:45px
  }
  .game-card:fullscreen .control-bar {
    min-height:47px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
/* Compact windows also expose touch controls, useful on tablets with a mouse. */.overlay {
  display:flex;
  align-items:center;
  justify-content:center
}
/* Round selection and persistent, local progress. */
.play-lobby{margin-bottom:22px;border:1px solid var(--line);border-radius:16px;padding:20px;background:#eeefe5}
#settingsDialog{width:min(760px,calc(100% - 24px));max-height:96dvh;overflow:auto}#settingsDialog .play-lobby{display:block;margin:18px 0}.start-card #settingsBtn{font-size:9px;margin-top:13px}
.profile-line{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.name-control{display:flex;align-items:center;gap:5px}.small-button.switch-player{padding:0;width:27px;height:30px;font-size:15px}
.profile-rank{display:flex;align-items:center;gap:10px;flex:1}
.rank-icon{display:grid;place-items:center;width:33px;height:33px;border:1px solid #c6d5b4;border-radius:50%;color:#476d3c;font-size:22px}
.profile-rank strong{font-size:12px;display:block}.profile-rank span:not(.rank-icon){display:block;font-size:9px;color:#829173;margin-top:4px}
.xp-track{height:5px;width:130px;background:#dce3d0;border-radius:5px;margin-left:12px;overflow:hidden}.xp-track i{display:block;height:100%;background:#86a265;width:0;transition:width .5s}
.name-label{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:1px;font-weight:700;color:#839078}.name-label input{width:105px;padding:8px 10px;border:1px solid #d3ddc7;background:#fcfcf6;border-radius:6px;color:var(--ink);font:600 11px var(--sans)}
.mode-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.mode-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;border:1px solid #dce2d1;border-radius:10px;background:#f9faf3;color:#5c6f51;text-align:left;padding:15px 13px;transition:background .2s,transform .15s}.mode-card b{font-size:12px}.mode-card span{font-size:9px;color:#829078}.mode-card.selected{background:#214d3e;border-color:#214d3e;color:#f0f7dd;box-shadow:0 3px 0 #193c3510}.mode-card.selected span{color:#b7cdaa}.mode-card:hover:not(:disabled){transform:translateY(-2px)}.mode-card:disabled:not(.selected){opacity:.55}
.court-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:14px}.court-picker>span,.kit-label{font-size:7px;font-weight:700;letter-spacing:1px;color:#829078;margin-right:5px}.court-picker button{border:1px solid transparent;border-radius:20px;background:transparent;color:#6e8060;font-size:10px;display:flex;align-items:center;gap:6px;padding:7px 10px}.court-picker button.selected{background:#fffdf6;border-color:#ccd9bd;color:#2b5039}.court-picker button small{font-size:6px;letter-spacing:.6px}.swatch{height:11px;width:11px;border-radius:50%;display:inline-block}.sunset{background:#dba377}.garden{background:#89a578}.moonlight{background:#526a85}.kit-label{margin-left:auto;display:flex;gap:8px;align-items:center}.kit-label select{border:1px solid #d3ddc7;background:#fbfcf3;border-radius:5px;color:#557145;font:10px var(--sans);padding:6px;max-width:170px}.mode-description{margin:14px 0 0;font-size:10px;line-height:1.6;color:#798770}
.small-button{font-size:9px;font-weight:700;color:#426340;border:1px solid #cddabf;background:#f6f9ee;border-radius:6px;padding:8px 10px;white-space:nowrap}
.speed-picker{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.speed-title{font-size:8px;font-weight:700;letter-spacing:1px;color:#7b8b69}.speed-options{display:flex;gap:5px}.speed-options button{min-width:72px;min-height:44px;padding:9px 13px;background:#f4f6eb;border:1px solid #dce2d1;border-radius:8px;color:#5c6f51;font-size:12px;font-weight:700}.speed-options small{font-size:9px;font-weight:400;margin-left:5px}.speed-options .selected{background:#214d3e;border-color:#214d3e;color:#f0f7dd}.speed-options button:disabled:not(.selected){opacity:.55}.speed-note{font-size:10px;line-height:1.5;color:#829078}
.goal-strip{height:31px;display:flex;align-items:center;gap:15px;padding:0 26px;border-top:1px solid #eef0e6;background:#f4f6eb;font-size:8px;letter-spacing:.7px;color:#7b8b69}.goal-track{height:4px;width:120px;background:#e0e7d3;border-radius:6px;overflow:hidden}.goal-track i{display:block;width:0;height:100%;background:#a1bc72;transition:width .35s}.goal-strip>b{margin-left:auto;font-size:8px;color:#91a17c}.goal-strip .chain-active{color:#bd7d2b}.score-stat{flex-direction:column;gap:1px}.score-stat span{font-size:6px}
.player-hub{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;margin-top:23px}.hub-card{border:1px solid var(--line);border-radius:13px;padding:23px;background:#fcfcf6}.hub-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}.hub-heading .eyebrow{font-size:7px;letter-spacing:1.3px}.hub-heading h3{margin:7px 0 0;font-size:19px;letter-spacing:-.5px}.hub-heading>span{font-size:8px;color:#91a07f;text-align:right;line-height:1.5}.mission-list{display:flex;flex-direction:column;gap:9px;font-size:11px;color:#7d8c6d;min-height:65px}.mission-list>div{display:flex;justify-content:space-between;gap:10px}.mission-list b{font-size:9px;color:#819165;font-weight:500}.mission-list .complete,.mission-list .complete b{color:#277258}.mission-list .complete span:before{content:'✓ ';font-weight:700}
.recent-heading{display:flex;justify-content:space-between;gap:12px;margin-top:24px;font-size:7px;color:#97a187;letter-spacing:.7px}.recent-heading b{font-weight:400;letter-spacing:0}.history-chart{display:flex;gap:10px;align-items:end;height:73px;padding-top:10px;border-bottom:1px solid #e8ecde;font-size:10px;color:#a3ad95}.history-column{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;flex:1;max-width:55px;font-size:8px}.history-column i{display:block;width:100%;border-radius:4px 4px 0 0;background:#afc294}.history-column:last-child i{background:#41755a}.unlock-note,.leaderboard-note{font-size:9px;line-height:1.7;color:#8b997a;margin:15px 0 0}.leaderboard{list-style:none;padding:0;margin:0;min-height:104px;display:flex;flex-direction:column;gap:6px}.leaderboard li{display:flex;align-items:center;gap:12px;padding:9px 10px;background:#f4f6eb;border-radius:7px;font-size:11px}.leaderboard li>b{font-size:9px;color:#96a383}.leaderboard li>strong{margin-left:auto;color:#4c7240;font-size:11px}.leaderboard .you{background:#eaf1db}.leaderboard .empty-board{min-height:95px;background:transparent;justify-content:center;color:#a1ad92;font-size:11px}.offline-note{display:block;margin-top:17px;padding-top:12px;border-top:1px solid var(--line);font-size:8px;color:#9ba68c}.storage-notice{font-size:10px;color:#a36532}
.overlay .result-card{width:430px;max-width:94%;max-height:95%;overflow-y:auto;transform:none;padding:23px 28px 17px}.result-card h2{font-size:30px;margin:12px 0}.result-score strong{font-size:54px}.result-details{margin:12px 0;gap:18px}.result-missions{display:grid;gap:5px;font-size:9px;color:#7f926c;text-align:left;padding:10px 13px;background:#eef2e4;border-radius:7px}.result-card .improvement{font-size:10px;line-height:1.6;color:#487348}.earned-xp{font-size:11px;font-weight:700;color:#628344;margin-top:12px}.result-actions{display:flex;justify-content:space-between;gap:12px}.result-actions .text-button{font-size:9px;margin-top:13px}.pause-card>.text-button{margin-left:10px;margin-right:10px}.game-card:fullscreen .arena-wrap{max-height:calc(100dvh - 146px);max-width:calc((100dvh - 146px)*1280/720)}
@media(max-width:1000px){.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-card{padding:12px 10px}.mode-card b{font-size:11px}.mode-card span{font-size:8px}.xp-track{width:85px}.player-hub{gap:12px}.hub-card{padding:18px}.hub-heading h3{font-size:17px}.kit-label{margin-left:0}.court-picker{gap:4px}}
@media(max-width:650px){.play-lobby{padding:13px;border-radius:12px;margin-bottom:15px}.profile-line{gap:8px;flex-wrap:wrap}.profile-rank{gap:7px}.rank-icon{width:27px;height:27px}.profile-rank strong{font-size:11px}.profile-rank span:not(.rank-icon){font-size:8px}.xp-track{display:none}.name-label{font-size:7px;gap:5px}.name-label input{width:79px;font-size:10px;padding:7px}.mode-grid{grid-template-columns:1fr 1fr;gap:7px}.mode-card:last-child:nth-child(odd){grid-column:1 / -1}.mode-card{padding:12px}.mode-card b{font-size:11px}.court-picker>span{display:none}.court-picker button{font-size:9px;padding:6px 7px}.kit-label{margin-top:5px}.mode-description{font-size:9px}.goal-strip{height:30px;font-size:6px;gap:8px;padding:0 12px;letter-spacing:.2px}.goal-track{width:45px}.goal-strip>b{font-size:6px}.player-hub{grid-template-columns:1fr;margin-top:17px}.hub-card{padding:19px}.hub-heading h3{font-size:19px}.hub-heading .eyebrow{font-size:6px}.overlay .result-card{padding:18px;max-height:96%}.result-card h2{font-size:25px}.result-score strong{font-size:42px}.result-details{font-size:9px}.result-card .primary-button{padding:13px 15px}.result-missions{font-size:8px}.control-bar .small-button{font-size:7px;padding:6px}.score-center{gap:6px}}
@media(max-height:560px) and (orientation:landscape){.play-lobby,.player-hub{display:none}.goal-strip{height:24px;flex-shrink:0;font-size:7px}.game-card:fullscreen .arena-wrap{max-height:none;max-width:none}.overlay .result-card{transform:none;padding:15px 24px;max-height:98%;width:430px}.result-card h2{font-size:24px;margin:9px 0}.result-score strong{font-size:36px}.result-details{margin:8px 0}.start-card{max-height:none}}
@media(max-width:650px), (max-height:560px) and (orientation:landscape) {
    .touch-controls {
    display:block
  }
    .kho-button kbd {
    display:none
  }
    .keyboard-hint {
    display:none
  }
}

/* Seated-player facing legend, paired with the canvas pennants. */
.facing-legend{display:flex;align-items:center;gap:10px}.facing-legend .facing-up{color:#a2eaff}.facing-legend .facing-down{color:#ffda96}.facing-legend>span{white-space:nowrap}

.multiplayer-panel{background:#f5f6ee;border:1px solid #dce2d1;border-radius:16px;padding:20px;margin:0 0 20px;color:#294d3d}.mp-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.mp-heading h3{margin:5px 0;font-size:19px}.mp-heading>span{font-size:11px}.mp-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.mp-controls .primary-button{width:auto;padding:12px 20px}.mp-controls input{border:1px solid #bdcbb5;background:#fffdf5;border-radius:7px;padding:10px;color:#284a3c;max-width:100%;min-width:0}.mp-controls label{font-size:9px;display:flex;align-items:center;gap:8px}#mpCode{width:100px;text-transform:uppercase;letter-spacing:2px}#mpLink{flex:1;min-width:170px;font-size:11px}.mp-controls>span,#mpStatus{font-size:11px;line-height:1.6}.mp-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;padding:0}.mp-roster li{padding:12px;background:#e6eadd;border-radius:8px;font-size:10px;overflow-wrap:anywhere}.mp-roster li.you{border:1px solid #438271}.mp-game-overlay{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:#123b3560;backdrop-filter:blur(3px)}.mp-game-overlay>div{background:#f8f6e9;border-radius:16px;padding:24px;text-align:center;width:min(400px,90%);max-height:95%;overflow:auto}.mp-game-overlay h2{font-size:26px;margin:10px 0;color:#214d3e}.mp-game-overlay p{font-size:12px;line-height:1.6;color:#506550}.mp-game-overlay .text-button{display:block;margin:12px auto 0}.mp-game-overlay[hidden],.multiplayer-panel [hidden]{display:none!important}@media(max-width:650px){.multiplayer-panel{padding:14px}.mp-heading{align-items:flex-start}.mp-roster{grid-template-columns:1fr 1fr}.mp-controls{gap:8px}.mp-heading h3{font-size:16px}}

.mp-speed-label{display:inline-flex;align-items:center;gap:8px;font-size:10px;color:#294d3d}.mp-speed-label select{font:inherit;font-size:12px;border:1px solid #bdcbb5;background:#fffdf5;border-radius:7px;padding:10px;color:#284a3c;min-height:40px}.mp-speed-label select:disabled{opacity:.65;cursor:default}.mp-game-overlay .mp-speed-label{display:flex;justify-content:center;margin:14px 0}