:root {
  --burgundy:#4a1730;
  --burgundy-2:#781f49;
  --wine:#2b1022;
  --brass:#d7a94c;
  --cream:#f5e6bd;
  --ink:#191219;
  --lime:#b7d54a;
  --danger:#b12d37;
  --header-h:68px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#160d17;color:#fff}
button,input,select{font:inherit}
button{touch-action:manipulation}
a{color:#ffe176}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.17;
  background-image:linear-gradient(rgba(255,255,255,.035) 50%,rgba(0,0,0,.035) 50%);
  background-size:100% 4px;mix-blend-mode:overlay;
}

.app-shell{position:relative;width:100%;height:100%;background:#170d18}
.game-header{
  position:relative;z-index:60;height:var(--header-h);display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.26),transparent 21%),
    linear-gradient(180deg,#722249 0%,#42132e 58%,#260c1f 100%);
  border-bottom:4px ridge #dfb85d;box-shadow:0 4px 14px #000a,inset 0 -2px 0 #120611;
}
.header-brand{display:flex;flex-direction:column;line-height:.83;min-width:76px;text-shadow:2px 2px 0 #000}
.header-brand-main{font-family:"Arial Black",Impact,sans-serif;font-size:22px;letter-spacing:2px;color:#ffe06e}
.header-brand-sub{font-size:8px;letter-spacing:1.5px;color:#fff2bc}
.player-hud-name{font-family:"Arial Black",Impact,sans-serif;font-size:clamp(12px,1.4vw,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30vw;color:#fff2c6;text-shadow:2px 2px 0 #000}
.hud-cluster{margin-left:auto;display:flex;align-items:center;gap:8px;height:100%}
.hud-pill,.digital-clock{display:flex;align-items:center;justify-content:center;height:40px;min-width:68px;padding:0 11px;border:2px outset #e9c368;border-radius:9px;background:linear-gradient(#402b24,#171214);font-family:"Arial Black",Impact,sans-serif;color:#ffe16f;box-shadow:inset 0 0 9px #000,0 2px 0 #000;font-size:18px;text-shadow:0 0 5px #f2bd3a88}
.rat-mini{font-size:20px;margin-right:5px;filter:saturate(.4) contrast(1.2)}
.money-pill{color:#c9f477}
.digital-clock{display:none;min-width:74px;letter-spacing:1px;color:#f4ffca}
.analog-clock{width:52px;height:52px;filter:drop-shadow(2px 3px 2px #000)}

.stage{position:relative;width:100%;height:calc(100% - var(--header-h));overflow:hidden;background:#070507;isolation:isolate}
#gameCanvas{display:block;width:100%;height:100%;background:#111;outline:none;cursor:crosshair;touch-action:none}
#gameCanvas:focus-visible{box-shadow:inset 0 0 0 4px #ffe06e}

.screen-layer,.modal-layer{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:20px;z-index:50;background:radial-gradient(circle at 50% 40%,rgba(84,37,70,.5),rgba(8,4,8,.9));overflow:auto}
.screen-layer.is-visible,.modal-layer.is-visible{display:flex}
.title-screen{background:
  radial-gradient(circle at 50% 32%,rgba(213,172,69,.28),transparent 24%),
  linear-gradient(rgba(16,8,16,.22),rgba(10,4,10,.86)),
  repeating-linear-gradient(90deg,#29152b 0 42px,#241126 42px 84px);
}
.title-screen::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 45%,rgba(255,255,255,.05) 49%,transparent 53%);animation:shineSweep 7s linear infinite;pointer-events:none}
@keyframes shineSweep{from{transform:translateX(-110%)}to{transform:translateX(110%)}}

.flash-panel{position:relative;border:5px ridge #d9b45d;border-radius:18px;background:
  linear-gradient(180deg,rgba(255,255,255,.2),transparent 15%),
  linear-gradient(145deg,#5a2142,#2c1028 65%,#160a18);
  box-shadow:0 14px 30px #000c,inset 0 0 0 3px #7c3a5b,inset 0 -14px 30px #0007;
}
.title-card{width:min(720px,94vw);padding:34px 38px 24px;text-align:center;transform:rotate(-.25deg)}
.title-kicker{font-size:11px;letter-spacing:2.4px;color:#f8cf77;margin-bottom:14px}
.title-card h1{margin:0;text-transform:uppercase;line-height:.84;text-shadow:0 4px 0 #1b0613,0 8px 18px #000}
.title-card h1 span{display:block;font-family:Trebuchet MS,Verdana,sans-serif;font-size:clamp(26px,5vw,54px);font-style:italic;color:#ffd96e;transform:skew(-8deg)}
.title-card h1 strong{display:block;font-family:"Arial Black",Impact,sans-serif;font-size:clamp(40px,8vw,84px);letter-spacing:-3px;color:#fff1bf;-webkit-text-stroke:2px #371129}
.title-subtitle{display:inline-block;margin:16px 0 8px;padding:7px 17px;transform:rotate(1deg);background:#b9d54a;color:#1d2410;border:4px outset #e7f68f;font-family:"Arial Black",Impact,sans-serif;letter-spacing:4px;box-shadow:4px 5px 0 #160811}
.title-rat-row{display:flex;justify-content:center;gap:24px;align-items:center;font-size:31px;margin:8px 0 16px;animation:bob 1.4s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-4px) rotate(-1deg)}}
.license-line{font-size:11px;color:#d9cbaa;line-height:1.5;margin:18px auto 0;max-width:540px}

.chrome-button{position:relative;border:3px outset #f0cb70;border-radius:10px;padding:10px 18px;background:
 linear-gradient(180deg,#fff2a6 0%,#e4b951 48%,#9f5c25 52%,#693117 100%);color:#251108;font-family:"Arial Black",Impact,sans-serif;font-weight:900;letter-spacing:.8px;text-shadow:0 1px 0 #fff8;box-shadow:0 4px 0 #190b07,0 7px 12px #0007;cursor:pointer;transition:filter .08s,transform .08s}
.chrome-button:hover,.chrome-button:focus-visible{filter:brightness(1.18) saturate(1.15);outline:3px solid #fff5b3;outline-offset:2px}
.chrome-button:active{border-style:inset;transform:translateY(3px);box-shadow:0 1px 0 #190b07}
.primary-button{min-width:210px;font-size:20px}
.icon-button{width:42px;height:42px;min-width:42px;padding:0;border-radius:10px;font-size:29px;line-height:1}
.danger-button{background:linear-gradient(#ffaaa6,#d74745 48%,#851d23 52%,#4a1017);color:#fff}

.setup-screen{background:
  radial-gradient(circle at 50% 20%,rgba(201,164,74,.2),transparent 30%),
  repeating-linear-gradient(135deg,#2d1429 0 16px,#251023 16px 32px)}
.setup-card{width:min(760px,95vw);padding:24px 28px;display:grid;gap:15px;max-height:calc(100% - 20px);overflow:auto}
.setup-heading{text-align:center}.setup-heading h2{margin:6px 0 0;font-family:"Arial Black",Impact,sans-serif;font-size:clamp(25px,4vw,42px);color:#fff0bd;text-shadow:3px 3px 0 #1b0715}
.small-badge{display:inline-block;padding:5px 10px;background:#bccf58;color:#1e250f;border:2px outset #eef6a2;font-size:10px;font-weight:bold;letter-spacing:1px;transform:rotate(-1deg)}
.field-row{display:grid;grid-template-columns:minmax(100px,160px) 1fr;align-items:center;gap:12px;font-weight:bold;color:#ffe9aa}
.field-row small{grid-column:2;font-weight:normal;color:#cbbfd0;font-size:10px;margin-top:-6px}
input[type="text"],input:not([type]),select,#aliasInput{width:100%;border:3px inset #c7a657;border-radius:7px;background:#fff3d2;color:#261522;padding:9px 11px;box-shadow:inset 2px 3px 6px #7b684c;font-weight:bold}
fieldset{border:2px groove #d5ae58;border-radius:10px;padding:10px 12px}legend{padding:0 8px;color:#ffe6a2;font-weight:bold}
.segmented-control{display:grid;grid-template-columns:1fr 1fr;gap:8px}.segmented-control label{position:relative}.segmented-control input{position:absolute;opacity:0}.segmented-control span{display:block;text-align:center;padding:8px;border:3px outset #74516a;border-radius:8px;background:#3c2437;color:#eee}.segmented-control input:checked+span{border-style:inset;background:#b6d149;color:#19230d;font-weight:bold}
.skin-tone-picker{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.skin-tone-picker label{position:relative}.skin-tone-picker input{position:absolute;opacity:0}.skin-tone-picker span{display:block;width:42px;height:42px;border-radius:8px;background:var(--tone);border:4px outset #e0c179;box-shadow:0 3px 0 #170b11;cursor:pointer}.skin-tone-picker input:checked+span{outline:4px solid #c3e654;outline-offset:3px;transform:rotate(-4deg) scale(1.04)}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.setup-grid .field-row{grid-template-columns:1fr}.setup-grid .field-row small{grid-column:1}
.toggle-row{display:flex;align-items:center;gap:10px;cursor:pointer;color:#ffe9aa;font-weight:bold}.toggle-row input{position:absolute;opacity:0}.toggle-track{width:52px;height:27px;border:3px inset #775d70;border-radius:18px;background:#221820;position:relative}.toggle-track::after{content:"";position:absolute;width:18px;height:18px;top:2px;left:3px;border-radius:50%;background:#8e8790;transition:.18s}.toggle-row input:checked+.toggle-track{background:#7f9d2e}.toggle-row input:checked+.toggle-track::after{left:25px;background:#efffa2}
.how-to-play{border:2px dashed #b99b52;background:#1f121ecc;padding:10px 14px;border-radius:9px}.how-to-play h3{margin:0 0 5px;color:#d4ed72}.how-to-play p{margin:4px 0;font-size:12px;line-height:1.45}.mobile-help{display:none}

.dialogue-layer{position:absolute;z-index:35;left:50%;bottom:14px;transform:translateX(-50%);width:min(980px,calc(100% - 30px));display:none;align-items:flex-end;gap:10px;pointer-events:auto}
.dialogue-layer.is-visible{display:flex}
.dialogue-portrait{flex:0 0 108px;height:126px;border:4px ridge #d7ae56;border-radius:14px 14px 4px 14px;background:#3b2335;box-shadow:0 7px 15px #000b;image-rendering:pixelated;overflow:hidden}
.dialogue-box{position:relative;flex:1;min-height:116px;max-height:min(42vh,310px);overflow:auto;padding:15px 19px 25px;border:4px ridge #d7ae56;border-radius:14px 14px 14px 4px;background:linear-gradient(#241725f2,#100c13f5);box-shadow:0 8px 18px #000c,inset 0 0 20px #0008}
.dialogue-speaker{font-family:"Arial Black",Impact,sans-serif;color:#d7ed67;font-size:17px;letter-spacing:.5px;margin-bottom:7px;text-transform:uppercase}
.dialogue-text{font-size:clamp(15px,2.1vw,22px);line-height:1.42;color:#fff7dc;white-space:normal;overflow-wrap:anywhere;hyphens:auto;min-height:1.5em}
.dialogue-continue{position:absolute;right:12px;bottom:6px;color:#e9c766;font-size:9px;letter-spacing:1px;animation:blink .8s steps(2,end) infinite}
@keyframes blink{50%{opacity:.25}}

.room-name-plate{position:absolute;z-index:20;top:12px;left:50%;transform:translate(-50%,-16px);opacity:0;padding:8px 18px;border:3px outset #e7c36a;border-radius:6px;background:linear-gradient(#6a2449,#331126);font-family:"Arial Black",Impact,sans-serif;color:#ffe18a;text-shadow:2px 2px 0 #000;pointer-events:none;transition:.25s}
.room-name-plate.show{opacity:1;transform:translate(-50%,0)}
.interaction-hint{position:absolute;z-index:22;left:50%;bottom:110px;transform:translateX(-50%);opacity:0;padding:8px 12px;border-radius:8px;background:#100c12df;border:2px solid #d5b65f;color:#fff2c5;font-weight:bold;font-size:12px;pointer-events:none;transition:.15s}.interaction-hint.show{opacity:1}

.dpad{position:absolute;z-index:28;right:20px;bottom:calc(18px + var(--safe-bottom));width:148px;height:148px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;opacity:.18;transition:opacity .14s,transform .14s;filter:drop-shadow(0 5px 4px #000b);user-select:none;touch-action:none}
.dpad:hover,.dpad.is-active{opacity:.9;transform:scale(1.02)}
.dpad-button,.dpad-center{border:3px outset #d9ba67;background:linear-gradient(#6b2b50,#321227);color:#ffe89c;font-family:"Arial Black",Impact,sans-serif;text-shadow:2px 2px #000;display:flex;align-items:center;justify-content:center;font-size:23px;cursor:pointer}
.dpad-button:active,.dpad-button.is-pressed{border-style:inset;background:linear-gradient(#a1bd43,#4e6921);color:#fff}
.dpad-up{grid-area:1/2}.dpad-left{grid-area:2/1}.dpad-center{grid-area:2/2;font-size:10px;border-radius:50%;cursor:default}.dpad-right{grid-area:2/3}.dpad-down{grid-area:3/2}.dpad-up{border-radius:16px 16px 2px 2px}.dpad-down{border-radius:2px 2px 16px 16px}.dpad-left{border-radius:16px 2px 2px 16px}.dpad-right{border-radius:2px 16px 16px 2px}
.inspect-button{position:absolute;z-index:28;left:23px;bottom:calc(34px + var(--safe-bottom));width:126px;height:72px;border-radius:50%;font-size:17px;opacity:.88}
.controls-hidden .dpad,.controls-hidden .inspect-button{display:none}
.dpad-left-side .dpad{left:20px;right:auto}.dpad-left-side .inspect-button{right:23px;left:auto}

.modal-layer{z-index:70;background:#060307c7;backdrop-filter:blur(3px)}
.modal-card{width:min(520px,92vw);padding:26px;text-align:center}.modal-card h2{font-family:"Arial Black",Impact,sans-serif;color:#ffe39a;font-size:clamp(23px,4vw,36px);margin:8px 0}.modal-card p{line-height:1.5;color:#ead9e5}.modal-actions{display:flex;justify-content:center;gap:16px;margin-top:18px}.warning-stripes{height:14px;background:repeating-linear-gradient(135deg,#f4c84a 0 12px,#28100e 12px 24px);border:2px inset #d3a43a}

.score-screen{background:
 radial-gradient(circle at 50% 30%,rgba(208,181,82,.28),transparent 35%),
 repeating-linear-gradient(45deg,#211124 0 16px,#2c1530 16px 32px)}
.score-card{width:min(680px,94vw);padding:30px;text-align:center;overflow:hidden}.score-card>*{position:relative;z-index:2}.score-starburst{position:absolute;z-index:1;left:50%;top:18%;width:380px;height:380px;transform:translate(-50%,-50%);opacity:.12;background:#f5dc59;clip-path:polygon(50% 0,56% 35%,72% 8%,68% 39%,96% 21%,73% 45%,100% 50%,73% 56%,96% 79%,67% 62%,72% 92%,56% 66%,50% 100%,44% 66%,28% 92%,33% 62%,4% 79%,27% 56%,0 50%,27% 44%,4% 21%,32% 39%,28% 8%,44% 35%);animation:slowSpin 18s linear infinite}@keyframes slowSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.score-card h2{font-family:"Arial Black",Impact,sans-serif;font-size:clamp(34px,7vw,68px);margin:0;color:#fff0ae;text-shadow:4px 5px 0 #361020,0 0 14px #ffd250}
.score-alias{font-size:20px;color:#c9e967;font-weight:bold;margin:8px 0}.score-equation{font-family:"Arial Black",Impact,sans-serif;font-size:clamp(28px,6vw,58px);color:#f2d65c;margin:12px 0;text-shadow:3px 3px #000}
.score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.score-grid div{padding:12px 5px;border:3px outset #9b6c84;background:#251521;border-radius:9px}.score-grid strong{display:block;color:#d5ee70;font-size:24px}.score-grid span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#cfbeca;margin-top:4px}.share-heading{font-size:11px;letter-spacing:1px;color:#d5bdca;text-transform:uppercase}.share-row{display:flex;justify-content:center;gap:8px;margin:10px 0}.share-row button{width:42px;height:42px;border-radius:9px;border:3px outset #e2c06b;background:linear-gradient(#743055,#321226);color:#fff;font-family:"Arial Black",Impact,sans-serif;font-size:18px;cursor:pointer}.share-row button:hover{filter:brightness(1.25)}.share-status{min-height:20px;font-size:11px;color:#d9ef72;margin-bottom:10px}

.toast{position:fixed;z-index:100;left:50%;bottom:20px;transform:translate(-50%,30px);opacity:0;pointer-events:none;padding:10px 14px;border:3px outset #e7c56d;border-radius:9px;background:#211321;color:#fff0c0;font-weight:bold;box-shadow:0 5px 15px #000c;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:780px){
  :root{--header-h:54px}
  .game-header{padding:5px 7px;gap:6px;border-bottom-width:3px}
  .icon-button{width:38px;height:38px;min-width:38px;font-size:26px}
  .header-brand{min-width:55px}.header-brand-main{font-size:17px}.header-brand-sub{font-size:6px;letter-spacing:.7px}
  .player-hud-name{font-size:11px;max-width:22vw}
  .hud-cluster{gap:4px}.hud-pill,.digital-clock{height:35px;min-width:48px;padding:0 7px;font-size:14px;border-radius:7px}.money-pill{display:none}.rat-mini{font-size:16px;margin-right:3px}.analog-clock{display:none}.digital-clock{display:flex}
  .title-card{padding:27px 18px 18px}.title-kicker{font-size:8px;letter-spacing:1.4px}.title-subtitle{letter-spacing:2px}
  .setup-card{padding:18px 16px;gap:12px}.field-row{grid-template-columns:1fr}.field-row small{grid-column:1}.setup-grid{grid-template-columns:1fr}.desktop-help{display:none}.mobile-help{display:block}
  .dpad{width:132px;height:132px;right:12px;bottom:calc(10px + var(--safe-bottom))}.dpad-left-side .dpad{left:12px}.inspect-button{width:104px;height:62px;left:14px;bottom:calc(25px + var(--safe-bottom));font-size:14px}.dpad-left-side .inspect-button{right:14px}
  .dialogue-layer{bottom:8px;width:calc(100% - 14px);gap:6px}.dialogue-portrait{flex-basis:78px;height:96px}.dialogue-box{min-height:100px;max-height:46vh;padding:11px 13px 23px}.dialogue-speaker{font-size:13px}.dialogue-text{font-size:clamp(14px,4vw,19px)}
  .interaction-hint{bottom:98px;max-width:80%;text-align:center}
  .score-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-height:620px) and (orientation:landscape){
  :root{--header-h:48px}.game-header{padding:4px 8px}.analog-clock{width:40px;height:40px}.hud-pill{height:34px}.setup-card{grid-template-columns:1fr 1fr;max-width:900px;padding:12px 18px;gap:9px}.setup-heading,.how-to-play,.setup-card>.primary-button{grid-column:1/-1}.setup-grid{grid-column:1/-1}.title-card{transform:scale(.88)}.dpad{width:112px;height:112px}.inspect-button{width:100px;height:55px}.dialogue-layer{width:min(900px,calc(100% - 220px));bottom:7px}.dialogue-portrait{height:88px;flex-basis:74px}.dialogue-box{min-height:88px;max-height:52vh}.room-name-plate{top:6px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
.menu-mode .game-header{display:none}
.menu-mode .stage{height:100%}
.rat-mini img{display:block;width:29px;height:22px;object-fit:contain}
.title-rat-row img{width:55px;height:34px;object-fit:contain;filter:drop-shadow(2px 3px 0 #160811)}
.title-rat-row img:last-child{transform:scaleX(-1)}
.title-rat-row .web-sprite{width:38px;height:38px;filter:drop-shadow(2px 3px 0 #160811)}

/* Multilingual setup alignment and long-label resilience. */
.setup-grid{align-items:stretch}
.setup-grid .field-row{display:grid;grid-template-rows:minmax(2.6em,auto) auto;align-content:start;align-items:stretch;gap:7px;height:100%}
.setup-grid .field-row>span{display:flex;align-items:flex-end;line-height:1.25}
.setup-grid select{min-height:44px}
.title-card h1 strong,.title-card h1 span,.title-subtitle,.primary-button{overflow-wrap:anywhere;word-break:normal}
.title-card h1 strong{line-height:.94;letter-spacing:-1.5px}
.primary-button{white-space:normal;line-height:1.1}
html[lang^="zh"] body,html[lang^="zh"] button,html[lang^="zh"] input,html[lang^="zh"] select{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif}
html[lang^="zh"] .title-card h1 strong,html[lang^="zh"] .title-card h1 span,html[lang^="zh"] .dialogue-speaker{letter-spacing:.04em}
@media (max-width:780px){.setup-grid .field-row{grid-template-rows:auto auto}.setup-grid .field-row>span{min-height:0}}