/* Local rhythm theme: lavender glass, quiet starlight, clear touch lanes. */
body[data-game='rhythm'] {
    --accent:#73529f;
    --mini-bg:#eee8fa;
    --rhythm-gold:#dac69e;
    --paper:#faf8ff;
    --ink:#453956;
    background:#eeeaf5;
}
body[data-game='rhythm'] .mini-shell {
    gap:4px;
    background:linear-gradient(180deg,#fcfaff,#eeeaf6);
}
body[data-game='rhythm'] .companion::before {
    background:linear-gradient(135deg,#e0d7f6,#f8e8f2);
    box-shadow:inset 0 0 0 2px #fff9;
}
body[data-game='rhythm'] .cast-name {color:#756687}
body[data-game='rhythm'] .speech {border-color:#ded5ea; background:linear-gradient(135deg,#ffffff,#f7f2ff); box-shadow:0 2px 8px #52406c08}
body[data-game='rhythm'] .companion[data-reaction='good'] .speech {
    border-color:#aa88d4;
    background:#f1e9ff;
    box-shadow:0 0 0 2px #b898da1a;
}
body[data-game='rhythm'] .mini-hud > span:first-child {background:#e9e1f5; box-shadow:none}
body[data-game='rhythm'] .mini-hud .clock,
body[data-game='rhythm'] .icon-button {border-color:#ddd4e8; background:#faf7ff}
body[data-game='rhythm'] .stage {
    border-radius:18px;
    background:#211c35;
    box-shadow:0 0 0 1px #79658d55,0 5px 12px #31234118;
}
body[data-game='rhythm'] .stage::after {border-color:#dac69e66; box-shadow:inset 0 1px 0 #fff2}
body[data-game='rhythm'] .overlay {
    color:#f5efff;
    background:linear-gradient(150deg,#312640f5,#27233bec 60%,#39304cf5);
    backdrop-filter:blur(3px);
}
body[data-game='rhythm'] .overlay h2 {color:#f5efff}
body[data-game='rhythm'] .panel-detail {color:#cfc3dd}
body[data-game='rhythm'] .panel-icon {
    border-color:#cab3e955;
    background:linear-gradient(135deg,#6e5290,#423854);
    box-shadow:0 8px 24px #08051533;
}
body[data-game='rhythm'] .cast-options button {
    border-color:#84728c;
    background:#e4ddeb;
    box-shadow:none;
}
body[data-game='rhythm'] .cast-options button[aria-pressed='true'] {
    border-color:#f0d6ff;
    background:#eee2ff;
    box-shadow:0 0 0 3px #bb8ce84a,0 4px 15px #c897fa35;
}
body[data-game='rhythm'] .cast-options button[aria-pressed='true']::after {background:#9065ba; border-color:#f4eaff}
body[data-game='rhythm'] .go {background:linear-gradient(135deg,#a17bc7,#7856a4); box-shadow:0 4px 0 #51386f,0 8px 18px #160d3133}
body[data-game='rhythm'] .go:active {box-shadow:0 1px 0 #51386f}
body[data-game='rhythm'] .controls {
    /* Align the four buttons with the board's 10..350 touch lane boundaries. */
    gap:0;
    padding:2px 2.778% 1px;
}
body[data-game='rhythm'] .controls button {
    max-width:none;
    min-width:0;
    margin:0 2px;
    min-height:48px;
    border:1px solid #9f89bb;
    border-bottom:3px solid #8c72a8;
    border-radius:12px;
    background:linear-gradient(180deg,#f9f5ff,#e8def7);
    touch-action:none;
}
body[data-game='rhythm'] .controls button {--lane:#9f89bb; position:relative; color:#58436f}
body[data-game='rhythm'] .controls button:nth-child(2) {--lane:#bc8fa8; border-color:var(--lane); background:linear-gradient(#fff7fb,#f1deeb)}
body[data-game='rhythm'] .controls button:nth-child(3) {--lane:#83acbb; border-color:var(--lane); background:linear-gradient(#f3fcff,#daeaf1)}
body[data-game='rhythm'] .controls button:nth-child(4) {--lane:#b6a16e; border-color:var(--lane); background:linear-gradient(#fffcf3,#f0e5ca)}
body[data-game='rhythm'] .controls button::before {content:''; position:absolute; width:22px; height:2px; border-radius:2px; top:4px; background:var(--lane); pointer-events:none}
body[data-game='rhythm'] .controls button:active {background:#fff; border-bottom-width:1px; box-shadow:inset 0 0 0 2px var(--lane)}
body[data-game='rhythm'] .controls button:disabled {opacity:.65; filter:saturate(.5)}
body[data-game='rhythm'] .controls button:focus-visible {outline:3px solid #70508d; outline-offset:1px}
body[data-game='rhythm'] #pause {width:44px; min-height:44px}
body[data-game='rhythm'] .overlay[data-presentation='result'] {
    background:linear-gradient(120deg,#3d2f53,#28253c);
    border-color:#b89ad077;
    box-shadow:0 0 0 2px #c2a4ec18;
}
body[data-game='rhythm'] .overlay[data-presentation='result'] .panel-detail {color:#edcfff}
body[data-game='rhythm'] .cast-toggle {background:#574367; border-color:#b39bc9; color:#f5eaff}
body[data-game='rhythm'] .save-note {color:#e3c8d4}
body[data-game='rhythm'] button:focus-visible {outline-color:#b58ce0}
@media (max-width:350px) {
    body[data-game='rhythm'] .mini-shell {padding-left:5px; padding-right:5px}
    body[data-game='rhythm'] .controls button {margin:0 1px}
}
@media (max-height:620px) {
    body[data-game='rhythm'] .controls button {min-height:44px}
}
@media (prefers-reduced-motion:reduce) {
    body[data-game='rhythm'] .overlay {backdrop-filter:none}
    body[data-game='rhythm'] .companion > img {animation:none}
    body[data-game='rhythm'] button {transition:none}
}

/* Brief panel arrival; the playing board never pulses or flashes. */
body[data-game='rhythm'] .overlay:not([hidden]) {animation:rhythm-panel-in .18s ease-out}
body[data-game='rhythm'] .panel-icon {border-radius:50%; transform:none; border-color:#dac69e88; background:radial-gradient(circle at 35% 25%,#8c73ac,#453952); box-shadow:inset 0 0 0 5px #ffffff08,0 8px 24px #08051533}
body[data-game='rhythm'] .panel-icon img {transform:none}
body[data-game='rhythm'] .go {border-color:#e9d8f7aa; background:linear-gradient(145deg,#ac8bce,#77539f); box-shadow:0 4px 0 #51386f,0 8px 18px #160d3133}
body[data-game='rhythm'] .companion[data-reaction='miss'] .speech {border-color:#c6a9bb; background:#fcf5fa}
body[data-game='rhythm'] .overlay[data-presentation='result'] {border-color:#dac69e88; background:linear-gradient(120deg,#423455,#29263e); box-shadow:inset 0 1px 0 #fff1}
body[data-game='rhythm'] .overlay[data-presentation='result'] h2 {color:#fff1d7; font-variant-numeric:tabular-nums}
@keyframes rhythm-panel-in {from {opacity:.5} to {opacity:1}}
@media (prefers-reduced-motion:reduce) {
    body[data-game='rhythm'] .overlay:not([hidden]) {animation:none}
}

/* Final compact pass: reserve the playfield, keep long result text flexible. */
body[data-game='rhythm'] .mini-hud {gap:5px}
body[data-game='rhythm'] .mini-hud > span:first-child {color:#664489; border:1px solid #d8cbe8; background:linear-gradient(135deg,#f8f2ff,#e9e0f5); padding:2px 10px}
body[data-game='rhythm'] .mini-hud .clock {color:#58466e; min-width:48px}
body[data-game='rhythm'] .overlay[data-presentation='result'] .panel-detail {max-width:none; color:#eee0f9; overflow-wrap:anywhere}
body[data-game='rhythm'] .cast-name {color:#695777}
body[data-game='rhythm'] button:focus-visible {outline-color:#b998de}
@media (max-height:620px) {
    body[data-game='rhythm'] .mini-shell {gap:3px}
    body[data-game='rhythm'] .overlay[data-presentation='result'] {gap:6px; padding:6px 8px}
    body[data-game='rhythm'] .overlay[data-presentation='result'] h2 {font-size:17px}
}

/* Choices live inside the start/result panel, leaving the playing board intact. */
body[data-game='rhythm'] .course-options {position:relative; display:grid; grid-template-columns:1fr 1fr; gap:5px; width:100%; max-width:360px; max-height:144px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; flex:none; margin:4px 0}
body[data-game='rhythm'] .course-options button {min-height:44px; padding:6px; font-size:11px; line-height:1.4; border:1px solid #9b85b4; border-radius:10px; color:#eee4ff; background:#423352}
body[data-game='rhythm'] .course-options button[aria-pressed='true'] {border-color:#f0d6ff; background:#72528e; box-shadow:inset 0 0 0 1px #f0d6ff}
body[data-game='rhythm'] .overlay[data-presentation='result'] .course-options {order:3; max-width:none}
body[data-game='rhythm'] .overlay[data-presentation='result'] .panel-detail {flex:1 1 100%; line-height:1.5}
body[data-game='rhythm'] .overlay:not([data-presentation='result']) > * {flex-shrink:0}
body[data-game='rhythm'] .mini-hud .clock {font-size:11px; padding:6px}

/* Course browsing stays inside the start/result panels. */
body[data-game='rhythm'] .course-options button {text-align:left; min-height:66px; padding:7px 9px}
body[data-game='rhythm'] .course-options button span {display:block}
body[data-game='rhythm'] .course-name {font-size:12px; font-weight:700; overflow-wrap:anywhere}
body[data-game='rhythm'] .course-meta {font-size:10px; color:#e3d5f4; margin-top:3px}
body[data-game='rhythm'] .course-record {font-size:10px; color:#e7d2ac; margin-top:2px}
body[data-game='rhythm'] .course-filters {display:flex; flex-wrap:wrap; gap:4px; width:100%; max-width:360px; margin:3px 0; flex:none}
body[data-game='rhythm'] .course-filters button,
body[data-game='rhythm'] .course-toggle {min-height:44px; padding:6px 9px; border:1px solid #9b85b4; border-radius:10px; color:#eee4ff; background:#423352; font-size:11px}
body[data-game='rhythm'] .course-filters button {flex:1; white-space:nowrap}
body[data-game='rhythm'] .course-filters button[aria-pressed='true'] {border-color:#f0d6ff; background:#72528e}
body[data-game='rhythm'] .result-details {width:100%; font-size:11px; color:#e3d5f4; order:2}
body[data-game='rhythm'] .result-details summary {min-height:44px; padding:12px 0; cursor:pointer}
body[data-game='rhythm'] .result-details p {margin:0 0 6px; line-height:1.5}
body[data-game='rhythm'] .overlay[data-presentation='result'] .panel-detail {white-space:pre-line; font-size:12px}
body[data-game='rhythm'] .overlay[data-presentation='result'] .go {width:auto; min-width:96px; padding:0 12px; font-size:14px; order:1}
body[data-game='rhythm'] .overlay[data-presentation='result'] .course-toggle {order:1}
body[data-game='rhythm'] .overlay[data-presentation='result'] .course-filters {order:3; max-width:none}
body[data-game='rhythm'] .next-course {order:1; flex:1 1 100%; min-width:0; margin:0; color:#f2dfba; font-size:12px; line-height:1.5; overflow-wrap:anywhere}

/* One compact status strip above the notes; nothing covers a touch lane. */
body[data-game='rhythm'] .mini-shell {min-height:0}
body[data-game='rhythm'] .play-status {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:4px;
    flex:none;
}
body[data-game='rhythm'] .companion {min-width:0; min-height:56px; gap:5px; padding:0}
body[data-game='rhythm'] .companion > img {width:48px; height:48px; flex:none}
body[data-game='rhythm'] .companion::before {width:40px; height:40px; left:4px; top:8px}
body[data-game='rhythm'] .cast-name {margin:0 0 1px; font-size:10px; letter-spacing:0}
body[data-game='rhythm'] .speech {
    /* Reserve two lines so reactions do not move the judgement line. */
    min-height:calc(2.8em + 6px);
    margin:0;
    padding:2px 4px;
    font-size:12px;
    line-height:1.4;
    overflow-wrap:anywhere;
    border-radius:6px;
    box-shadow:none;
}
body[data-game='rhythm'] .mini-hud {
    display:grid;
    grid-template-columns:minmax(64px,auto) 44px;
    grid-template-rows:auto auto;
    gap:2px 4px;
    min-height:44px;
    padding:0;
}
body[data-game='rhythm'] .mini-hud > span:first-child {grid-area:1 / 1; justify-content:center; gap:3px; padding:0 4px}
body[data-game='rhythm'] .mini-hud strong {font-size:16px}
body[data-game='rhythm'] .mini-hud .clock {grid-area:2 / 1; margin:0; min-width:0; padding:0 3px; font-size:10px; line-height:18px; white-space:nowrap}
body[data-game='rhythm'] #pause {grid-area:1 / 2 / 3 / 3; align-self:center; height:44px}
body[data-game='rhythm'] .stage {min-height:180px}

@media (max-width:350px) {
    /* Narrow phones wrap the longest existing reaction into three lines. */
    body[data-game='rhythm'] .speech {min-height:calc(4.2em + 6px)}
}