:root {
  --bg: #05060b;
  --panel: #0c0f18;
  --panel2: #121725;
  --line: #222a3d;
  --text: #e9ecf3;
  --dim: #8b93a8;
  --accent: #ffc531;
  --cyan: #45c8ff;
  --err: #ff7a7a;
  --ok: #8fe3a5;
  --btn: clamp(46px, min(17vw, 8.4dvh), 88px);
  --side-w: clamp(250px, 31vw, 400px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; width: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
}
button, select { font: inherit; color: var(--text); }
.small { font-size: 12px; color: var(--dim); }

/* ───────── 全体レイアウト（縦画面が既定） ───────── */
#app {
  height: 100vh; height: 100dvh; width: 100%; display: grid; overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "hud" "stage" "side";
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(120% 60% at 50% 0%, #0d1428 0%, var(--bg) 60%);
}

#hud {
  grid-area: hud; display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; min-width: 0;
  padding: 6px 12px; background: linear-gradient(180deg, #0f1424, #0a0d17); border-bottom: 1px solid var(--line);
}
#brand { font-weight: 900; letter-spacing: .14em; font-size: 13px; color: #fff; white-space: nowrap; }
#brand b { margin-left: .45em; font-weight: 700; color: var(--cyan); letter-spacing: .1em; }
#hud b { color: var(--accent); font-variant-numeric: tabular-nums; }
.hudItem { white-space: nowrap; font-size: 13px; letter-spacing: .04em; }
#modeBadge { font-weight: 800; letter-spacing: .08em; padding: 2px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap;
  background: #3a2c08; color: var(--accent); border: 1px solid var(--accent); }
#modeBadge[data-mode=manual] { background: #0c2a35; color: #8fe0ff; border-color: #8fe0ff; }
#app.combo-break #combo { animation: comboBreak .45s ease-out; }
@keyframes comboBreak { 0% { color: #7fb0ff; text-shadow: 0 0 8px #3a7bff; } 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } 100% { transform: none; } }

#stageWrap { grid-area: stage; position: relative; min-height: 0; min-width: 0; overflow: hidden; background: #000; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#judgeText { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  font: 900 clamp(16px, 4.2vmin, 32px)/1 system-ui, sans-serif; letter-spacing: .14em; color: #8892a8; font-style: italic;
  text-shadow: 0 0 10px rgba(0,0,0,.9), 0 0 2px #000; }
#judgeText[data-r=PERFECT] { color: #ffe36b; text-shadow: 0 0 14px rgba(255,180,40,.9), 0 0 2px #000; }
#judgeText[data-r=GOOD] { color: #8fe0ff; text-shadow: 0 0 12px rgba(60,170,255,.9), 0 0 2px #000; }
#judgeText[data-r=MISS] { color: #7f9cff; text-shadow: 0 0 10px rgba(60,90,200,.8); }
#charBtn { position: absolute; left: 8px; top: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 6px; font: 800 12px/1 system-ui, sans-serif; letter-spacing: .12em; color: #fff;
  background: linear-gradient(180deg, rgba(30,40,64,.92), rgba(12,16,28,.92)); border: 1px solid #3a4a72;
  box-shadow: 0 0 10px rgba(69,200,255,.25), inset 0 1px 0 rgba(255,255,255,.12); cursor: pointer; touch-action: manipulation; }
#charBtn[hidden] { display: none; }
#charBtn .swap { color: var(--cyan); font-weight: 700; letter-spacing: 0; }
#charBtn[data-status=pending] .who, #charBtn[data-status=unavailable] .who { color: #ffb15a; }
#charBtn:active { transform: translateY(1px); }
#charBtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#charNotice { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: min(86%, 420px);
  padding: 12px 14px; border-radius: 10px; background: rgba(8,10,18,.82); border: 1px solid #6a5226; color: #f3e6c8;
  font-size: 13px; line-height: 1.55; text-align: center; pointer-events: none; }
#charNotice[hidden] { display: none; }
#charNotice b { color: #ffb15a; letter-spacing: .08em; }
#debug { position: absolute; left: 6px; top: 42px; margin: 0; padding: 4px 6px; font: 11px/1.35 ui-monospace, monospace;
  color: #9fe; background: rgba(0,0,0,.55); pointer-events: none; white-space: pre; }
#debug:empty { display: none; }
#timebar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }
#timebar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--cyan), var(--accent)); box-shadow: 0 0 8px var(--cyan); }

#side {
  grid-area: side; display: grid; min-width: 0; min-height: 0; gap: 6px; padding: 6px 10px 8px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "track" "pad" "controls";
  background: linear-gradient(180deg, #0b0e18, #070910); border-top: 1px solid var(--line);
}
#trackWrap { grid-area: track; position: relative; height: 52px; min-width: 0; min-height: 0; }
#track { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#pad { grid-area: pad; justify-self: center; align-self: center; }
#controls { grid-area: controls; display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* ───────── ABXY ひし形ボタン ───────── */
.diamond {
  --gap: calc(var(--btn) * .06);
  display: grid; grid-template-columns: repeat(3, var(--btn)); grid-template-rows: repeat(3, var(--btn)); gap: var(--gap);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.face-up { grid-area: 1 / 2; } .face-left { grid-area: 2 / 1; } .face-right { grid-area: 2 / 3; } .face-down { grid-area: 3 / 2; }
.face {
  --c: #fff; --g: 255,255,255; position: relative; width: var(--btn); height: var(--btn); padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.6));
}
.face .ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, #f2f5ff, #59607a 22%, #c6ccdc 40%, #3a4054 60%, #e8ecf8 80%, #f2f5ff);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 calc(var(--btn) * .22) rgba(var(--g), .55), 0 0 calc(var(--btn) * .5) rgba(var(--g), .18); }
.face .cap { position: absolute; inset: 9%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 28%, #fff 0%, color-mix(in srgb, var(--c) 70%, #fff) 10%, var(--c) 38%, color-mix(in srgb, var(--c) 45%, #000) 82%, color-mix(in srgb, var(--c) 25%, #000) 100%);
  box-shadow: inset 0 calc(var(--btn) * -.07) calc(var(--btn) * .12) rgba(0,0,0,.55), inset 0 calc(var(--btn) * .05) calc(var(--btn) * .06) rgba(255,255,255,.55),
    0 calc(var(--btn) * .06) 0 color-mix(in srgb, var(--c) 30%, #000);
  transition: transform .06s ease-out, box-shadow .06s ease-out, filter .06s; }
.face .glyph { font: 900 calc(var(--btn) * .44)/1 system-ui, sans-serif; color: #fff; letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 8px rgba(0,0,0,.35); }
.face .sub { font-size: calc(var(--btn) * .14); line-height: 1; color: rgba(255,255,255,.85); text-shadow: 0 1px 0 rgba(0,0,0,.6); margin-top: 1px; }
.face .burst { position: absolute; inset: -18%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(var(--g), .0) 40%, rgba(var(--g), .85) 52%, rgba(var(--g), 0) 70%); }
.face.held .cap { transform: translateY(calc(var(--btn) * .05)) scale(.94); filter: brightness(1.25) saturate(1.2);
  box-shadow: inset 0 calc(var(--btn) * .06) calc(var(--btn) * .14) rgba(0,0,0,.6), inset 0 0 calc(var(--btn) * .2) rgba(255,255,255,.35), 0 0 0 color-mix(in srgb, var(--c) 30%, #000); }
.face.held .ring { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 calc(var(--btn) * .35) rgba(var(--g), .95), 0 0 calc(var(--btn) * .8) rgba(var(--g), .4); }
.face.hit-PERFECT .burst { animation: burst .42s ease-out; }
.face.hit-GOOD .burst { animation: burst .3s ease-out; }
.face.hit-MISS .cap { animation: missFlash .35s ease-out; }
@keyframes burst { 0% { opacity: 1; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes missFlash { 0% { filter: grayscale(1) brightness(.6) hue-rotate(180deg); } 100% { filter: none; } }
.diamond.auto .face { opacity: .78; }
.face:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ───────── 操作ボタン ───────── */
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; align-items: stretch; }
.actions .mode { grid-column: 1 / -1; min-height: 32px; }
.act { min-width: 0; min-height: 38px; padding: 4px 6px; border-radius: 10px; white-space: nowrap; font-size: 13px; font-weight: 700;
  background: linear-gradient(180deg, #232a3e, #151a28); border: 1px solid #2d3650; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.4);
  touch-action: manipulation; }
.act.primary:not(:disabled) { background: linear-gradient(180deg, #ffd65c, #e0a417); color: #1a1200; border-color: #ffdd7a; box-shadow: 0 0 12px rgba(255,197,49,.35); }
.act:disabled { opacity: .38; }
.act:not(:disabled):active { transform: translateY(1px); filter: brightness(1.15); }
.mode { display: flex; border: 1px solid #2d3650; border-radius: 10px; overflow: hidden; min-width: 0; background: #0b0e17; }
.mode label { flex: 1; display: flex; min-width: 0; }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode span { flex: 1; display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: .05em; color: var(--dim); padding: 0 4px; cursor: pointer; white-space: nowrap; }
.mode input:checked + span { color: #0b0e17; background: linear-gradient(180deg, #8fe0ff, #3aa6e0); }
.mode input[value=auto]:checked + span { background: linear-gradient(180deg, #ffe07a, #e0a417); }
.mode input:focus-visible + span { outline: 2px solid #fff; outline-offset: -2px; }
.mode input:disabled + span { cursor: not-allowed; opacity: .75; }

progress { width: 100%; height: 4px; accent-color: var(--cyan); }
#app:not([data-state=loading]) progress { display: none; }
#status { font-size: 12px; white-space: pre-wrap; max-height: 4.4em; overflow: auto; overflow-wrap: anywhere; }
#status[data-kind=error] { color: var(--err); font-weight: 600; }
#status[data-kind=ok] { color: var(--ok); }

#padPanel { font-size: 11px; color: var(--dim); min-width: 0; }
#padPanel .padHead { display: flex; gap: 6px; align-items: center; min-width: 0; }
#padPanel .padName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#padPanel .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #444b5c; }
#padPanel[data-connected="1"] .dot { background: #3ddc84; box-shadow: 0 0 6px #3ddc84; }
#padPanel[data-connected="1"] .padName { color: var(--text); }
#padPanel .padMap { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; align-items: center; }
#padPanel .padMap:empty { display: none; }
#padPanel .mapKind { width: 100%; }
#padPanel .mapKind.warn { color: #ffb15a; }
#padPanel .chip { border: 1px solid var(--c); border-radius: 6px; padding: 0 5px; color: var(--text); }
#padPanel .chip b { color: var(--c); margin-right: 2px; }
#padPanel .chip.on { background: var(--c); color: #000; box-shadow: 0 0 8px var(--c); }
#padPanel .chip.on b { color: #000; }
#padPanel .raw { margin-left: 4px; }
#padPanel .padRow { display: flex; gap: 6px; margin-top: 3px; }
#padPanel[data-connected="0"] .padRow { display: none; }
#padPanel button, #settings button { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: #1a2030; border: 1px solid #2d3650; min-height: 26px; }
#padPanel .calibBox { margin-top: 4px; padding: 6px; border: 1px solid #3a4560; border-radius: 8px; background: #0f1422; color: var(--text); font-size: 12px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
#padPanel .calibBox[hidden] { display: none; }

#settings { min-width: 0; }
#settings summary { cursor: pointer; user-select: none; padding: 2px 0; color: var(--dim); font-size: 12px; touch-action: manipulation; }
#settings .settings { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 5px 0; font-size: 12px; }
#settings:not([open]) > .settings { display: none; }
#settings .keys { width: 100%; }
.vol input { width: 110px; vertical-align: middle; }
.lat input { width: 56px; background: #0e1016; color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
.qual select { background: #0e1016; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; padding: 2px 4px; }
#logout[hidden] { display: none; }
#logout { display: flex; gap: 6px; align-items: center; }

/* ───────── 縦画面: ひし形と操作を左右に並べ、人物ステージの高さを確保する ───────── */
@media (orientation: portrait) {
  :root { --btn: clamp(44px, min(15vw, 8dvh), 92px); }
  #side { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "track track" "pad controls"; column-gap: 12px; }
  #controls .actions { grid-template-columns: 1fr 1fr; }
  #controls .actions .mode { grid-column: 1 / -1; min-height: 32px; }
  #controls .actions .act { min-height: 34px; }
  #trackWrap { height: 46px; }
}
@media (orientation: portrait) and (max-width: 360px) {
  .mode span { font-size: 11px; letter-spacing: 0; padding: 0 2px; }
  #brand { display: none; }
  #hud { padding: 4px 6px; gap: 3px 8px; }
  .hudItem { font-size: 11px; }
  #counts { display: none; }
  #side { padding: 4px 6px 6px; column-gap: 8px; }
  #status { font-size: 11px; max-height: 3em; }
}
@media (orientation: portrait) and (max-height: 520px) {
  #padPanel .padMap, #padPanel .padRow { display: none; }
  #trackWrap { height: 40px; }
}

/* ───────── 横画面: 左に大きなステージ、右に譜面・ABXY・操作 ───────── */
@media (orientation: landscape) {
  :root { --btn: clamp(38px, min(11dvh, 6.2vw), 76px); }
  #app { grid-template-columns: minmax(0, 1fr) var(--side-w); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "hud hud" "stage side"; }
  #side { border-top: 0; border-left: 1px solid var(--line); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    grid-template-rows: minmax(60px, 1fr) auto auto; align-content: stretch; scrollbar-width: thin; }
  #trackWrap { height: auto; min-height: 60px; }
  #controls .actions { grid-template-columns: 1fr 1fr 1fr; }
  #controls .actions .mode { grid-column: 1 / -1; min-height: 32px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  :root { --btn: clamp(40px, 12.5dvh, 54px); --side-w: clamp(260px, 42vw, 340px); }
  #hud { padding: 3px 10px; flex-wrap: nowrap; overflow: hidden; }
  #brand b { display: none; }
  #side { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(44px, 1fr) auto; grid-template-areas: "track track" "pad controls";
    column-gap: 8px; padding: 4px 6px; gap: 4px 8px; }
  #controls .actions { grid-template-columns: 1fr 1fr; gap: 4px; }
  #controls .actions .act { min-height: 30px; font-size: 12px; padding: 2px 4px; }
  #controls .actions .mode { min-height: 28px; }
  .mode span { font-size: 10.5px; letter-spacing: 0; padding: 0 2px; }
  #status { max-height: 2.8em; font-size: 11px; }
  #padPanel .padMap, #padPanel .padRow { display: none; }
}
@media (orientation: landscape) and (max-height: 360px) {
  #counts { display: none; }
  #settings summary { font-size: 11px; }
}

/* ───────── 結果 ───────── */
#result { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 10; padding: 16px; }
#result[hidden] { display: none; }
#result .card { background: linear-gradient(180deg, #121828, #0b0f1a); border: 1px solid #2d3650; border-radius: 14px; padding: 16px 20px;
  max-width: 440px; width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: 0 0 40px rgba(69,200,255,.15); }
#result h2 { font-size: 15px; margin: 0 0 10px; }
#result dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 8px; }
#result dt { color: var(--dim); }
#result dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
#result .note { font-size: 12px; color: var(--dim); }
#result button { padding: 6px 16px; border-radius: 8px; background: #1d2338; border: 1px solid #2d3650; min-height: 36px; }