@font-face{font-family:BrushKai;src:url('assets/brush-kai.woff2') format('woff2');font-display:swap}
:root{
  --paper:#faf9f5;--ink:#20221f;--soft:#5e615a;--line:#c9cbc2;
  --field:#0d1630;--focus:#335d83;--ease:cubic-bezier(.16,1,.3,1);--indigo:#111d38;--leaf:#c9a557;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans CJK SC','Microsoft YaHei',sans-serif;
  color:var(--ink);background:var(--paper);color-scheme:light;font-synthesis:none;
  scrollbar-color:#92958b var(--paper);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;min-width:280px}
::selection{background:#d8decf;color:var(--ink)}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--focus)}
button,select{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button{
  border:1px solid var(--line);border-radius:3px;background:transparent;
  min-height:38px;padding:8px 14px;line-height:1.2;
  transition:background-color 130ms,border-color 130ms,color 130ms,transform 130ms var(--ease);
}
button:hover{background:#e8ebe2;border-color:#8a9083}
button:active{background:#dce1d3;transform:translateY(1px);transition-duration:60ms}
button.primary{color:var(--paper);background:var(--ink);border-color:var(--ink)}
button.primary:hover{background:#444a40}
button:disabled{cursor:default;opacity:.43;transform:none}
select{background:var(--paper);border:1px solid var(--line);border-radius:3px;min-height:38px;padding:5px 25px 5px 9px}
button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
main{max-width:1280px;margin:auto;padding:20px 32px 40px}
.masthead{display:flex;justify-content:space-between;gap:20px;font-size:12px;line-height:1.5;padding-bottom:14px;border-bottom:1px solid var(--line)}
.masthead a{text-decoration:none}
.masthead a:hover{text-decoration:underline}
.title-row{display:flex;align-items:end;justify-content:space-between;gap:30px;margin:16px 0 14px}
h1{font-family:BrushKai,'Noto Serif CJK SC','Songti SC',serif;font-weight:400;font-size:42px;letter-spacing:.06em;line-height:1.2;margin:0 0 4px;text-wrap:balance}
.intro{font-family:'Noto Serif CJK SC','Songti SC',serif;margin:0;font-size:15px;line-height:1.7}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 11px;font-size:12px}
.playback,.settings,.feedback-controls{display:flex;gap:7px;align-items:center}
.settings{gap:14px;margin-left:auto}
.settings label,.brush-row label{display:flex;align-items:center;gap:7px;white-space:nowrap}
.feedback-controls{gap:6px}
.feedback-controls button{font-size:11px;padding:8px 10px;white-space:nowrap}
#sound-toggle[aria-pressed=true]{background:#e1e8da;border-color:#87957a;color:#334628}
#sound-toggle[aria-pressed=true]::before{content:'';display:inline-block;width:5px;height:5px;margin:0 6px 2px 0;border-radius:50%;background:currentColor}
#motion-toggle[aria-pressed=false]{background:#eeeee7;color:#585d52}
.field-wrap{position:relative;background:var(--field);border:1px solid #8f7744;outline:1px solid #d9c9a0;outline-offset:3px;box-shadow:0 22px 44px -26px #0b1430aa;isolation:isolate}
canvas{display:block;width:100%;height:clamp(330px,calc(100svh - 300px),660px);touch-action:none;cursor:crosshair;outline:none;background:var(--field)}
canvas:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.canvas-error{position:absolute;inset:0;display:grid;place-content:center;padding:30px;color:#9c3326;font-size:16px;background:var(--field)}
.canvas-error[hidden]{display:none}
.skip-opening{position:absolute;right:14px;bottom:14px;z-index:2;min-height:32px;padding:6px 12px;font-size:12px;color:#e6d6ae;background:#0d1630b3;border-color:#8f7744;letter-spacing:.08em}
.skip-opening:hover{background:#16244a;border-color:#c9a557;color:#fff3d6}
.skip-opening[hidden]{display:none}
.readout{padding:5px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--soft);border-bottom:1px solid var(--line)}
#cell-info{flex:1;text-align:center}
#stage-status{min-width:14ch;text-align:right;color:#496438;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:26ch}
.spirit{display:flex;align-items:center;gap:8px;white-space:nowrap;transition:color 160ms}
meter{width:72px;height:7px;appearance:none;border:none;background:#dedfd6;border-radius:0}
meter::-webkit-meter-bar{height:7px;border:0;background:#dedfd6;border-radius:0}
meter::-webkit-meter-optimum-value{background:#5c6b4c;border-radius:0;transition:background-color 160ms}
meter::-moz-meter-bar{background:#5c6b4c;transition:background-color 160ms}
.spirit[data-state=spent]{color:#86612f}
.spirit[data-state=spent] meter::-webkit-meter-optimum-value,.spirit[data-state=low] meter::-webkit-meter-optimum-value{background:#9a6034}
.spirit[data-state=low]{color:#8a4b2d}
.spirit[data-state=low] meter::-moz-meter-bar,.spirit[data-state=spent] meter::-moz-meter-bar{background:#9a6034}
output{min-width:58px}
.materials{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;padding:13px 0 11px}
.material[data-kind='99']{border-color:#5a4a26;background:#1a1d2e}
.material[data-kind='99'][aria-pressed=true]{background:#2a2414;border-color:#e6c06a}
#inner-toggle[aria-pressed=true]{background:#182a50;color:#f3e3bb;border-color:#c9a557}
.satchel{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 0 10px;font-size:12px;color:var(--soft)}
.satchel-label{font-family:BrushKai,serif;font-size:18px;color:#8f7744;letter-spacing:.1em}
.satchel-items{display:flex;gap:6px;flex-wrap:wrap}
.satchel-item{min-width:40px;min-height:40px;padding:4px 8px;font-family:BrushKai,serif;font-size:24px;line-height:1;color:var(--pigment);background:var(--indigo);border-color:#24345a}
.satchel-item:hover{background:#172748;border-color:#3a4d78}
.satchel-item[aria-pressed=true]{border-color:var(--leaf);background:#182a50;box-shadow:0 0 14px -5px var(--pigment)}
.satchel[data-empty=false] .satchel-hint{display:none}
.material{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:53px;padding:8px 6px;border-color:#24345a;border-radius:2px;background:var(--indigo)}
.material::after{content:'';position:absolute;left:25%;right:25%;bottom:5px;height:1px;background:var(--pigment,var(--material));opacity:0;transform:scaleX(.35);transition:opacity 150ms,transform 180ms var(--ease)}
.material .glyph{font-family:BrushKai,'Noto Serif CJK SC',serif;font-size:30px;line-height:1.1;color:var(--pigment,var(--material));transition:color 140ms,text-shadow 160ms}
.material .shortcut{font-size:11px;color:#8792aa;font-variant-numeric:tabular-nums}
.material:hover{border-color:#3a4d78;background:#172748}
.material:hover::after{opacity:.5;transform:scaleX(.7)}
.material[aria-pressed=true]{border-color:var(--leaf);background:#182a50;box-shadow:inset 0 0 0 1px #c9a55755,0 6px 16px -10px #0b1430}
.material[aria-pressed=true] .glyph{text-shadow:0 0 14px var(--pigment)}
.material[aria-pressed=true]::after{opacity:.8;transform:scaleX(1)}
.material[aria-pressed=true] .shortcut{color:var(--leaf)}
.material:active{background:#1d3260}
.material[data-kind='0'] .glyph{font-size:13px;font-family:inherit;letter-spacing:.1em}
.brush-row{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:var(--soft)}
.brush-row p{margin:0;line-height:1.7}
.brush-row select{min-height:32px}
.notice{font-size:12px;line-height:1.7;min-height:21px;color:#496438;margin:9px 0 6px}
.keyboard-help{font-size:11px;line-height:1.9;color:var(--soft);margin:6px 0 0}
.touch-move{display:none;gap:7px;align-items:center;font-size:11px;margin:12px 0}
.touch-move button{padding:8px 11px;min-width:44px;min-height:44px}
.touch-move #write-ahead{background:#e9ece3;border-color:#a6b09a;margin-left:3px}
.touch-move span{margin-right:auto;white-space:nowrap}
.rules{border-top:1px solid var(--line);margin-top:40px;padding-top:28px;display:grid;grid-template-columns:1fr 1.5fr;gap:65px}
h2{font-family:'Noto Serif CJK SC','Songti SC',serif;font-size:23px;font-weight:500;line-height:1.5;margin:0 0 12px;text-wrap:balance}
.rules p{font-size:13px;line-height:1.9;color:var(--soft);max-width:33ch;margin:0}
.rules dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:25px 30px}
.rules dt{font-size:13px;font-weight:600;margin-bottom:7px}
.rules dd{font-size:12px;line-height:1.85;color:var(--soft);margin:0}
footer{border-top:1px solid var(--line);margin-top:34px;padding-top:19px;font-size:11px;line-height:1.9;color:var(--soft);display:flex;gap:30px;align-items:start}
footer p{max-width:75ch;margin:0;flex:1}
footer a,footer span{white-space:nowrap}
.noscript{max-width:600px;margin:20px auto;padding:20px;color:#9c3326}
@media(pointer:coarse){.touch-move{display:flex}button,select{min-height:44px}}
@media(max-width:900px){
  main{padding:18px 24px 34px}
  .toolbar{flex-wrap:wrap;gap:10px}
  .settings{order:3;flex-basis:100%;margin-left:0}
  .feedback-controls{margin-left:auto}
  .settings select{min-height:32px}
  canvas{height:clamp(300px,calc(100svh - 330px),600px)}
  #stage-status{display:none}
  .rules{gap:32px}
}
@media(max-width:760px){
  main{padding:16px 20px 30px}
  .masthead{padding-bottom:12px}
  .title-row{margin:18px 0 17px;align-items:start}
  h1{font-size:32px;margin-bottom:5px}
  .intro{font-size:14px}
  canvas{height:auto;aspect-ratio:64/34}
  .rules{gap:25px;grid-template-columns:1fr}
  .rules p{max-width:65ch}
  .rules dl{gap:24px}
  .materials{gap:4px}
  .material{gap:6px}
  .material .glyph{font-size:26px}
  .material .shortcut{display:none}
  footer{flex-wrap:wrap;gap:10px 25px}
  footer p{flex-basis:100%}
  .readout{gap:8px}
  .spirit{gap:5px}
  meter{width:54px}
  #cell-info{display:none}
}
@media(max-width:480px){
  main{padding:14px 14px 28px}
  .masthead{font-size:11px;padding-bottom:10px}
  .title-row{margin:15px 0 15px}
  h1{font-size:30px;letter-spacing:.04em}
  .intro{font-size:13px;letter-spacing:0}
  .toolbar{gap:8px;margin-bottom:9px}
  .playback{gap:5px}
  .playback button{padding:8px 11px}
  .feedback-controls{gap:4px}
  .feedback-controls button{font-size:11px;padding:8px 7px}
  .settings{justify-content:space-between;gap:8px;font-size:11px}
  .settings label{gap:7px}
  .settings select{min-height:36px;padding-right:20px}
  canvas{aspect-ratio:36/34}
  .materials{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:10px 0 9px}
  .material{min-height:44px;padding:5px 2px}
  .material .glyph{font-size:24px}
  .material::after{left:25%;right:25%;bottom:4px}
  .material[data-kind='0'] .glyph{font-size:11px}
  .brush-row{gap:10px;font-size:11px;align-items:start}
  .brush-row p{max-width:26ch;line-height:1.7}
  .brush-row select{min-height:36px}
  .notice{font-size:11px;margin-top:8px}
  .rules{margin-top:27px;padding-top:23px}
  .rules dl{grid-template-columns:1fr;gap:21px}
  .rules dd{font-size:12px}
  .keyboard-help{font-size:11px;line-height:1.8}
  .touch-move{display:flex;gap:5px}
  .touch-move button{min-width:40px;padding:8px 9px}
  .readout{font-size:11px;min-height:34px}
  output{min-width:54px}
}
@media(max-width:350px){
  main{padding-inline:10px}
  .feedback-controls button{padding-inline:5px;font-size:11px}
  .playback button{padding-inline:8px;font-size:11px}
  .touch-move{gap:4px}
  .touch-move button{min-width:37px;padding-inline:7px}
  .material .glyph{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  button,.material::after,.material .glyph,.spirit,meter::-webkit-meter-optimum-value{transition:none}
  button:active{transform:none}
}
html[data-motion=reduced]{scroll-behavior:auto}
html[data-motion=reduced] button,html[data-motion=reduced] .material::after,html[data-motion=reduced] .material .glyph,html[data-motion=reduced] .spirit{transition:none}
html[data-motion=reduced] button:active{transform:none}

/* ---------- full-screen game: the canvas fills the window, controls float over it ---------- */
html,body{height:100%}
body.game{overflow:hidden;background:#0b1430;min-width:0;overscroll-behavior:none}
body.game main.stage{max-width:none;margin:0;padding:0;height:100%;position:relative}
.stage .field-wrap{position:fixed;inset:0;border:0;outline:0;box-shadow:none;background:#0d1630}
.stage canvas{width:100%;height:100%;aspect-ratio:auto;max-height:none}
.hud{position:fixed;left:0;right:0;z-index:3;pointer-events:none;display:flex;gap:10px;padding:10px 12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.hud>*{pointer-events:auto}
.hud-top{top:0;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding-top:max(10px,env(safe-area-inset-top))}
.hud-bottom{bottom:0;flex-direction:column;align-items:center;gap:6px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.hud-bottom>p,.hud-bottom>span{pointer-events:none}
.hud-panel{background:#0a1229b8;border:1px solid #c9a55747;border-radius:6px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 24px -14px #000}
.brand{padding:5px 12px}
.brand-link{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:#f3e3bb}
.brand-link:hover{color:#fff3d6}
.brand-title{font-family:BrushKai,serif;font-size:24px;letter-spacing:.06em;line-height:1.2}
.brand-by{font-size:11px;color:#bfae86}
.stage .toolbar{margin:0;padding:5px 8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:#dfd2b2}
.stage .toolbar .settings{margin-left:0;gap:10px}
.stage .toolbar button,.stage .toolbar select{min-height:30px;padding:4px 10px;font-size:12px;color:#efe3c4;background:#14203f;border:1px solid #3a4a72;border-radius:4px}
.stage .toolbar select{padding-right:22px}
.stage .toolbar button:hover{background:#1c2c55;border-color:#c9a557}
.stage .toolbar button.primary{background:#c9a557;color:#0b1430;border-color:#c9a557}
.stage .toolbar button[aria-pressed=true]{background:#2a3762;border-color:#c9a557;color:#f3e3bb}
.stage .toolbar button:disabled{opacity:.4}
.stage .readout{border:0;padding:6px 12px;min-height:0;gap:12px;color:#dfd2b2;display:flex;align-items:center;font-size:12px}
.stage #cell-info{flex:none;color:#bfae86;min-width:15ch;text-align:left}
.stage .spirit{color:#efe3c4}
.stage meter{width:90px;background:#1d2a4c}
.stage meter::-webkit-meter-bar{background:#1d2a4c}
.stage meter::-webkit-meter-optimum-value{background:#c9a557}
.stage meter::-moz-meter-bar{background:#c9a557}
.stage .tray{display:flex;align-items:center;gap:12px;padding:6px 8px;max-width:calc(100vw - 24px);overflow-x:auto}
.stage .materials{display:flex;gap:5px;padding:0}
.stage .material{min-width:46px;min-height:46px;padding:4px 6px;gap:4px}
.stage .material .glyph{font-size:26px}
.stage .material .shortcut{font-size:10px}
.stage .satchel{padding:0;min-height:0;color:#bfae86;white-space:nowrap}
.stage .satchel-label{color:#c9a557}
.stage .notice,.stage #stage-status,.stage .material-hint{display:block;margin:0;font-size:12px;line-height:1.6;color:#efe3c4;text-shadow:0 1px 3px #000,0 0 12px #000;text-align:center;max-width:min(92vw,760px);min-height:0}
.stage #stage-status{color:#f3d48b;font-size:13px;max-width:none}
.stage .material-hint{color:#bfae86;font-size:11px}
.stage .touch-move{margin:0;padding:6px 8px;color:#dfd2b2}
.stage .touch-move button{color:#efe3c4;background:#14203f;border-color:#3a4a72}
.stage .skip-opening{z-index:4;right:14px;bottom:auto;top:76px}
.manual{position:fixed;inset:0;z-index:10;background:#050a18b8;display:grid;place-items:center;padding:20px}
.manual[hidden]{display:none}
.manual-card{position:relative;background:var(--paper);color:var(--ink);max-width:980px;width:100%;max-height:calc(100dvh - 40px);overflow:auto;border-radius:6px;padding:28px 32px 24px;box-shadow:0 30px 80px -20px #000}
.manual-close{position:absolute;top:14px;right:14px}
.manual h1{font-size:34px}
.manual .rules{margin-top:18px}
.manual footer{margin-top:26px}
@media(max-width:900px){.stage #cell-info{display:none}}
@media(max-width:760px){
  .hud-top{gap:6px;padding:8px}
  .brand-title{font-size:20px}
  .stage .toolbar{gap:6px;padding:4px 6px}
  .stage .toolbar .settings{gap:6px}
  .stage .toolbar label{font-size:11px;gap:4px}
  .stage .toolbar button,.stage .toolbar select{min-height:30px;padding:3px 7px;font-size:11px}
  .stage .readout{padding:4px 8px}
  .stage meter{width:60px}
  .stage .material{min-width:40px;min-height:40px;padding:3px 4px}
  .stage .material .glyph{font-size:22px}
  .stage .material .shortcut{display:none}
  .stage .satchel-hint{display:none}
  .manual-card{padding:20px 18px}
  .stage .skip-opening{top:auto;bottom:150px}
}

/* The dock holds the palette and touch controls; the canvas ends at its top edge. */
.stage .field-wrap{bottom:var(--dock,0px)}
.dock{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto}
.stage .material-hint{display:none}
.stage .material[data-kind='0'] .glyph{font-size:13px}
@media(max-width:760px){
  .stage .tray{flex-direction:column;gap:6px;overflow:visible}
  .stage .materials{flex-wrap:wrap;justify-content:center}
}

/* 新手引导: a card under the top HUD; targets pulse in gold. */
.guide{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--hud-top,64px) + 8px);z-index:6;width:min(560px,calc(100vw - 24px));background:#0a1229eb;border:1px solid #c9a557;border-radius:8px;padding:10px 16px 12px;color:#f3e3bb;box-shadow:0 0 0 1px #c9a55733,0 18px 40px -16px #000,0 0 32px -12px #c9a557}
.guide[hidden]{display:none}
.guide-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.guide-step{font-size:11px;color:#c9a557;letter-spacing:.12em}
.guide-skip,.guide-done,.guide-restart{min-height:28px;padding:3px 10px;font-size:12px;color:#efe3c4;background:#14203f;border:1px solid #3a4a72;border-radius:4px}
.guide-skip:hover,.guide-done:hover{border-color:#c9a557;background:#1c2c55}
.guide-done{margin-top:2px;background:#c9a557;color:#0b1430;border-color:#c9a557}
.guide-text{margin:6px 0 2px;font-size:15px;line-height:1.75}
.guide-text b{color:#ffe7a6;font-weight:600}
.guide.flash{animation:guide-flash .7s ease-out}
@keyframes guide-flash{0%{box-shadow:0 0 0 2px #ffe9a8,0 0 46px 8px #e6c06a}100%{box-shadow:0 0 0 1px #c9a55733,0 18px 40px -16px #000,0 0 32px -12px #c9a557}}
.guide-target{outline:2px solid #e6c06a;outline-offset:3px;animation:guide-pulse 1.1s ease-in-out infinite}
@keyframes guide-pulse{50%{outline-color:#fff3d6;box-shadow:0 0 18px 3px #e6c06a88}}
.guide-restart{position:absolute;top:14px;right:74px;color:var(--ink);background:transparent;border-color:var(--line)}
@media(prefers-reduced-motion:reduce){.guide-target,.guide.flash{animation:none}}
@media(max-width:760px){.guide-text{font-size:14px}.guide{padding:8px 12px 10px}.guide-restart{position:static;margin:0 0 10px}}

/* 渡劫: the 道心 bar under the top HUD, a calligraphic banner for each wave, and the end card. */
.stage .toolbar button.trial-toggle{color:#ffe2b8;background:#3a1612;border-color:#a0472f}
.stage .toolbar button.trial-toggle:hover{background:#561d15;border-color:#e6c06a}
.stage .toolbar button.trial-toggle[aria-pressed=true]{background:#14203f;border-color:#3a4a72;color:#efe3c4}
.trial-hud{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--hud-top,64px) + 8px);z-index:5;display:flex;align-items:center;gap:14px;padding:6px 14px;background:#0a1229d0;border:1px solid #a0472f88;border-radius:6px;color:#efe3c4;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 8px 24px -14px #000;pointer-events:none}
.trial-hud[hidden]{display:none}
.trial-wave{font-family:BrushKai,serif;font-size:20px;letter-spacing:.08em;color:#f3d48b}
.daoxin{display:flex;align-items:center;gap:8px;color:#ffd9c9}
.daoxin meter{width:min(240px,34vw);height:9px;background:#2a1520;border-radius:0}
.daoxin meter::-webkit-meter-bar{height:9px;background:#2a1520;border:0;border-radius:0}
.daoxin meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#b8322a,#ff7a52);transition:width .25s}
.daoxin meter::-webkit-meter-suboptimum-value,.daoxin meter::-webkit-meter-even-less-good-value{background:#ff4b3a}
.daoxin meter::-moz-meter-bar{background:linear-gradient(90deg,#b8322a,#ff7a52)}
.daoxin output{min-width:64px}
.trial-left{color:#cdb9ff;min-width:5em}
.trial-hud.hit{animation:trial-hit .35s ease-out}
@keyframes trial-hit{0%{box-shadow:0 0 0 2px #ff5a45,0 0 30px 6px #ff3a2a88;transform:translateX(-50%) scale(1.04)}100%{box-shadow:0 8px 24px -14px #000;transform:translateX(-50%)}}
.trial-banner{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;opacity:0;text-align:center}
.trial-banner span{font-family:BrushKai,serif;font-size:clamp(44px,8vw,96px);letter-spacing:.12em;color:#ffe9b8;text-shadow:0 0 18px #e6a64a,0 0 46px #b8322a,0 3px 8px #000}
.trial-banner small{font-size:clamp(13px,1.6vw,17px);color:#f3e3bb;text-shadow:0 1px 4px #000,0 0 12px #000;letter-spacing:.1em}
.trial-banner.show{animation:trial-banner 2.6s var(--ease) forwards}
.trial-banner.thunder span{color:#efe6ff;text-shadow:0 0 18px #a88cff,0 0 50px #6a4cff,0 3px 8px #000}
.trial-banner.win span{color:#fff3d6;text-shadow:0 0 24px #ffd77a,0 0 70px #e6a64a,0 3px 8px #000}
@keyframes trial-banner{0%{opacity:0;transform:translate(-50%,-50%) scale(1.25);filter:blur(6px)}14%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-56%) scale(.98)}}
.trial-end{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:#050a1899;padding:20px}
.trial-end[hidden]{display:none}
.trial-end-card{width:min(440px,100%);background:#0a1229f2;border:1px solid #c9a557;border-radius:8px;padding:22px 24px 20px;color:#f3e3bb;text-align:center;box-shadow:0 0 0 1px #c9a55733,0 30px 70px -20px #000,0 0 48px -16px #c9a557}
.trial-end-card h2{font-family:BrushKai,serif;font-weight:400;font-size:44px;letter-spacing:.12em;margin:0 0 6px;color:#ffe2b8}
.trial-end.won .trial-end-card h2{color:#fff3d6;text-shadow:0 0 22px #e6a64a}
.trial-end-card p{margin:0 0 16px;font-size:14px;line-height:1.8;color:#e6dcc0}
.trial-end-actions{display:flex;gap:10px;justify-content:center}
.trial-end-actions button{min-height:36px;padding:6px 16px;font-size:14px;color:#efe3c4;background:#14203f;border:1px solid #3a4a72;border-radius:4px}
.trial-end-actions button.primary{background:#c9a557;color:#0b1430;border-color:#c9a557}
.trial-end-actions button:hover{border-color:#e6c06a}
@media(prefers-reduced-motion:reduce){.trial-banner.show{animation:trial-banner-still 2.6s linear forwards}.trial-hud.hit{animation:none}}
@keyframes trial-banner-still{0%,85%{opacity:1}100%{opacity:0}}
@media(max-width:760px){.trial-hud{gap:8px;padding:4px 10px;font-size:12px}.trial-wave{font-size:17px}.trial-left{display:none}}