* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; background:#00000F; overflow:hidden; }
body { font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:#cfd6e4; }
.hidden { display:none !important; }

.stars { position:fixed; inset:0; width:100%; height:100%; z-index:0; }

.boot { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column;
        align-items:center; justify-content:center; gap:18px; background:#00000F; }
.boot-title { font-size:15px; letter-spacing:.22em; text-transform:uppercase; color:#8fa0bd; }
.boot-bar { width:min(340px, 70vw); height:2px; background:rgba(255,255,255,.08); overflow:hidden; }
#bootFill { height:100%; width:0%; background:linear-gradient(90deg,#4ECDC4,#FFCB6B); transition:width .2s; }
.boot-text { font-size:12px; color:#5d6a83; font-variant-numeric:tabular-nums; }

/* ---------- yerlesim: dunya ortada, paneller yanlarda ---------- */
.stage { position:fixed; inset:0; z-index:1; display:flex; align-items:stretch; }
.worldwrap { flex:1 1 auto; position:relative; min-width:0; }
.layer { position:absolute; inset:0; width:100%; height:100%; display:block; }
#field { z-index:1; }
#world { z-index:2; }

.side { flex:0 0 clamp(210px, 19vw, 290px); display:flex; flex-direction:column; gap:16px;
        padding:16px 14px; overflow-y:auto; background:rgba(0,0,15,.55); }
.side-left  { border-right:1px solid rgba(255,255,255,.07); }
.side-right { border-left:1px solid rgba(255,255,255,.07); }

.blk { display:flex; flex-direction:column; gap:7px; }
.blk-grow { flex:1 1 auto; min-height:120px; }
.blk-t { font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:#4ECDC4; }

.age { font-size:21px; color:#e8edf6; font-variant-numeric:tabular-nums; line-height:1.1; }
.age-row { display:flex; gap:6px; flex-wrap:wrap; }
.tag { font-size:9.5px; letter-spacing:.16em; color:#4ECDC4; border:1px solid #4ECDC455;
       border-radius:20px; padding:3px 8px; }
.tag.past { color:#FFCB6B; border-color:#FFCB6B55; }
.tag-sleep { color:#8a7a5c; border-color:#8a7a5c55; }

/* ---------- gostergeler ---------- */
.gauge { display:flex; justify-content:space-between; align-items:baseline;
         font-size:12.5px; color:#7b89a3; }
.g-v { color:#e8edf6; font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; }

.bar-g { display:grid; grid-template-columns:34px 1fr 30px; gap:7px; align-items:center;
         font-size:11.5px; color:#7b89a3; }
.bg-track { height:5px; background:rgba(255,255,255,.09); border-radius:3px; overflow:hidden; }
.bg-fill { display:block; height:100%; width:0%; border-radius:3px; transition:width .5s; }
.bg-pred { background:#ff7847; }
.bg-herb { background:#5ad07a; }
.bg-v { color:#cfd6e4; font-variant-numeric:tabular-nums; text-align:right; font-weight:600; }

.note { font-size:11px; line-height:1.5; color:#5d6a83; margin-top:2px; }

.scale { height:9px; border-radius:5px;
         background:linear-gradient(90deg, hsl(2,96%,52%), hsl(64,92%,50%), hsl(128,90%,46%)); }
.scale-lbl { display:flex; justify-content:space-between; font-size:10px; color:#61708a; }

.key { display:flex; align-items:center; gap:8px; font-size:11.5px; color:#8895ad; }
.k-dot { width:14px; height:14px; border-radius:50%; flex:0 0 14px; }
.k-small  { background:radial-gradient(circle, hsl(128,90%,70%) 0%, hsl(128,90%,50%) 30%, transparent 62%); }
.k-big    { background:radial-gradient(circle, hsl(20,92%,74%) 0%, hsl(20,92%,55%) 55%, transparent 88%); }
.k-dim    { background:radial-gradient(circle, hsla(128,80%,60%,.28) 0%, transparent 70%); }
.k-bright { background:radial-gradient(circle, #fff 0%, hsl(128,92%,60%) 45%, transparent 78%); }
.k-sw { width:14px; height:8px; border-radius:2px; flex:0 0 14px; }
.k-pop { background:rgba(120,220,150,.55); }
.k-prd { background:rgba(255,120,71,.75); }

.chart { width:100%; height:110px; display:block; cursor:crosshair; }

/* ---------- kontroller ---------- */
.btn { background:transparent; border:1px solid rgba(255,255,255,.18); color:#cfd6e4;
       border-radius:20px; padding:5px 11px; font-size:10.5px; letter-spacing:.12em; cursor:pointer; }
.btn:hover { border-color:#4ECDC4; color:#4ECDC4; }
.btn.on { border-color:#4ECDC4; color:#4ECDC4; }
.btn-wide { width:100%; padding:8px; margin-top:auto; }
.speeds { display:flex; gap:5px; flex-wrap:wrap; }
.speeds .spd { padding:5px 8px; }

.time { width:100%; -webkit-appearance:none; appearance:none; height:3px; background:rgba(255,255,255,.14);
        border-radius:2px; outline:none; }
.time::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
        background:#e8edf6; cursor:pointer; }
.time::-moz-range-thumb { width:13px; height:13px; border:none; border-radius:50%; background:#e8edf6; cursor:pointer; }
.time-label { font-size:11.5px; color:#7b89a3; font-variant-numeric:tabular-nums; }

.log-list { flex:1 1 auto; overflow-y:auto; margin:0 -14px; }
.log-item { display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
       padding:7px 14px; font-size:12px; color:#aab5c8; line-height:1.4; }
.log-item:hover { background:rgba(78,205,196,.08); color:#e8edf6; }
.log-time { display:block; font-size:10px; color:#61708a; font-variant-numeric:tabular-nums; }
.log-empty { padding:6px 14px; font-size:11.5px; color:#5d6a83; line-height:1.5; }

/* Dar ekran: yan panel kalmaz, dunya ustte kalir ve paneller ALTINA yiginlanir */
@media (max-width:900px){
  .stage { flex-direction:column; overflow-y:auto; }
  .worldwrap { flex:0 0 auto; height:min(62vh, 100vw); }
  .side { flex:0 0 auto; width:100%; border:none;
          border-top:1px solid rgba(255,255,255,.07); }
  .side-left { order:2; } .worldwrap { order:1; } .side-right { order:3; }
  .btn-wide { margin-top:8px; }
}

/* ---------- kilavuz ---------- */
.help { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
        padding:24px; background:rgba(0,0,15,.85); backdrop-filter:blur(3px); overflow-y:auto; }
.help-card { position:relative; width:min(720px,100%); max-height:calc(100vh - 48px); overflow-y:auto;
        background:rgba(255,255,255,.04); border:1px solid rgba(78,205,196,.35); border-radius:14px;
        box-shadow:0 0 1px rgba(78,205,196,.6), 0 14px 40px rgba(0,0,0,.6); padding:30px 32px; }
.help-close { position:absolute; top:12px; right:14px; background:none; border:none; color:#7b89a3;
        font-size:24px; line-height:1; cursor:pointer; }
.help-close:hover { color:#4ECDC4; }
.help-card h1 { font-size:17px; font-weight:600; color:#e8edf6; margin-bottom:12px; }
.help-card h2 { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#4ECDC4;
        margin:22px 0 8px; }
.help-card p { font-size:13.5px; line-height:1.62; color:#aab5c8; }
.help-lead { color:#cfd6e4 !important; margin-bottom:20px; }
.help-foot { margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08);
        font-size:12px; color:#6d7b93 !important; }
.help-grid { display:flex; flex-direction:column; gap:14px; }
.help-row { display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start;
        font-size:13.5px; line-height:1.6; color:#aab5c8; }
.help-row b { color:#e8edf6; font-weight:600; }
.sw { width:16px; height:16px; border-radius:50%; margin-top:3px; }
.sw-diet   { background:linear-gradient(90deg,hsl(2,96%,58%),hsl(64,96%,58%),hsl(128,96%,52%)); }
.sw-gut    { background:linear-gradient(90deg,hsl(96,96%,50%),hsl(96,56%,62%)); }
.sw-size   { background:radial-gradient(circle,hsl(20,90%,62%) 0%,hsl(20,90%,55%) 46%,transparent 68%); }
.sw-energy { background:radial-gradient(circle,#fff 0%,hsl(128,90%,56%) 40%,transparent 72%); }
.sw-field  { background:linear-gradient(135deg,hsla(4,80%,46%,.5),hsla(124,80%,46%,.5)); border-radius:4px; }
@media (max-width:600px){
  .help { padding:12px; }
  .help-card { padding:24px 20px; }
  .help-card p, .help-row { font-size:13px; }
}