:root{color-scheme:dark;font-family:system-ui,"Microsoft JhengHei",sans-serif;color:#e4f3ed;background:#0b1718}*{box-sizing:border-box}body{margin:0}main{max-width:1160px;margin:auto;padding:32px 24px}header{position:relative}.tag{font-size:12px;letter-spacing:3px;color:#60dab1}h1{font-size:42px;margin:12px 0}h1 span{font-size:15px;font-weight:400;margin-left:24px;color:#a5bbb5}#status{color:#91b6aa}form{display:flex;gap:16px;align-items:end}label{display:grid;gap:7px;font-size:13px;flex:1}input,button{font:inherit;border-radius:10px;padding:12px;border:1px solid #37504a;background:#142b29;color:#e4f3ed}button{cursor:pointer;background:#75efb8;color:#103329;font-weight:700}button:disabled{opacity:.45;cursor:default}input:focus,button:focus-visible{outline:2px solid #75efb8}.join{background:#102321;padding:20px;border-radius:15px;margin:24px 0}.join p,footer,.rules{font-size:13px;color:#97b2a8;line-height:1.8}.join p{margin-bottom:0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px}.arena{background:#132724;border:1px solid #2a4941;border-radius:14px;overflow:hidden}.bar{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:10px}.bar button{padding:8px 12px}canvas{display:block;width:100%;background:#091b18;touch-action:none}aside{padding:0 8px}h2{font-size:16px}ol{padding:0;list-style:none}li{padding:12px 0;border-bottom:1px solid #294039;display:flex;justify-content:space-between;gap:8px}li span{overflow-wrap:anywhere}.pad{text-align:center;margin-top:22px;touch-action:none;user-select:none}.pad button{width:56px;height:50px;margin:3px;font-size:22px;background:#213c34;color:#9df8cd}footer{text-align:center;margin:24px 0 0}@media(max-width:700px){main{padding:20px 12px}h1{font-size:32px}h1 span{display:block;margin:8px 0}form{flex-wrap:wrap;gap:10px}label{min-width:40%}form button{width:100%}.layout{grid-template-columns:1fr;gap:12px}aside{display:flex;flex-direction:column}aside h2{margin:8px 0}ol{margin:0}.pad{order:-1;margin:0}.rules{margin-bottom:0}.bar{padding:8px;font-size:11px}}
.history{margin-top:24px}.history time{display:block;margin-top:4px;font-size:12px;color:#97b2a8}.history [role=status]:empty{display:none}


.bar button {
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

.header-actions {
  position: absolute;
  inset: 0 0 auto auto;
  display: flex;
  gap: 6px;
}

.header-actions button, .room-controls button, .room-controls select {
  padding: 6px 9px;
  border: 1px solid #37504a;
  border-radius: 8px;
  background: #213c34;
  color: #c0efda;
  font: inherit;
  font-size: 12px;
}

#invite-fallback {
  margin-top: 10px;
}

.board-wrap {
  position: relative;
}

.round-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 12px;
  background: #091b18bf;
  color: #f0fff7;
  font-size: clamp(13px, 2.3vw, 21px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
}

.room-controls {
  margin-bottom: 16px;
}

.room-controls select {
  width: 100%;
}

.pad button {
  touch-action: manipulation;
}

@media (min-width: 701px) {
  main {
    --board-width: clamp(200px, calc((100svh - 355px) * 4 / 3), 620px);
    max-width: max(640px, calc(var(--board-width) + 288px));
    padding: 20px 24px;
  }

  h1 {
    font-size: 34px;
    margin: 6px 0;
  }

  #status {
    margin: 8px 0;
  }

  .join {
    margin: 14px 0;
    padding: 12px 16px;
  }

  .layout {
    grid-template-columns: minmax(0, var(--board-width)) 220px;
    justify-content: center;
    align-items: start;
    gap: 20px;
  }

  .bar {
    padding: 8px 12px;
  }
}