@font-face{font-family:Pokemon Pixel;src:url(../assets/ui/fonts/pokemon-pixel.ttf)format("truetype");font-display:swap}:root{color:#f7f4d8;font-synthesis:none;background:#172128;font-family:Courier New,monospace}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at 50% 30%,#314550 0,#172128 70%),#172128}#app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);place-items:center;display:grid}#discord-status{z-index:1000;top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));color:#fff;pointer-events:none;background:#172128e0;border:1px solid #ffffff2e;border-radius:8px;padding:7px 10px;font:600 12px/1.2 system-ui,sans-serif;position:fixed;box-shadow:0 4px 18px #00000047}.startup-error{color:#fff;background:#291c20;border:1px solid #b84b4b;border-radius:12px;max-width:560px;margin:24px;padding:24px;font-family:system-ui,sans-serif}.startup-error h1{margin:0 0 12px;font-size:22px}.startup-error p{margin:0;line-height:1.5}body.account-mode #app{overflow:auto}.account-gate{width:100%;min-height:100%;padding:max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));place-items:center;display:grid}.account-card{color:#eef6f2;background:#11191ef0;border:1px solid #ffffff24;border-radius:16px;width:min(100%,430px);padding:28px;font-family:system-ui,-apple-system,Segoe UI,sans-serif;box-shadow:0 22px 70px #0000006b}.account-eyebrow{color:#72d69b;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;font-size:12px;font-weight:800}.account-card h1{margin:0;font-size:clamp(24px,7vw,32px);line-height:1.1}.account-description{color:#afc1c9;margin:12px 0 22px;font-size:14px;line-height:1.5}.account-form{gap:14px;display:grid}.account-form label{color:#dce8e4;gap:6px;font-size:13px;font-weight:700;display:grid}.account-form input{color:#fff;background:#24343c;border:1px solid #fff3;border-radius:8px;outline:none;width:100%;padding:11px 12px;font:500 16px/1.2 system-ui,sans-serif}.account-form input:focus{border-color:#72d69b;box-shadow:0 0 0 3px #72d69b2e}.account-error{color:#ff9a9a;min-height:18px;margin:-2px 0 0;font-size:13px;line-height:1.4}.account-form button{cursor:pointer;border-radius:8px;min-height:44px;padding:10px 14px;font:700 14px/1.2 system-ui,sans-serif}.account-form button:disabled{opacity:.55;cursor:wait}.account-submit{color:#102019;background:#72d69b;border:1px solid #72d69b}.account-alternate{color:#dce8e4;background:0 0;border:1px solid #ffffff29}canvas{image-rendering:pixelated;image-rendering:crisp-edges;outline:4px solid #0d1418;box-shadow:0 18px 60px #00000073}body.rom-mode #app{padding:0;display:block}.rom-shell{color:#eaf1e8;background:#11191e;grid-template-rows:auto auto minmax(0,1fr);width:100%;height:100%;font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:grid}.rom-shell.is-player{grid-template-rows:auto minmax(0,1fr)}.rom-toolbar{z-index:2;min-height:58px;padding:10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));background:#1b282f;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;gap:18px;display:flex}.rom-toolbar[hidden]{display:none}.rom-title{gap:3px;min-width:0;display:grid}.rom-title strong{font-size:14px}.rom-status,.rom-save-status,.rom-presence-status{color:#9fb7c2;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.rom-status.is-error,.rom-save-status.is-error{color:#ff9a9a}.rom-save-status{color:#8fc9a8}.rom-presence-status{color:#aab7c1}.rom-presence-status.is-online{color:#72d69b}.rom-actions{align-items:center;gap:8px;display:flex}.rom-actions button,.rom-actions a{color:#edf5f2;cursor:pointer;background:#2b4049;border:1px solid #ffffff29;border-radius:7px;padding:7px 10px;font:600 12px/1.2 system-ui,sans-serif;text-decoration:none}.rom-actions button:disabled{opacity:.45;cursor:wait}.rom-controls{z-index:2;min-height:38px;padding:6px max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left));color:#b9cbd2;background:#162128;border-bottom:1px solid #ffffff14;align-items:center;gap:12px;font:500 12px/1.3 system-ui,sans-serif;display:flex}.rom-controls>span:first-child{color:#f0f5f2;font-weight:700}.rom-controls-hint{flex:1}.rom-controls button{color:#f0f5f2;cursor:pointer;background:#2b4049;border:1px solid #ffffff2e;border-radius:6px;padding:5px 9px;font:600 11px/1.2 system-ui,sans-serif}.rom-viewport,.rom-frame{border:0;width:100%;height:100%;min-height:0}.rom-frame{background:#000;display:block}.rom-viewport{position:relative;overflow:hidden;container-type:size}.rom-remote-layer{z-index:1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.rom-remote-screen{width:min(100cqw,150cqh);height:min(66.6667cqw,100cqh);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.rom-remote-player{width:6.66667%;height:20%;transition:left 40ms linear,top 40ms linear;position:absolute;transform:translate(-50%,-50%)}.rom-remote-sprite{width:100%;height:100%;image-rendering:pixelated;background:url(../assets/rom/brendan-walking.png) 0 0/900% 100% no-repeat;display:block}.rom-remote-sprite.is-facing-right{transform:scaleX(-1)}.rom-remote-name{color:#fff;text-shadow:0 1px #000;white-space:nowrap;background:#0a1318c7;border-radius:2px;padding:1px 3px;font:600 clamp(7px,1.1cqh,11px)/1 system-ui,sans-serif;position:absolute;bottom:100%;left:50%;transform:translate(-50%,-2px)}@media (max-width:720px){.rom-toolbar{align-items:flex-start}.rom-actions{flex-wrap:wrap;justify-content:flex-end}.rom-actions a{display:none}.rom-controls-hint{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}body.touch-mode{flex-direction:column;display:flex}body.touch-mode #app{height:auto;min-height:0;padding:max(6px, env(safe-area-inset-top)) env(safe-area-inset-right) 8px env(safe-area-inset-left);flex:auto;place-items:start center}body.touch-mode canvas{outline-width:3px;box-shadow:0 8px 28px #00000073}#touch-controls{padding:20px clamp(16px, 6vw, 40px) calc(clamp(56px, 14vh, 160px) + env(safe-area-inset-bottom));touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(#20303a,#16222a);border-top:1px solid #ffffff14;flex:none;justify-content:space-between;align-items:center;gap:16px;display:flex}.tc-dpad{--dpad-size:clamp(120px, 34vw, 168px);width:var(--dpad-size);height:var(--dpad-size);touch-action:none;cursor:pointer;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid;position:relative}.tc-dpad-center{pointer-events:none;background:#2b3a44;grid-area:2/2;box-shadow:inset 0 0 0 2px #131c22}.tc-btn{appearance:none;color:#e8f0f2;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background:#2b3a44;border:none;margin:0;font:600 15px/1 system-ui,sans-serif;transition:transform 60ms,background 60ms,filter 60ms}.tc-btn.is-pressed{filter:brightness(1.35);transform:scale(.94)}.tc-up,.tc-down,.tc-left,.tc-right{color:#9fb3bd;place-items:center;display:grid;box-shadow:inset 0 0 0 2px #131c22}.tc-up{border-radius:8px 8px 0 0;grid-area:1/2}.tc-down{border-radius:0 0 8px 8px;grid-area:3/2}.tc-left{border-radius:8px 0 0 8px;grid-area:2/1}.tc-right{border-radius:0 8px 8px 0;grid-area:2/3}.tc-right-cluster{flex-direction:column;align-items:flex-end;gap:18px;display:flex}.tc-face{align-items:center;gap:clamp(14px,4vw,26px);display:flex;transform:rotate(-12deg)}.tc-a,.tc-b{color:#fff;border-radius:50%;width:clamp(58px,16vw,74px);height:clamp(58px,16vw,74px);font-size:20px;font-weight:700;box-shadow:0 4px #00000059,inset 0 2px 4px #ffffff40}.tc-a{background:radial-gradient(circle at 35% 30%,#ff7d9c,#c8386a)}.tc-b{background:radial-gradient(circle at 35% 30%,#7fd3ff,#2f7fb8)}.tc-menu{gap:12px;display:flex}.tc-select,.tc-start,.tc-dex{letter-spacing:.5px;color:#cdd9df;background:#24333d;border-radius:999px;min-width:clamp(56px,16vw,80px);padding:8px 10px;font-size:11px;box-shadow:inset 0 0 0 1.5px #131c22}body.rom-mode.rom-touch-mode #app{padding:0;display:block}body.rom-mode.rom-touch-mode .rom-shell{grid-template-rows:auto minmax(0,1fr)}body.rom-mode.rom-touch-mode .rom-shell.is-player{grid-template-rows:minmax(0,1fr)}body.rom-mode.rom-touch-mode .rom-controls{display:none}body.rom-mode.rom-touch-mode .rom-toolbar{min-height:48px;padding-top:max(7px, env(safe-area-inset-top));padding-bottom:7px}body.rom-mode.rom-touch-mode .rom-actions button:first-child,body.rom-mode.rom-touch-mode .rom-actions a{display:none}body.rom-mode.rom-touch-mode #touch-controls{padding-top:14px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}@media (orientation:landscape){#touch-controls{padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}.tc-dpad{--dpad-size:clamp(110px, 22vw, 150px)}body.rom-mode.rom-touch-mode .rom-toolbar{display:none}body.rom-mode.rom-touch-mode .rom-shell{grid-template-rows:minmax(0,1fr)}body.rom-mode.rom-touch-mode #touch-controls{z-index:20;padding:10px max(20px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));pointer-events:none;background:linear-gradient(#0000,#16222a61);border-top:0;position:fixed;bottom:0;left:0;right:0}body.rom-mode.rom-touch-mode .tc-dpad,body.rom-mode.rom-touch-mode .tc-right-cluster{pointer-events:auto}body.rom-mode.rom-touch-mode .tc-dpad{--dpad-size:clamp(108px, 28vh, 124px)}}.name-input-overlay{z-index:3000;-webkit-tap-highlight-color:transparent;background:#090e12b8;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.name-input-card{background:#223039;border:2px solid #4a6472;border-radius:14px;flex-direction:column;gap:16px;width:min(420px,100%);padding:22px;font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;box-shadow:0 24px 60px #0000008c}.name-input-title{color:#f7f4d8;flex-direction:column;gap:10px;font-size:15px;font-weight:700;display:flex}.name-input-field{color:#f7f4d8;letter-spacing:1px;background:#16222a;border:2px solid #6c8593;border-radius:10px;width:100%;padding:12px 14px;font-size:20px;font-weight:600}.name-input-field:focus{border-color:#7fd3ff;outline:none}.name-input-actions{justify-content:flex-end;gap:12px;display:flex}.name-input-btn{appearance:none;cursor:pointer;border:none;border-radius:10px;padding:11px 20px;font-size:14px;font-weight:700}.name-input-cancel{color:#cdd9df;background:#35485360;box-shadow:inset 0 0 0 1.5px #4a6472}.name-input-ok{color:#fff;background:radial-gradient(circle at 35% 30%,#ff7d9c,#c8386a)}
