@import "https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap";:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}:root{--bg-dark:#1e2a4a;--panel-bg:#253255;--accent-primary:#38e8ff;--accent-police:#ff4f7b;--accent-don:#ffb340;--accent-market:#fbbf24;--text-main:#f0f6ff;--text-dim:#a8bedd;--grid-line:#3d5080}body{background-color:var(--bg-dark);color:var(--text-main);overscroll-behavior:none;margin:0;font-family:"M PLUS 1p",sans-serif}.app-container{border-left:1px solid var(--grid-line);border-right:1px solid var(--grid-line);background:var(--bg-dark);flex-direction:column;max-width:600px;height:100vh;margin:0 auto;display:flex}.header{text-align:center;border-bottom:2px solid var(--grid-line);background:var(--panel-bg);z-index:200;justify-content:space-between;align-items:center;padding:.75rem .5rem;display:flex;box-shadow:0 4px 10px #0000004d}.header h1{color:var(--text-main);text-transform:uppercase;align-items:center;margin:0;font-size:1rem;font-weight:700;display:flex}.header-status{align-items:center;gap:12px;display:flex}.digital-clock{color:var(--accent-police);border:1px solid var(--accent-police);letter-spacing:.1em;text-shadow:0 0 5px var(--accent-police);text-align:center;background:#0d1629;min-width:65px;padding:4px 10px;font-size:1.1rem;font-weight:700;box-shadow:0 0 10px #ff2e6366}.player-turn{color:var(--text-dim);letter-spacing:.05em;text-transform:none;font-size:.75rem}.board-container{background:radial-gradient(circle,#1e2a4a 0%,#0d1221 100%);flex:1;justify-content:center;align-items:flex-start;padding:12px 10px;display:flex;position:relative;overflow:visible;box-shadow:inset 0 0 100px #00000080}.board-container:before{content:"";opacity:.15;pointer-events:none;z-index:0;background-image:url(/bg_city.png);background-size:128px;position:absolute;inset:0}.grid{aspect-ratio:1;z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0d162999;border:1px solid #38e8ff4d;border-radius:4px;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(5,1fr);gap:6px;width:100%;max-width:500px;margin-top:16.6667%;padding:8px;display:grid;position:relative;box-shadow:0 0 40px #000c,0 0 15px #38e8ff1a}.cell{color:var(--text-dim);background:#25325566;border:1px solid #38e8ff26;border-radius:2px;justify-content:center;align-items:center;font-size:.75rem;transition:background .2s;display:flex;position:relative;overflow:visible;box-shadow:inset 0 0 8px #0000004d}.cell:hover{background:#25325599}.cell:before{content:"";pointer-events:none;background:#00d2ff1a;width:2px;height:2px;position:absolute;top:4px;right:4px;box-shadow:0 4px #00d2ff0d,-4px 0 #00d2ff0d}.cell.is-base{border:1px dashed var(--grid-line);background:#1e2a4a}.cell.base-blue{box-shadow:inset 0 0 15px var(--accent-primary);border:2px solid var(--accent-primary)!important}.cell.base-green{box-shadow:inset 0 0 15px #4dbd70;border:2px solid #4dbd70!important}.cell.base-purple{box-shadow:inset 0 0 15px #bd4dbd;border:2px solid #bd4dbd!important}.cell.base-yellow{box-shadow:inset 0 0 15px var(--accent-don);border:2px solid var(--accent-don)!important}.police-vision{z-index:5;pointer-events:none;background:#ff2e631a;position:absolute;inset:0}.police-vision.animating{animation:.5s 2 blink}@keyframes blink{0%,to{background:#ff2e6333}50%{background:#ff2e6399;box-shadow:inset 0 0 15px #ff2e63cc}}.police-banner-overlay{color:#fff;text-align:center;z-index:500;letter-spacing:.2em;pointer-events:none;background:#ff2e63e6;border-top:4px solid #fff;border-bottom:4px solid #fff;padding:1rem;font-family:JetBrains Mono,monospace;font-weight:700;animation:.4s ease-out banner-slide;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.trade-banner-overlay{color:#000;text-align:center;z-index:500;border-top:4px solid var(--accent-market);border-bottom:4px solid var(--accent-market);letter-spacing:.1em;pointer-events:none;background:#ffb340e6;padding:1rem;font-family:JetBrains Mono,monospace;font-weight:700;animation:.4s ease-out banner-slide;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}@keyframes banner-slide{0%{opacity:0;transform:translateY(-50%)scaleX(0)}to{opacity:1;transform:translateY(-50%)scaleX(1)}}.police-dialogue{color:#000;white-space:nowrap;z-index:600;pointer-events:none;background:#fff;border-radius:8px;padding:8px 12px;font-size:.75rem;font-weight:700;animation:.3s cubic-bezier(.175,.885,.32,1.275) pop-in;position:absolute;box-shadow:0 4px 15px #0009}.police-dialogue:after{content:"";border-top:8px solid #fff;border-left:8px solid #0000;border-right:8px solid #0000;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}@keyframes pop-in{0%{opacity:0;transform:translate(-50%,-100%)scale(0)}to{opacity:1;transform:translate(-50%,-140%)scale(1)}}.entity{width:75%;height:75%;image-rendering:pixelated;justify-content:center;align-items:center;font-size:1rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute}.entity img{object-fit:contain;mix-blend-mode:screen;pointer-events:none;width:140%;height:140%;image-rendering:pixelated}.entity.player{z-index:10;color:var(--accent-primary);justify-content:center;align-items:flex-end;width:110%;height:145%;display:flex;bottom:0}.player-badge{color:#fff;z-index:1000;border:1px solid #fff6;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:900;display:flex;position:absolute;top:-12px;left:50%;transform:translate(-50%);box-shadow:0 2px 4px #00000080}.entity.police{z-index:20;color:var(--accent-police);pointer-events:none;justify-content:center;align-items:flex-end;width:110%;height:145%;display:flex;bottom:0;overflow:visible}.entity.don{z-index:15;color:var(--accent-don);justify-content:center;align-items:flex-end;width:120%;height:160%;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-55%)}.entity.don .player-badge{left:55%}.entity.market{z-index:10;cursor:pointer;justify-content:center;align-items:center;width:123%;height:123%;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.entity.market img{filter:drop-shadow(0 4px 8px #00000080);width:100%;height:auto}.entity.item{background:var(--accent-market);z-index:5;width:25%;height:25%;box-shadow:0 0 10px var(--accent-market);border-radius:0;margin-top:60%;margin-left:60%}.police-vision{pointer-events:none;background:#ef444433;border:1px solid #ef444466;position:absolute;inset:0;box-shadow:inset 0 0 10px #ef44441a}.status-panel{background:var(--panel-bg);border-bottom:1px solid var(--grid-line);z-index:100;color:var(--text-dim);justify-content:center;align-items:center;padding:6px 10px;font-size:.85rem;display:flex;box-shadow:0 2px 10px #0003}.controls-panel{background:var(--panel-bg);border-top:1px solid var(--grid-line);padding:8px}.controls-layout{align-items:stretch;gap:8px;min-height:140px;display:flex}.side-panel{border:1px solid var(--grid-line);background:#0f193759;border-radius:4px;flex-direction:column;flex:1;gap:4px;min-width:90px;padding:8px;display:flex}.main-controls{flex-direction:column;flex:2;justify-content:center;gap:8px;display:flex}.cards-container{flex-direction:column;gap:6px;height:100%;display:flex}.cards-container>.card{flex:1;min-height:50px}.card{aspect-ratio:16/9;background-blend-mode:screen;border:1px solid var(--grid-line);cursor:pointer;color:var(--text-main);background-color:#111c35;background-position:50%;background-size:cover;border-radius:4px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 10px #000c}.card:hover:not(.disabled){border-color:var(--accent-market);transform:translateY(-2px);box-shadow:0 0 15px #f59e0b66,inset 0 0 10px #000c}.card.disabled{opacity:.3;pointer-events:none}.card-label{text-align:center;border-top:1px solid var(--accent-market);color:var(--text-main);background:#000000d9;padding:8px 4px;font-size:.75rem;font-weight:700;position:absolute;bottom:0;left:0;right:0}.d-pad{grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%;max-width:250px;margin:0 auto;display:grid}.btn{background:var(--panel-bg);color:var(--text-main);border:1px solid var(--grid-line);cursor:pointer;text-transform:uppercase;letter-spacing:.1em;border-radius:4px;justify-content:center;align-items:center;padding:.8rem 1.2rem;font-family:inherit;font-size:.9rem;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 6px #0003}.btn:active:not(:disabled){transform:translateY(2px)}.btn:hover:not(:disabled){background:var(--grid-line);border-color:var(--text-dim)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn.primary{background:var(--accent-primary);color:#000;border-color:var(--accent-primary)}.btn.primary:hover:not(:disabled){background:#34d399}.btn.danger{background:var(--accent-police);color:#fff;border-color:var(--accent-police)}.d-pad>.btn{padding:.4rem 0;font-size:1rem}.d-pad .up{grid-area:1/2}.d-pad .left{grid-area:2/1}.d-pad .center{cursor:default;background:0 0;border:none;grid-area:2/2;padding:.5rem;font-size:.75rem}.d-pad .center:hover{background:0 0;border:none}.d-pad .right{grid-area:2/3}.d-pad .down{grid-area:3/2}.flex-row{align-items:center;gap:.5rem;display:flex}.lobby{background:var(--bg-dark);flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;height:100%;padding:2rem;display:flex}.lobby h2{color:var(--accent-primary);text-shadow:0 0 15px #38e8ff66;letter-spacing:.2em;margin-bottom:2rem}.lobby h3{color:var(--text-main);border-left:3px solid var(--accent-primary);width:100%;margin-top:2rem;padding-left:10px;font-size:1rem}.input{border:1px solid var(--grid-line);color:#fff;text-align:center;background:#0d1629cc;border-radius:4px;width:100%;padding:1.2rem;font-family:inherit;font-size:1.1rem;transition:all .3s;box-shadow:inset 0 0 10px #00000080}.input:focus{border-color:var(--accent-primary);background:#0d1629;outline:none;box-shadow:0 0 15px #38e8ff33,inset 0 0 10px #00000080}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#12122bb3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal,.modal-content{background:var(--panel-bg);border:2px solid var(--accent-primary);text-align:center;border-radius:4px;width:90%;max-width:450px;max-height:85vh;padding:1.5rem;position:relative;overflow-y:auto;box-shadow:0 0 50px #0009}.close-btn{color:var(--text-dim);cursor:pointer;z-index:1010;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.5rem;line-height:1;transition:all .2s;display:flex;position:absolute;top:12px;right:12px}.close-btn:hover{background:var(--accent-police);color:#fff;border-color:var(--accent-police);box-shadow:0 0 10px var(--accent-police);transform:rotate(90deg)}.modal h2,.modal-title{letter-spacing:.1em;text-transform:uppercase;color:var(--accent-primary);margin-top:0;margin-bottom:1rem;font-size:1.2rem}.modal-actions{flex-direction:column;gap:.5rem;margin-top:1.5rem;display:flex}.modal-actions .btn{width:100%;padding:1rem}.help-modal{text-align:left;max-width:500px;max-height:80vh;overflow-y:auto}.help-tabs{border-bottom:1px solid var(--grid-line);gap:8px;margin-bottom:20px;padding-bottom:8px;display:flex;overflow-x:auto}.help-tab{color:var(--text-dim);cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:2px;padding:6px 12px;font-family:inherit;font-size:.8rem}.help-tab.active{background:var(--panel-bg);color:var(--text-main);border-color:var(--grid-line);box-shadow:0 0 10px #0003}.help-body{font-size:.9rem;line-height:1.6}.help-body ul{margin:10px 0;padding-left:20px}.help-body li{margin-bottom:8px}.bg-red{color:#000;background-color:#ef4444!important}.bg-blue{color:#000;background-color:#3b82f6!important}.bg-green{color:#000;background-color:#10b981!important}.bg-yellow{color:#000;background-color:#eab308!important}.bg-purple{color:#000;background-color:#8b5cf6!important}.text-red{color:#ef4444}.text-blue{color:#3b82f6}.text-green{color:#10b981}.text-yellow{color:#eab308}.text-purple{color:#8b5cf6}.safe-area-spacer{background:var(--bg-main);flex-shrink:0;width:100%;height:clamp(40px,8vh,60px)}.item-icon-container{cursor:pointer;transition:transform .1s,filter .1s}.item-icon-container:hover{filter:brightness(1.2);transform:scale(1.1)}.title-screen-container{background-blend-mode:multiply;cursor:pointer;background-color:#0d1629;background-image:url(/bg_city.png);background-position:50%;background-size:cover;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:relative;overflow:hidden}.title-screen-container:before{content:"";pointer-events:none;background:radial-gradient(circle,#0000 0%,#0d1221f2 100%);position:absolute;inset:0}.title-logo{color:var(--text-main);text-shadow:0 0 20px var(--accent-primary), 0 0 10px var(--accent-market);letter-spacing:.1em;z-index:10;text-align:center;margin-bottom:.5rem;font-size:2.5rem;font-weight:900;animation:3s infinite glow-pulse}.title-subtitle{color:var(--text-dim);letter-spacing:.3em;z-index:10;text-transform:uppercase;text-align:center;margin-bottom:5rem;font-size:.9rem}.title-prompt{color:var(--accent-primary);letter-spacing:.2rem;z-index:10;font-size:1.2rem;font-weight:700;animation:2s ease-in-out infinite pulse-slow}@keyframes glow-pulse{0%,to{text-shadow:0 0 20px var(--accent-primary), 0 0 10px var(--accent-market)}50%{text-shadow:0 0 30px var(--accent-primary), 0 0 20px var(--accent-market)}}@keyframes pulse-slow{0%,to{opacity:.3;transform:scale(.95)}50%{opacity:1;text-shadow:0 0 15px var(--accent-primary);transform:scale(1)}}