/* CHITO VILLAGE — STYLES */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;overflow-y:auto;background:#0a0a18}
body{font-family:'JetBrains Mono',monospace;color:#e8e8ed}
::selection{background:#00f0ff;color:#0a0a18}
.app{display:flex;flex-direction:column;min-height:100vh}
.header{padding:0.4rem 1.25rem;display:flex;justify-content:space-between;align-items:center;background:#0e0e1c;border-bottom:2px solid #1a1a2e;z-index:100;flex-shrink:0}
.hbrand{font-size:0.65rem;font-weight:800;color:#00f0ff;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer}
.hlinks{display:flex;gap:1rem}
.hlinks a{font-size:0.55rem;color:#3e3e55;text-decoration:none;text-transform:lowercase;transition:color 0.2s;letter-spacing:0.04em}
.hlinks a:hover{color:#00f0ff}
.scene-wrap{position:relative;overflow:hidden;width:100%;aspect-ratio:384/240}
#game{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:default}
.tip{position:fixed;z-index:200;pointer-events:none;background:#0e0e1cee;border:2px solid #00f0ff;padding:8px 12px;max-width:300px;opacity:0;transition:opacity 0.12s;image-rendering:auto;font-family:'JetBrains Mono',monospace}
.tip.show{opacity:1}
.tip-name{font-size:0.72rem;font-weight:700;color:#00f0ff;margin-bottom:2px;letter-spacing:0.04em}
.tip-desc{font-size:0.58rem;color:#8e8ea0;line-height:1.5}
.tip-hint{font-size:0.48rem;color:#4a4a60;margin-top:4px;letter-spacing:0.08em;text-transform:uppercase}

/* FLOOR PANEL */
.floor-panel{position:absolute;bottom:0;left:0;right:0;background:#0c0c18f5;border-top:2px solid #1e1e35;z-index:50;max-height:0;overflow:hidden;transition:max-height 0.4s ease;backdrop-filter:blur(8px);image-rendering:auto;font-family:'JetBrains Mono',monospace}
.floor-panel.open{max-height:55%;overflow-y:auto}
.fp-header{padding:0.6rem 1.25rem;border-bottom:1px solid #1a1a2e;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#0c0c18;z-index:2}
.fp-title{font-size:0.75rem;font-weight:700;color:#00f0ff;letter-spacing:0.06em}
.fp-close{font-size:0.55rem;color:#4a4a60;cursor:pointer;padding:0.2rem 0.5rem;border:1px solid #2a2a40;background:none;font-family:inherit;transition:all 0.2s}
.fp-close:hover{color:#ff3366;border-color:#ff3366}
.fp-body{padding:0.8rem 1.25rem}
.fp-body h3{font-size:0.72rem;color:#e8e8ed;font-weight:600;margin:0.8rem 0 0.35rem;letter-spacing:0.03em}
.fp-body h3:first-child{margin-top:0}
.fp-body p{font-size:0.6rem;color:#8e8ea0;line-height:1.7;margin-bottom:0.5rem}
.fp-body p strong{color:#c8c8d8;font-weight:600}
.fp-body .sr{display:flex;gap:0.5rem;flex-wrap:wrap;margin:0.5rem 0}
.fp-body .st{background:#141425;border:1px solid #1e1e35;padding:0.35rem 0.5rem;text-align:center;flex:1;min-width:60px}
.fp-body .sv{font-size:0.7rem;color:#e8e8ed;font-weight:700}
.fp-body .sl{font-size:0.38rem;color:#4a4a60;text-transform:uppercase;letter-spacing:0.06em;margin-top:0.1rem}
.fp-body .tg{display:flex;flex-wrap:wrap;gap:0.2rem;margin:0.3rem 0}
.fp-body .t{font-size:0.42rem;color:#4a4a60;padding:0.1rem 0.3rem;border:1px solid #1e1e35}
.fp-body .tm{background:#08081a;border:1px solid #1a1a2e;margin:0.35rem 0;font-size:0.48rem;overflow-x:auto}
.fp-body .tmb{padding:0.2rem 0.35rem;background:#0a0a1e;border-bottom:1px solid #1a1a2e;display:flex;gap:3px;align-items:center}
.fp-body .tmb .d{width:4px;height:4px;border-radius:50%}
.fp-body .tmb .r{background:#ff3366}.fp-body .tmb .y{background:#ffe600}.fp-body .tmb .g{background:#39ff14}
.fp-body .tmc{padding:0.35rem;line-height:1.7;color:#6a6a80}
.fp-body .tmc .hl{color:#00f0ff}.fp-body .tmc .w{color:#ffe088}.fp-body .tmc .er{color:#ff3366}.fp-body .tmc .gr{color:#39ff14}
.fp-body .fg{display:grid;grid-template-columns:1fr 1fr;gap:0.35rem;margin:0.4rem 0}
.fp-body .fi{background:#141425;border:1px solid #1e1e35;padding:0.4rem}
.fp-body .fi h4{font-size:0.52rem;color:#00f0ff;margin-bottom:0.12rem}
.fp-body .fi p{font-size:0.48rem;margin-bottom:0}
.fp-body .lb{display:inline-block;font-family:inherit;font-size:0.52rem;color:#00f0ff;border:1px solid #00f0ff;padding:0.3rem 0.6rem;text-decoration:none;margin-top:0.4rem;transition:all 0.2s}
.fp-body .lb:hover{background:#00f0ff18}
.fp-body .stl{color:#39ff14;font-size:0.52rem}.fp-body .sts{color:#ffe600;font-size:0.52rem}.fp-body .std{color:#ff3366;font-size:0.52rem}

/* BOTTOM BAR */
.bbar{padding:0.35rem 1.25rem;display:flex;justify-content:space-between;align-items:center;background:#0e0e1c;border-top:2px solid #1a1a2e;z-index:100;flex-shrink:0}
.bbl{font-size:0.45rem;color:#2e2e44;letter-spacing:0.06em}
.bbm{flex:1;overflow:hidden;margin:0 1rem}
.bbt{display:flex;width:max-content;animation:ms 28s linear infinite}
.bbt span{font-size:0.45rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;padding:0 0.7rem}
.c1{color:#00f0ff}.c2{color:#39ff14}.c3{color:#ffe600}.c4{color:#ff3366}.c5{color:#bf5fff}.c0{color:#2e2e44}
@keyframes ms{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bbr{font-size:0.45rem;color:#2e2e44}

@media(max-width:768px){.hlinks{display:none}.bbl,.bbr{display:none}.floor-panel.open{max-height:65%}.fp-body .fg{grid-template-columns:1fr}}