*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --sky:#c8dbe6;
  --stone-top:#b8bfc8;--stone-left:#8e959e;--stone-right:#9ea5ae;
  --grass-top:#7db858;--grass-left:#4a8030;--grass-right:#5d9940;
  --text:#1a2332;--text2:#556;--text-light:#fff;
  --ui-bg:rgba(255,255,255,0.92);--ui-border:rgba(0,0,0,0.1);
  --ui-shadow:0 4px 20px rgba(0,0,0,0.12);
  --accent:#4a8030;
}
[data-theme="dark"]{
  --sky:#1a2332;
  --stone-top:#3a3f48;--stone-left:#2a2f38;--stone-right:#323840;
  --grass-top:#4a7838;--grass-left:#2a5018;--grass-right:#386828;
  --text:#d8dce0;--text2:#8a8e98;--text-light:#fff;
  --ui-bg:rgba(26,35,50,0.95);--ui-border:rgba(255,255,255,0.08);
  --ui-shadow:0 4px 20px rgba(0,0,0,0.4);
  --accent:#6ab848;
}

body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--sky);color:var(--text);min-height:100dvh;overflow:hidden;transition:background .3s}

/* Auth */
.auth{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;gap:16px}
.auth h1{font-size:32px;font-weight:300}.auth h1 b{font-weight:700;color:var(--accent)}
.auth p{color:var(--text2);font-size:13px}
.auth-btn{display:flex;align-items:center;gap:10px;padding:12px 24px;border-radius:10px;border:1px solid var(--ui-border);background:var(--ui-bg);color:var(--text);font-size:14px;cursor:pointer;box-shadow:var(--ui-shadow);transition:all .15s}
.auth-btn:hover{transform:translateY(-2px)}
.auth-btn svg{width:18px;height:18px}

/* HUD */
.hud{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--ui-bg);border-bottom:1px solid var(--ui-border);backdrop-filter:blur(12px)}
.hud h1{font-size:15px;font-weight:600}.hud h1 b{color:var(--accent)}
.hud-actions{display:flex;gap:6px}
.hud-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-bg);color:var(--text2);cursor:pointer;font-size:13px;transition:all .15s}
.hud-btn:hover{border-color:var(--accent);color:var(--accent)}

/* World */
.world{width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}

/* Isometric Grid */
.iso-grid{position:relative;transform:rotateX(55deg) rotateZ(-45deg);transform-style:preserve-3d;transition:transform .4s,opacity .3s}

/* Hex Tile */
.hex{position:absolute;width:var(--hw,100px);height:var(--hw,100px);cursor:pointer;transition:transform .15s,filter .15s;transform-style:preserve-3d}
.hex:hover{transform:translateZ(5px);filter:brightness(1.1)}
.hex:active{transform:translateZ(2px)}

.hex-top,.hex-left,.hex-right{position:absolute;transition:background .3s}
.hex-top{width:100%;height:100%;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);z-index:2}
.hex-left{width:50%;height:28%;bottom:-14%;left:0;transform:skewY(30deg);transform-origin:top left;z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,50% 100%)}
.hex-right{width:50%;height:28%;bottom:-14%;right:0;transform:skewY(-30deg);transform-origin:top right;z-index:1;clip-path:polygon(0 0,100% 0,50% 100%,0 100%)}

.hex.empty .hex-top{background:var(--stone-top)}.hex.empty .hex-left{background:var(--stone-left)}.hex.empty .hex-right{background:var(--stone-right)}.hex.empty{opacity:.45}.hex.empty:hover{opacity:.7}

/* Category tile colors */
.hex.cat-0 .hex-top{background:#5a9838}.hex.cat-0 .hex-left{background:#306818}.hex.cat-0 .hex-right{background:#407828}
.hex.cat-1 .hex-top{background:#6868c0}.hex.cat-1 .hex-left{background:#404098}.hex.cat-1 .hex-right{background:#5050a8}
.hex.cat-2 .hex-top{background:#c0a838}.hex.cat-2 .hex-left{background:#887018}.hex.cat-2 .hex-right{background:#a08828}
.hex.cat-3 .hex-top{background:#4090c0}.hex.cat-3 .hex-left{background:#206898}.hex.cat-3 .hex-right{background:#3078a8}
.hex.cat-4 .hex-top{background:#c05078}.hex.cat-4 .hex-left{background:#983050}.hex.cat-4 .hex-right{background:#a84060}
.hex.cat-5 .hex-top{background:#9060c0}.hex.cat-5 .hex-left{background:#684098}.hex.cat-5 .hex-right{background:#7850a8}

/* Hex label */
.hex-label{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);z-index:20;font-size:10px;font-weight:700;color:var(--text);white-space:nowrap;pointer-events:none;text-shadow:0 1px 3px rgba(255,255,255,0.7)}
[data-theme="dark"] .hex-label{text-shadow:0 1px 3px rgba(0,0,0,0.7)}

.hex-count{position:absolute;top:-6px;right:-6px;z-index:20;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:#e05040;color:#fff;border-radius:10px;font-size:9px;font-weight:800;padding:0 5px;pointer-events:none;box-shadow:0 2px 6px rgba(224,80,64,0.4)}

/* Buildings */
.building{position:absolute;left:50%;bottom:48%;transform:translateX(-50%);z-index:10;pointer-events:none}

.bld-tent{width:14px;height:18px}
.bld-tent::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:14px solid #c4956a}
.bld-tent::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:2px;height:18px;background:#8b6b4a}

.bld-hut{width:22px;height:26px}
.bld-hut-base{position:absolute;bottom:0;left:2px;right:2px;height:12px;background:#d4b896;border:1px solid #b89870}
.bld-hut-roof{position:absolute;bottom:10px;left:-1px;right:-1px;height:14px;background:#c0654a;clip-path:polygon(50% 0%,100% 100%,0% 100%)}

.bld-house{width:30px;height:34px}
.bld-house-base{position:absolute;bottom:0;left:2px;right:2px;height:18px;background:#e8dcc8;border:1px solid #c8b8a0}
.bld-house-roof{position:absolute;bottom:16px;left:-1px;right:-1px;height:16px;background:#c84040;clip-path:polygon(50% 0%,100% 100%,0% 100%)}
.bld-house-window{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;background:#6090c0;border:1px solid #4070a0}

.bld-mansion{width:36px;height:42px}
.bld-mansion-base{position:absolute;bottom:0;left:1px;right:1px;height:22px;background:#e8dcc8;border:1px solid #c8b8a0}
.bld-mansion-upper{position:absolute;bottom:20px;left:7px;right:7px;height:10px;background:#dcd0b8;border:1px solid #c8b8a0}
.bld-mansion-roof{position:absolute;bottom:28px;left:3px;right:3px;height:12px;background:#c84040;clip-path:polygon(50% 0%,100% 100%,0% 100%)}

.bld-castle{width:44px;height:52px}
.bld-castle-base{position:absolute;bottom:0;left:0;right:0;height:26px;background:#b0a898;border:1px solid #908880}
.bld-castle-tl,.bld-castle-tr{position:absolute;bottom:24px;width:10px;height:18px;background:#a09888;border:1px solid #887868}
.bld-castle-tl{left:0}.bld-castle-tr{right:0}
.bld-castle-tl::after,.bld-castle-tr::after{content:'';position:absolute;top:-7px;left:-1px;right:-1px;height:7px;background:#c84040;clip-path:polygon(0 100%,50% 0%,100% 100%)}
.bld-castle-gate{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:8px;height:12px;background:#584838;border-radius:4px 4px 0 0}
.bld-castle-flag{position:absolute;bottom:40px;left:50%;width:1px;height:14px;background:#887868}
.bld-castle-flag::after{content:'';position:absolute;top:0;left:1px;width:7px;height:5px;background:#c84040;clip-path:polygon(0 0,100% 30%,0 100%)}

/* Sub-grid overlay */
.sg-overlay{position:fixed;inset:0;z-index:60;background:var(--sky);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s}
.sg-overlay.show{opacity:1;pointer-events:all}

.sg-header{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--ui-bg);border-bottom:1px solid var(--ui-border);backdrop-filter:blur(12px)}
.sg-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font-size:16px}
.sg-title{font-size:14px;font-weight:600;flex:1}
.sg-progress{font-size:11px;color:var(--text2)}

.sg-content{flex:1;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:20px}

.sub-grid{position:relative;transform:rotateX(55deg) rotateZ(-45deg);transform-style:preserve-3d}

.sub-hex{--hw:68px;position:absolute;width:var(--hw);height:var(--hw);cursor:pointer;transition:transform .15s,filter .15s;transform-style:preserve-3d}
.sub-hex:hover{transform:translateZ(4px);filter:brightness(1.1)}
.sub-hex.active .hex-top{background:var(--grass-top)}.sub-hex.active .hex-left{background:var(--grass-left)}.sub-hex.active .hex-right{background:var(--grass-right)}
.sub-hex.empty .hex-top{background:var(--stone-top)}.sub-hex.empty .hex-left{background:var(--stone-left)}.sub-hex.empty .hex-right{background:var(--stone-right)}
.sub-hex.empty{opacity:.35}.sub-hex.empty:hover{opacity:.6}
.sub-hex.done{opacity:.35}.sub-hex.done .sub-label{text-decoration:line-through}

.sub-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;font-size:8px;font-weight:600;color:var(--text);text-align:center;max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px rgba(255,255,255,0.8)}
[data-theme="dark"] .sub-label{text-shadow:0 1px 2px rgba(0,0,0,0.8)}

.sub-check{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:25;font-size:18px;opacity:0;pointer-events:none;color:var(--accent)}
.sub-hex.done .sub-check{opacity:.9}

/* Input bar */
.sg-input{padding:10px 16px;background:var(--ui-bg);border-top:1px solid var(--ui-border);display:flex;gap:8px;align-items:center;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.sg-input input{flex:1;padding:10px 12px;border:1px solid var(--ui-border);border-radius:10px;background:transparent;color:var(--text);font-size:13px;outline:none;font-family:inherit}
.sg-input input:focus{border-color:var(--accent)}
.sg-input input::placeholder{color:var(--text2)}
.sg-input button{width:40px;height:40px;border:none;background:var(--accent);color:#fff;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;transition:transform .12s}
.sg-input button:hover{transform:scale(1.05)}

/* FAB */
.fab{position:fixed;bottom:24px;right:24px;z-index:40;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:24px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.25);transition:transform .15s}
.fab:hover{transform:scale(1.1)}.fab:active{transform:scale(.95)}

/* Quick add modal */
.qa-modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0.3)}
.qa-modal.show{display:flex}
.qa-sheet{width:100%;max-width:420px;background:var(--ui-bg);border-radius:16px 16px 0 0;padding:20px 16px;padding-bottom:max(20px,env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(0,0,0,0.15);backdrop-filter:blur(12px)}
.qa-sheet h3{font-size:14px;margin-bottom:10px;font-weight:600}
.qa-sheet input{width:100%;padding:11px 14px;border:1px solid var(--ui-border);border-radius:10px;background:transparent;color:var(--text);font-size:14px;outline:none;font-family:inherit;margin-bottom:10px}
.qa-sheet input:focus{border-color:var(--accent)}
.qa-cats{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.qa-cats button{padding:5px 10px;border-radius:14px;border:1px solid var(--ui-border);background:transparent;color:var(--text2);font-size:11px;cursor:pointer;font-family:inherit;transition:all .12s}
.qa-cats button.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.qa-send{width:100%;padding:11px;border:none;background:var(--accent);color:#fff;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}

.hide{display:none!important}