/* Tetris: Vivid+Co / Refero. Obsidian, bone, chromatic pieces.
   https://styles.refero.design/style/8875b14e-c59a-492f-8780-8027a480f21c */
:root { color-scheme: dark; --obsidian:#101010; --surface:#191919; --bone:#fffdf9; --fog:#afb6bd; --ash:#383838; --prism-r:#ff6d6d; --prism-g:#9beaaf; --board-h:480px; --ui:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; min-height:100%; background:var(--obsidian); color:var(--bone); font-family:var(--ui); }
body { min-height:100dvh; }
button,input,select { font:inherit; }
button,a,select,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible { outline:2px solid var(--bone); outline-offset:3px; }
.tet-root,.tet-page { min-height:100dvh; display:flex; flex-direction:column; }
.tet-page { min-height:0; flex:1; }
.top { width:min(100%,960px); margin:0 auto; padding:12px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand { display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--bone); }
.brand-h { font-size:19px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; margin:0; }
.tools,.who { display:flex; align-items:center; gap:8px; }
.who { max-width:180px; }
.who span { max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.linkish { color:var(--bone); background:none; border:0; min-height:44px; padding:8px 10px; font-size:14px; text-decoration:none; border-radius:6px; }
.linkish:hover { background:#232323; }
.stage { flex:1; width:min(100%,760px); margin:0 auto; padding:0 24px 12px; min-height:0; }
.play { display:flex; flex-direction:column; gap:8px; }
.game-toolbar { display:flex; gap:16px; align-items:center; padding:8px 0; border-top:1px solid var(--ash); border-bottom:1px solid var(--ash); }
.mode-field,.level-field { display:flex; gap:10px; align-items:center; }
.game-toolbar label { color:var(--fog); font-size:14px; }
select { background:var(--surface); color:var(--bone); border:1px solid var(--ash); border-radius:6px; padding:8px; min-height:44px; font-size:14px; max-width:100%; }
.game-toolbar #start-btn { margin-left:auto; min-width:88px; }
.btn { display:inline-block; background:var(--bone); color:var(--obsidian); border:1px solid var(--bone); border-radius:6px; min-height:44px; padding:10px 18px; font-size:16px; text-decoration:none; }
.btn:hover { filter:brightness(.9); }
.btn.ghost { background:transparent; border-color:var(--ash); color:var(--bone); }
.btn.tight { padding:8px; font-size:14px; width:100%; margin-top:6px; }
kbd { font:inherit; font-size:12px; color:var(--fog); margin-left:4px; }
.run-stats { display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:12px; padding:5px 0; }
.stat span,.stat-label { display:block; color:var(--fog); font-size:12px; letter-spacing:.07em; text-transform:uppercase; margin-bottom:4px; }
.stat b { font-size:24px; font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-.025em; }
.score-stat b { font-size:28px; }
.time-stat { text-align:right; }
.cabinet-slot { display:flex; justify-content:center; min-height:0; }
.cabinet { width:100%; }
.desk { display:flex; gap:20px; justify-content:center; align-items:flex-start; }
.hud { display:flex; flex-direction:column; gap:24px; width:88px; flex:0 0 88px; padding-top:6px; }
.hud-right { text-align:right; }
.hud .stat b { font-size:20px; overflow-wrap:anywhere; }
.next { display:block; width:80px; height:80px; max-width:100%; background:#191919; border:1px solid var(--ash); border-radius:6px; }
.next-extra { height:64px; margin-top:8px; opacity:.72; }
.hud-right .next { margin-left:auto; }
.well-box { position:relative; width:calc(var(--board-h) / 2 + 12px); flex:none; }
.well-wrap { border:1px solid #515151; padding:5px; background:#080909; border-radius:8px; overflow:hidden; }
canvas#well { display:block; width:calc(var(--board-h) / 2); height:var(--board-h); background:#080909; touch-action:none; border-radius:3px; }
.well-box.danger .well-wrap { border-color:#ee886c; }
.over { position:absolute; inset:6px; display:none; background:rgba(16,16,16,.93); align-items:center; justify-content:center; text-align:center; }
.over.on { display:flex; flex-direction:column; gap:14px; padding:16px; }
.over #title,.over #pause-title,.over #result-title { font-size:clamp(21px,3vw,30px); font-weight:500; letter-spacing:-.04em; }
.over .btn { width:100%; max-width:210px; }
.eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:.13em; color:var(--fog); }
.note,.err { font-size:14px; line-height:1.5; color:var(--fog); margin:10px 0 0; }
.over-note { margin:0; font-size:14px; }
.over-score { font-size:16px; line-height:1.6; font-variant-numeric:tabular-nums; color:var(--fog); }
.err { color:var(--prism-r); }
.play-note { margin:0; padding:6px 10px; background:var(--surface); border-radius:6px; }
.play-note:empty { display:none; }
#countdown { background:rgba(16,16,16,.7); pointer-events:none; }
#countdown-number { font-size:80px; font-variant-numeric:tabular-nums; }
.goal-row { display:flex; justify-content:space-between; min-height:20px; font-size:13px; color:var(--fog); gap:8px; margin-top:3px; }
#feedback { color:var(--bone); text-align:right; }
.goal-track { background:#272727; height:3px; overflow:hidden; border-radius:2px; }
#goal-fill { background:var(--bone); width:0; height:100%; transition:width .25s ease; }
.controls { display:flex; justify-content:space-between; gap:clamp(16px,5vw,52px); padding:8px 0 0; touch-action:none; max-width:580px; width:100%; align-self:center; }
.move-pad { flex:1; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:48px 48px; gap:6px; }
.pad-label { grid-column:2; grid-row:1; align-self:center; text-align:center; color:var(--fog); font-size:10px; letter-spacing:.12em; }
.move-pad [data-act=left] { grid-column:1; grid-row:1 / 3; align-self:center; min-height:64px; }
.move-pad [data-act=right] { grid-column:3; grid-row:1 / 3; align-self:center; min-height:64px; }
.move-pad [data-act=soft] { grid-column:2; grid-row:2; }
.move-pad [data-act=soft] small,.action-pad [data-act=ccw] small { display:none; }
.action-pad { flex:.9; display:grid; grid-template-columns:1fr 1.8fr; grid-template-rows:48px 48px; gap:6px; }
.controls button { background:#202324; color:var(--bone); border:1px solid #434849; border-bottom-width:3px; border-radius:12px; min-width:44px; min-height:48px; padding:6px; user-select:none; touch-action:none; box-shadow:0 3px 0 #090b0b; }
.controls button>span { display:block; font-size:25px; line-height:1; }
.controls small { display:block; font-size:11px; margin-top:3px; white-space:nowrap; }
.controls button:hover { background:#2b3031; }
.controls button:active,.controls button.held { background:#fffdf9; color:#101010; transform:translateY(2px); box-shadow:none; }
.action-pad .rotate-control { display:flex; align-items:center; justify-content:center; gap:8px; background:#253832; border-color:#4b7566; }
.action-pad .rotate-control small { font-size:13px; margin:0; }
.controls .drop-control { grid-column:1 / 3; display:flex; align-items:center; justify-content:center; gap:10px; border-color:#7a827e; background:#333c38; }
.controls .drop-control small { font-size:13px; margin:0; }
.control-hint { text-align:center; color:var(--fog); font-size:12px; margin:8px 0 0; }
.touch-hint { display:none; }
@media(pointer:coarse) { .keyboard-hint { display:none; }.touch-hint { display:inline; } }
.scores-dlg { background:#171717; color:var(--bone); border:1px solid #494949; border-radius:12px; padding:20px; max-width:540px; width:calc(100% - 24px); max-height:88dvh; overflow:auto; }
.scores-dlg[open] { display:flex; flex-direction:column; }
.scores-dlg::backdrop { background:rgba(0,0,0,.78); }
.dlg-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex:none; margin-bottom:12px; }
.dlg-head h2 { font-size:23px; line-height:1.25; margin:0; font-weight:500; letter-spacing:-.03em; }
.dlg-table { min-height:0; max-height:60dvh; overflow:auto; overscroll-behavior:contain; touch-action:pan-y; }
.scores-dlg table { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.scores-dlg th,.scores-dlg td { padding:12px 6px; border-bottom:1px solid var(--ash); text-align:left; }
.scores-dlg th { position:sticky; top:0; background:#171717; color:var(--fog); font-size:12px; font-weight:400; text-transform:uppercase; }
.scores-dlg td:last-child,.scores-dlg th:last-child { text-align:right; }
.scores-dlg td:nth-child(2) { overflow-wrap:anywhere; }
.scores-dlg tr.mine td { color:var(--prism-g); }
.panel { width:100%; }
.panel label { display:block; font-size:14px; margin:14px 0 7px; color:var(--fog); }
input[type=email],input[type=text] { display:block; width:100%; min-height:48px; background:#222; color:var(--bone); border:1px solid #555; border-radius:6px; padding:10px; font-size:16px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; }
.row { display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 0; }
.help-body { overflow:auto; font-size:16px; line-height:1.55; }
.help-body p { margin:0 0 20px; }
.help-controls { display:grid; grid-template-columns:100px 1fr; gap:12px; font-size:14px; margin:0 0 24px; }
.help-controls dt { color:var(--fog); }.help-controls dd { margin:0; }
.check-label { display:flex; align-items:center; gap:12px; min-height:44px; }
.check-label input { width:20px; height:20px; }
#save-status { font-size:12px; }
@media(max-width:600px) {
  .top { padding:6px 12px; gap:4px; }.brand { gap:6px; }.brand-h { font-size:15px; letter-spacing:.08em; }.brand img { width:22px; height:22px; }
  .tools { gap:0; }.tools .linkish { padding:6px; font-size:12px; }.who { max-width:90px; }.who span { display:none; }
  .stage { padding:0 12px 10px; }.play { gap:6px; }.game-toolbar { gap:8px; padding:5px 0; }
  .mode-field,.level-field { gap:4px; }.game-toolbar label { display:none; }.game-toolbar select { padding:6px; font-size:14px; }
  .game-toolbar #start-btn { min-width:65px; padding:8px 10px; font-size:14px; }
  .run-stats { padding:2px 0; gap:8px; }.stat b { font-size:21px; }.score-stat b { font-size:25px; }
  .desk { gap:8px; }.hud { width:58px; flex-basis:58px; gap:18px; }.next { width:56px; height:56px; }.next-extra { height:44px; }
  .hud .stat b { font-size:16px; }.stat span { font-size:12px; letter-spacing:0; }.btn.tight { font-size:13px; padding:6px 2px; }kbd { display:none; }
  .over.on { gap:10px; padding:12px; }.over-note { font-size:13px; }.over .btn { padding:8px; font-size:14px; }
  .controls { gap:18px; padding-top:3px; }.controls button>span { font-size:23px; }.controls small { font-size:11px; }.action-pad { flex:.95; }

  .goal-row { font-size:12px; }.control-hint { font-size:12px; }.scores-dlg { padding:16px; }
}
@media(max-height:650px) { .control-hint { display:none; }.hud { gap:10px; }.next-extra { display:none; }.over.on { gap:8px; }.over .eyebrow { display:none; }.over-note { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }
html.reduced-motion * { transition:none !important; animation:none !important; }
@media(min-width:601px) and (max-height:600px) { .top { padding-block:4px; }.game-toolbar { padding-block:2px; }.controls button { min-height:48px; }.controls small { font-size:11px; }.run-stats { padding:0; } }
/* Keep result actions reachable even on short screens or enlarged text. */
.over.on { justify-content:flex-start; overflow-y:auto; overscroll-behavior:contain; }
.over.on > * { flex-shrink:0; }
.over.on > :first-child { margin-top:auto; }
.over.on > :last-child { margin-bottom:auto; }

/* Quiet surfaces, clear hierarchy, and receipts that remain useful offline. */
:root { --obsidian:#101413; --surface:#1b201e; --ash:#38413c; --fog:#b4beb8; --prism-g:#a4e3be; }
html,body { background:radial-gradient(ellipse at 50% 0,#1b2822 0, var(--obsidian) 55%); }
.stage { width:min(100%,700px); }
.brand-h { font-weight:600; }
.score-stat b { font-weight:600; color:#d3f4df; }
.game-toolbar { border-top:0; }
.well-wrap { border-color:#68786e; box-shadow:0 12px 42px #0004,0 0 0 4px #ffffff03; }
.over { background:rgba(13,19,16,.94); }
.over .btn:not(.ghost) { background:#d3f4df; border-color:#d3f4df; font-weight:600; }
#over-note { color:#c9e6d5; }
.next { background:#181e1a; border-color:#34453a; }
#goal-fill { background:#a4e3be; }
#hold-btn { border-color:#53665a; }
#hold-btn:disabled { opacity:.38; }
.score-views { display:flex; gap:6px; background:#101413; border:1px solid var(--ash); border-radius:9px; padding:4px; margin-bottom:18px; flex:none; }
.score-views button { flex:1; min-height:44px; padding:8px; border:0; border-radius:6px; background:transparent; color:var(--fog); }
.score-views button[aria-pressed=true] { background:#304438; color:#e1f9e9; }
.record-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.record-summary>div { padding:14px; background:#222b25; border:1px solid #35473c; border-radius:8px; }
.record-summary span { display:block; font-size:12px; color:var(--fog); margin-bottom:6px; }
.record-summary b { font-size:27px; font-weight:500; font-variant-numeric:tabular-nums; }
.sync-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0; }
.sync-row .note { margin:0; font-size:13px; }
#scores-signin { width:100%; margin:0 0 12px; font-size:14px; }
.run-history { max-height:40dvh; overflow:auto; overscroll-behavior:contain; }
.run-card { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--ash); }
.run-card strong { display:block; font-size:14px; font-weight:500; }
.run-card span { display:block; color:var(--fog); font-size:11px; line-height:1.5; margin-top:4px; }
.run-card>div:last-child { text-align:right; flex-shrink:0; }
.run-card b { font-weight:500; font-size:20px; font-variant-numeric:tabular-nums; }
.run-card .saved { color:#a4e3be; }.run-card .pending { color:#dfc796; }
.history-empty { color:var(--fog); text-align:center; padding:24px 8px; font-size:14px; line-height:1.6; }
.setting-label { display:block; margin-bottom:8px; font-size:14px; }.help-body select { width:100%; margin-bottom:14px; }
.dlg-keep { font-size:12px; }
@media(max-width:380px) { .top { padding-inline:8px; }.stage { padding-inline:8px; }.brand-h { font-size:14px; }.tools .linkish { padding-inline:5px; }.controls { gap:12px; }.desk { gap:6px; }.hud { flex-basis:52px; width:52px; }.who { max-width:62px; } }
@media(max-height:700px) { .control-hint { display:none; }.over.on { gap:8px; }.over-note { font-size:12px; } }

/* Input-aware desktop layout, compact phones, and short landscape screens. */
.stage { width:min(100%,820px); padding:0 max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.top { padding-top:max(10px,env(safe-area-inset-top)); }
body { overscroll-behavior-y:none; }
.keyboard-guide { display:none; width:min(100%,640px); align-self:center; justify-content:center; gap:12px; padding:12px 14px; background:#18201b; border:1px solid #35473b; border-radius:12px; }
.input-keyboard .keyboard-guide { display:flex; }
.input-keyboard .controls,.input-keyboard .control-hint { display:none; }
.input-touch .keyboard-hint { display:none; }
.input-touch .touch-hint { display:inline; }
.key-action { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:7px; }
.key-action>span { display:flex; gap:4px; }
.keyboard-guide kbd { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; margin:0; padding:2px 6px; font-size:14px; font-weight:500; color:#e3eee7; background:#2a362e; border:1px solid #56675c; border-bottom-width:3px; border-radius:5px; line-height:1; }
.keyboard-guide .wide-key { min-width:54px; font-size:12px; }
.keyboard-guide kbd.held { color:#122019; background:#d3f4df; border-color:#a4e3be; transform:translateY(1px); }
.key-action small { font-size:11px; color:var(--fog); text-align:center; white-space:nowrap; }
#fullscreen-btn { margin-bottom:18px; width:100%; }
#start-hint { font-size:12px; }
.next { image-rendering:auto; }
@media(max-width:600px) {
  .top { padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right)); }
  .stage { padding-inline:8px; }
  .game-toolbar { min-width:0; gap:6px; }
  .mode-field { flex:1; min-width:0; }.mode-field select { width:100%; min-width:0; }
  .level-field { flex:0 1 100px; min-width:0; }.level-field select { min-width:0; }
  .game-toolbar #start-btn { min-width:62px; flex:none; padding-inline:8px; }
  .desk { gap:6px; }.hud { width:44px; flex-basis:44px; gap:16px; }
  .next { width:44px; height:44px; }.next-extra { height:34px; margin-top:6px; }
  .hud .stat b { font-size:13px; line-height:1.3; }.hud .stat span { font-size:10px; line-height:1.25; }
  .btn.tight { min-height:44px; font-size:11px; }
  .keyboard-guide { gap:8px; padding:10px 6px; flex-wrap:wrap; }
  .key-action { flex:1 1 26%; }.keyboard-guide kbd { display:inline-flex; }
}
.input-touch #over.on { position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:calc(100% - 32px); max-width:400px; max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:22px; gap:12px; border:1px solid #617468; border-radius:16px; background:#142019; box-shadow:0 0 0 100vmax #000b,0 20px 70px #000a; z-index:10; }
.input-touch #over .over-note { max-width:290px; }
html.wide-short .top { padding-block:max(4px,env(safe-area-inset-top)) 4px; max-width:1100px; }
html.wide-short .stage { width:min(100%,1100px); padding-bottom:max(8px,env(safe-area-inset-bottom)); }
html.wide-short .play { display:grid; grid-template-columns:minmax(132px,1fr) auto minmax(152px,1fr); grid-template-rows:auto auto auto 3px 1fr; grid-template-areas:"toolbar cabinet controls" "stats cabinet controls" "goal cabinet controls" "progress cabinet controls" "note cabinet controls"; column-gap:16px; row-gap:8px; align-items:start; }
html.wide-short .cabinet-slot { grid-area:cabinet; align-self:start; }
html.wide-short .game-toolbar { grid-area:toolbar; display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:6px; padding:4px 0; }
html.wide-short .game-toolbar label { display:none; }
html.wide-short .mode-field { grid-column:1 / 3; }.wide-short .mode-field select,.wide-short .level-field select { width:100%; min-width:0; padding:6px; }
html.wide-short .game-toolbar #start-btn { min-width:64px; margin:0; padding:8px 4px; font-size:14px; }
html.wide-short .run-stats { grid-area:stats; grid-template-columns:1fr 1fr; gap:8px; padding:0; }
html.wide-short .run-stats .stat b { font-size:22px; }.wide-short .time-stat { text-align:left; }
html.wide-short .goal-row { grid-area:goal; flex-direction:column; gap:2px; font-size:11px; margin:0; }.wide-short #feedback { text-align:left; }
html.wide-short .goal-track { grid-area:progress; width:100%; }
html.wide-short .play-note { grid-area:note; font-size:11px; }
html.wide-short .controls { grid-area:controls; flex-direction:column; gap:12px; align-self:center; padding:0; width:100%; max-width:220px; justify-self:center; }
html.wide-short .move-pad { flex:none; grid-template-rows:48px 48px; }
html.wide-short .action-pad { flex:none; grid-template-rows:48px 48px; }
html.wide-short .keyboard-guide { grid-area:controls; align-self:center; flex-wrap:wrap; padding:12px; gap:12px; max-width:240px; }
html.wide-short .key-action { flex:1 1 36%; }
html.wide-short .desk { gap:6px; }.wide-short .hud { width:44px; flex-basis:44px; gap:12px; }
html.wide-short .next { width:44px; height:44px; }.wide-short .next-extra { display:none; }
html.wide-short .hud .stat b { font-size:13px; }.wide-short .hud .stat span { font-size:10px; }
html.wide-short .hud .btn.tight { font-size:11px; padding:6px 2px; }
html.wide-short .control-hint { display:none; }
/* Preserve the chosen keyboard layout even in a landscape window. */
html.wide-short.input-keyboard .controls { display:none; }
html.wide-short.input-touch .keyboard-guide { display:none; }

/* Generated companion frames occupy their own rail slot; never intercept input. */
.hud-left { position:relative; }
.chibi-dock { position:absolute; left:0; width:100%; max-width:104px; aspect-ratio:1; pointer-events:none; isolation:isolate; }
.chibi-sprite { position:relative; width:100%; height:100%; background-size:400% 300%; background-repeat:no-repeat; border-radius:12px; }
.chibi-dock[data-combo="1"] .chibi-sprite { box-shadow:0 0 14px #8fe3c455; }
.chibi-dock[data-combo="2"] .chibi-sprite { box-shadow:0 0 21px #8fe3c499,0 0 3px #e6c477; }
.chibi-dock[data-combo="3"] .chibi-sprite { box-shadow:0 0 28px #e6c477bb,0 0 8px #8fe3c4; }
.chibi-dock:not([data-combo="0"])[data-combo]::before { content:""; position:absolute; inset:-7px; border:1px solid #8fe3c477; border-radius:50%; animation:chibi-aura 1.6s ease-out infinite; }
@keyframes chibi-aura { 0% { transform:scale(.86); opacity:.75; } 100% { transform:scale(1.12); opacity:0; } }
.chibi-dock[data-combo="2"]::after,.chibi-dock[data-combo="3"]::after { content:""; position:absolute; inset:10% auto auto 5%; width:3px; height:3px; background:#f7dda0; box-shadow:72px 16px #a4edcf,11px 65px #a4edcf,63px 58px #f7dda0; animation:combo-sparks 1.4s ease-out infinite; }
@keyframes combo-sparks { 0% { transform:translateY(8px); opacity:0; } 35% { opacity:.8; } 100% { transform:translateY(-8px); opacity:0; } }
.anime-fx { position:absolute; inset:6px; overflow:hidden; border-radius:3px; pointer-events:none; z-index:3; }
.anime-fx * { pointer-events:none; }
.over { z-index:2; }
.anime-danger .anime-fx { box-shadow:inset 0 0 34px 9px #c64d393d; }
.fx-shockwave { position:absolute; width:20%; height:10px; border:2px solid #bdf5dd; border-radius:50%; animation:drop-ring .44s ease-out forwards; }
.fx-dust { position:absolute; width:3px; height:3px; border-radius:1px; background:#dfcc96; animation:drop-dust .4s ease-out forwards; }
.fx-clear-row { position:absolute; left:0; width:100%; height:5%; background:#e4fff3bb; box-shadow:0 0 12px #a4edcf66; animation:row-slice .3s ease-out forwards; }
.fx-speed-lines { position:absolute; inset:0; opacity:.35; background:repeating-linear-gradient(-12deg,transparent 0 35px,#a4edcf55 36px,transparent 38px 62px); animation:speed-lines .38s ease-out forwards; }
.fx-cut-in { position:absolute; right:0; top:24%; width:46%; padding:8px 4px 12px; background:linear-gradient(145deg,#163d36f5,#101010f5 65%); border-left:2px solid #b0eccc; border-block:1px solid #e6c477; border-radius:10px 0 0 10px; text-align:center; animation:anime-cut-in 1.6s ease both; }
.fx-cut-in b { display:block; font-size:clamp(12px,1.5vw,18px); line-height:1.1; color:#f7dda0; font-style:italic; }
.fx-cut-in span { display:block; margin-top:5px; font-size:12px; color:#cbddd5; }
.fx-portrait { width:100%; aspect-ratio:1; background-size:400% 300%; background-repeat:no-repeat; }
.fx-level { position:absolute; top:9%; left:0; width:100%; text-align:center; color:#ffe6a0; font-weight:800; font-style:italic; font-size:clamp(24px,4vw,42px); text-shadow:0 2px 0 #123c35,0 0 16px #e6c47799; animation:level-rise 1.8s ease both; }
.fx-transform { position:absolute; inset:0; border:3px solid #e6c477; border-radius:3px; box-shadow:inset 0 0 26px #9af2d177; animation:transform-flare .7s ease-out both; }
.fx-petal { position:absolute; width:5px; height:8px; border-radius:70% 15% 70% 15%; background:#efcee2; animation:perfect-petal 1.8s ease-out var(--delay) both; }
.fx-petal:nth-child(3n) { width:4px; height:4px; border-radius:0; background:#f6d783; }
.fx-still { animation:none; }
@keyframes drop-ring { from { transform:translate(-50%,-50%) scale(.3); opacity:.9; } to { transform:translate(-50%,-50%) scale(2.2); opacity:0; } }
@keyframes drop-dust { to { transform:translate(var(--dx),var(--dy)); opacity:0; } }
@keyframes row-slice { 0%,20% { opacity:.65; transform:scaleX(1); } 100% { opacity:0; transform:scaleX(.2); } }
@keyframes speed-lines { to { transform:translateX(20%); opacity:0; } }
@keyframes anime-cut-in { 0% { transform:translateX(105%); opacity:0; } 12%,82% { transform:translateX(0); opacity:1; } 100% { transform:translateX(105%); opacity:0; } }
@keyframes level-rise { 0% { transform:translateY(8px) scale(.8); opacity:0; } 18%,75% { transform:none; opacity:1; } 100% { transform:translateY(-12px); opacity:0; } }
@keyframes transform-flare { from { opacity:.8; } to { opacity:0; } }
@keyframes perfect-petal { 0% { opacity:0; transform:scale(.2); } 15% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),100px) rotate(160deg); } }
html.reduced-motion .chibi-dock::before,html.reduced-motion .chibi-dock::after { display:none; }
@media(prefers-reduced-motion:reduce) { .chibi-dock::before,.chibi-dock::after { display:none; } }
#sound-volume { width:100%; min-height:44px; accent-color:#a4e3be; }
#sound-volume-value { float:right; font-variant-numeric:tabular-nums; }