* { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; overflow: hidden; }
  body {
    font-family: "Hiragino Maru Gothic ProN", "BIZ UDGothic", "Yu Gothic", sans-serif;
    background: linear-gradient(180deg, #fdf6e3 0%, #f5e6c8 100%);
    display: flex; align-items: center; justify-content: center;
    user-select: none; -webkit-user-select: none; touch-action: manipulation;
  }
  #game {
    position: relative;
    width: min(96vw, calc(96vh * 1.5));
    aspect-ratio: 3 / 2;
    background: #fffaf0;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(120, 90, 40, .25);
    overflow: hidden;
  }
  /* たたみ風の床 */
  #game::before {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
    background: repeating-linear-gradient(90deg, #cfe3a8 0 60px, #c3d99a 60px 120px);
    border-top: 4px solid #a8bf7e;
  }
  .char { position: absolute; image-rendering: auto; pointer-events: none; }
  .watcher.w0 { left: 1%;  bottom: 12%; width: 42%; z-index: 3; }
  .watcher.w1 { left: 14%; bottom: 30%; width: 32%; z-index: 2; }
  .watcher.w2 { left: 25%; bottom: 46%; width: 22%; z-index: 1; }
  .watcher.pop { animation: pop .35s ease-out; }
  @keyframes pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }
  #player {
    right: 1%; bottom: 12%;
    width: 46%;
    z-index: 9; /* 自分はカメラ最前面。対戦相手より上・オーバーレイ(10)より下 */
    transform: scaleX(-1); /* 鉢が内側に来るよう反転 */
  }
  .player-hud {
    position: absolute;
    right: 44%;
    bottom: 24%;
    z-index: 9;
    text-align: right;
    white-space: nowrap;
    display: none !important;
    justify-items: end;
    gap: 1px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
    padding: 0 !important;
    color: #6b5b3e;
  }
  .player-hud.show {
    display: grid !important;
  }
  .slurp-boost-1 {
    animation: slurpBoost .18s infinite steps(2);
    filter:
      drop-shadow(0 0 10px rgba(255, 235, 59, .9))
      drop-shadow(0 0 18px rgba(255, 183, 77, .75))
      brightness(1.08);
  }
  .slurp-boost-2 {
    animation: slurpBoostStrong .12s infinite steps(2);
    filter:
      drop-shadow(0 0 14px rgba(255, 235, 59, 1))
      drop-shadow(0 0 26px rgba(255, 152, 0, .9))
      saturate(1.18)
      brightness(1.14);
  }
  .slurp-boost-3 {
    animation: slurpBoostMax .08s infinite steps(2);
    filter:
      drop-shadow(0 0 18px rgba(255, 235, 59, 1))
      drop-shadow(0 0 34px rgba(255, 87, 34, 1))
      saturate(1.3)
      brightness(1.22);
  }
  @keyframes slurpBoost {
    from { transform: scaleX(-1) scale(1.02) translateY(0) rotate(-1deg); }
    to { transform: scaleX(-1) scale(1.04) translateY(-4px) rotate(1deg); }
  }
  @keyframes slurpBoostStrong {
    from { transform: scaleX(-1) scale(1.05) translate(-3px, 0) rotate(-2deg); }
    to { transform: scaleX(-1) scale(1.09) translate(3px, -6px) rotate(2deg); }
  }
  @keyframes slurpBoostMax {
    from { transform: scaleX(-1) scale(1.1) translate(-5px, 1px) rotate(-3deg); }
    to { transform: scaleX(-1) scale(1.16) translate(5px, -8px) rotate(3deg); }
  }
  /* 対戦相手のねずみ（奥にいる小さい分） */
  .opp { position: absolute; pointer-events: none; text-align: center; }
  .opp img { width: 100%; display: block; transform: scaleX(-1); }
  .opp.out img { filter: grayscale(.8) opacity(.7); }
  .opp-hud {
    position: absolute;
    left: 16%;
    bottom: 11%;
    transform: translateX(-154%);
    z-index: 1;
    text-align: right;
    white-space: nowrap;
    display: grid !important;
    justify-items: end;
    gap: 1px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
    padding: 0 !important;
    color: #6b5b3e;
  }
  .opp-name {
    font-size: clamp(9px, 1.5vmin, 12px);
    font-weight: bold;
    text-shadow: 0 1px 0 #fff;
  }
  /* うどんゲージ */
  #gaugeWrap {
    position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
    width: 60%; text-align: center;
  }
  #gaugeLabel { font-size: clamp(12px, 2.2vmin, 18px); color: #7a5c2e; margin-bottom: 4px; font-weight: bold; }
  #gaugeBar {
    height: clamp(14px, 3vmin, 24px);
    background: #e8dcc3; border: 3px solid #7a5c2e; border-radius: 999px; overflow: hidden;
  }
  #gaugeFill {
    height: 100%; width: 100%;
    background: repeating-linear-gradient(45deg, #fff4d6 0 12px, #ffe9b3 12px 24px);
    border-radius: 999px;
    transition: width .1s linear;
  }
  #reviveStatus {
    display: none;
  }
  /* 対戦相手HUD */
  #others {
    display: none;
  }
  .chip {
    background: rgba(255,255,255,.85); border: 2px solid #d4b56a; border-radius: 999px;
    padding: 2px 10px; font-size: clamp(10px, 1.8vmin, 14px); color: #6b5b3e;
    display: flex; align-items: center; gap: 6px;
  }
  .chip .mini {
    position: relative;
    width: clamp(48px, 9vmin, 76px); height: clamp(9px, 1.7vmin, 14px);
    background: #e8dcc3; border-radius: 999px; overflow: hidden; border: 1px solid #b59a64;
  }
  .opp-hud .mini,
  .player-hud .mini { width: clamp(70px, 12vmin, 104px); }
  .chip .mini.reviving {
    background: #fff4d6;
    border-color: #c0392b;
  }
  .revive-in-gauge {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #c0392b;
    font-size: clamp(8px, 1.35vmin, 11px);
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff;
  }
  .chip .mini > div { height: 100%; background: #ffd54f; }
  /* 状態表示 */
  #status {
    position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
    font-size: clamp(16px, 3.5vmin, 30px); font-weight: bold; color: #c0392b;
    text-shadow: 0 2px 0 #fff; white-space: nowrap; z-index: 6;
  }
  #status.count { font-size: clamp(40px, 10vmin, 90px); top: 26%; }
  #hint {
    position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%);
    font-size: clamp(11px, 2vmin, 16px); color: #6b5b3e; white-space: nowrap;
    background: rgba(255,255,255,.7); padding: 4px 14px; border-radius: 999px;
  }
  /* 経過時間（常時・右上） */
  #timer {
    position: absolute; right: 2%; top: 2.5%; z-index: 21;
    font-size: clamp(11px, 2.2vmin, 18px); font-weight: bold;
    color: #5a4632; text-shadow: 0 2px 0 #fff;
    background: rgba(255, 255, 255, .65); padding: 2px 14px; border-radius: 999px;
    font-variant-numeric: tabular-nums; pointer-events: none;
  }
  /* バージョン表記 */
  #version {
    position: absolute; right: 1.2%; bottom: 1.2%; z-index: 20;
    font-size: clamp(9px, 1.4vmin, 12px); color: #6b5b3e;
    background: rgba(255, 255, 255, .6); padding: 1px 8px; border-radius: 999px;
    pointer-events: none;
  }
  /* オーバーレイ（タイトル・ロビー・リザルト） */
  #overlay {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(60, 45, 20, .55);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2.4vmin; text-align: center; padding: 2vmin;
  }
  #overlay.hidden { display: none; }
  #overlay h1 {
    font-size: clamp(22px, 5.5vmin, 48px); color: #fff;
    text-shadow: 0 3px 0 rgba(0,0,0,.3);
  }
  #overlay h1:empty { display: none; }
  #overlay p {
    font-size: clamp(13px, 2.6vmin, 20px); color: #fff; line-height: 1.8;
    text-shadow: 0 2px 0 rgba(0,0,0,.3);
  }
  .title-stats {
    display: block;
    margin-top: 1.2vmin;
    font-size: clamp(12px, 2.2vmin, 16px);
    font-weight: bold;
    line-height: 1.6;
  }
  .name-note { display: block; margin-bottom: 1.3vmin; }
  .online-count {
    display: block;
    margin-bottom: 1.2vmin;
    font-size: clamp(12px, 2.2vmin, 16px);
    font-weight: bold;
  }
  .name-panel {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 15em) auto;
    align-items: center;
    gap: 1vmin;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    padding: .35em .45em .35em 1em;
  }
  .name-label {
    font-size: clamp(11px, 2vmin, 15px);
    font-weight: bold;
    white-space: nowrap;
  }
  .name-value {
    min-width: 0;
    width: 100%;
    border-radius: 999px;
    padding: .38em .9em;
    font-weight: bold;
    color: #5a4632;
    background: rgba(255,255,255,.92);
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #ovList {
    display: flex; flex-direction: column; gap: 6px; align-items: center;
    font-size: clamp(13px, 2.6vmin, 20px); color: #fff;
    text-shadow: 0 2px 0 rgba(0,0,0,.3);
  }
  #ovList:empty { display: none; }
  #ovList .row {
    background: rgba(255,255,255,.15); border-radius: 999px; padding: 2px 18px;
  }
  #ovButtons { display: flex; gap: 2vmin; flex-wrap: wrap; justify-content: center; }
  #ovButtons.multi-menu,
  #ovButtons.lobby-menu,
  #ovButtons.result-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.2vmin 2.8vmin;
    width: min(76vmin, 620px);
  }
  #overlay button {
    font-family: inherit; font-weight: bold;
    font-size: clamp(15px, 3vmin, 24px);
    padding: .55em 1.8em; border: none; border-radius: 999px;
    background: #8bc34a; color: #fff; cursor: pointer;
    box-shadow: 0 5px 0 #689f38;
    transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
    white-space: pre-line;
    line-height: 1.25;
  }
  #overlay button.sub { background: #ffb74d; box-shadow: 0 5px 0 #f57c00; }
  #overlay button.join { background: #ffb74d; box-shadow: 0 5px 0 #f57c00; }
  #overlay button:not(.back) {
    min-height: 3.6em;
  }
  #overlay button.dice {
    min-height: 0;
    width: 2.6em;
    height: 2.6em;
    padding: 0;
    font-size: clamp(15px, 2.7vmin, 22px);
    background: #ffb74d;
    box-shadow: 0 4px 0 #f57c00;
  }
  #ovButtons.result-menu button:first-child,
  #overlay button.back {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: min(42vmin, 260px);
  }
  #overlay button.back {
    background: #f2e4c8;
    color: #6b5b3e;
    box-shadow: 0 5px 0 #c6a66d;
  }
  #overlay button:hover:not(:disabled) {
    transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 7px 0 #689f38;
  }
  #overlay button.sub:hover:not(:disabled) { box-shadow: 0 7px 0 #f57c00; }
  #overlay button.join:hover:not(:disabled) { box-shadow: 0 7px 0 #f57c00; }
  #overlay button.dice:hover:not(:disabled) { box-shadow: 0 6px 0 #f57c00; }
  #overlay button.back:hover:not(:disabled) { box-shadow: 0 7px 0 #c6a66d; }
  #overlay button:active:not(:disabled) {
    transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.25); filter: none;
  }
  #overlay button:disabled { opacity: .55; cursor: default; }
  @media (max-width: 520px) {
    #ovButtons.multi-menu,
    #ovButtons.lobby-menu,
    #ovButtons.result-menu {
      grid-template-columns: 1fr;
      width: min(82vw, 360px);
    }
    .name-panel {
      grid-template-columns: 1fr auto;
      border-radius: 22px;
      width: min(82vw, 360px);
      padding: .7em;
    }
    .name-label { grid-column: 1 / -1; }
    #overlay button.back { grid-column: auto; }
  }