/* COGLINGS UI v3 — GLASS
   ----------------------
   Modern game HUD (inZOI / GTA-style): frosted translucent panels floating
   over the living valley, dark glass bars, white-pill active states, soft
   depth instead of ink outlines. Loaded AFTER each page's own <style> so
   these base rules win ties while page components keep working. */

:root{
  --ink:#1B222C; --ink2:#5A6675; --line:rgba(27,34,44,.12);
  --sim:#35D48F; --sim-d:#178A52;
  --city:#3D9BE9; --city-d:#2670B4;
  --gold:#F0B54A; --gold-d:#C08A2E;
  --paper:#FFFDF4;
  --glass:rgba(255,255,255,.55); --glass-edge:rgba(255,255,255,.65);
  --dark:rgba(20,26,34,.6); --dark-solid:rgba(22,28,36,.88); --dark-edge:rgba(255,255,255,.16);
  --shadow-hard:0 10px 32px rgba(15,25,40,.22);
  --shadow-soft:0 20px 50px rgba(15,25,40,.16);
  --blur:blur(18px) saturate(1.5);
}

/* ---- the world outside the windows: layered valley scene ---- */
body{
  font-family:'Plus Jakarta Sans',sans-serif; color:var(--ink); min-height:100vh;
  font-size:17px; line-height:1.55;
  padding-bottom:128px !important;   /* room for the game dock */
  background-color:#9BD8F0;
  background-image:
    radial-gradient(1000px 520px at 82% -10%, rgba(255,243,190,.6), transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420'%3E%3Cg fill='%23ffffff'%3E%3Cg opacity='.34'%3E%3Cellipse cx='120' cy='70' rx='74' ry='24'/%3E%3Cellipse cx='176' cy='58' rx='48' ry='18'/%3E%3Cellipse cx='84' cy='58' rx='38' ry='15'/%3E%3C/g%3E%3Cg opacity='.2'%3E%3Cellipse cx='470' cy='180' rx='88' ry='26'/%3E%3Cellipse cx='534' cy='168' rx='52' ry='19'/%3E%3C/g%3E%3Cg opacity='.26'%3E%3Cellipse cx='250' cy='330' rx='60' ry='19'/%3E%3Cellipse cx='296' cy='320' rx='38' ry='14'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath d='M0,180 C240,110 420,190 640,150 C860,110 1080,190 1440,130 L1440,300 L0,300 Z' fill='%2377B565' opacity='.45'/%3E%3Cpath d='M0,230 C300,170 560,250 860,205 C1120,170 1300,235 1440,205 L1440,300 L0,300 Z' fill='%235FA352' opacity='.55'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#6FC0F0 0%,#9BD8F0 30%,#C6E9AA 70%,#8FCB7C 100%);
  background-repeat:no-repeat,repeat-x,no-repeat,no-repeat;
  background-position:top,0 4%,bottom center,top;
  background-size:auto,auto,100% 300px,100% 100%;
}
/* subtle screen vignette — reads "game", not "page" */
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 42%, transparent 62%, rgba(8,18,28,.2) 100%)}
h1{font-family:'Outfit',sans-serif;letter-spacing:-.01em}

/* page-to-page: crossfade like switching game menus; chrome stays anchored */
@view-transition{navigation:auto}
.hudbar{view-transition-name:cog-hud}
.dock{view-transition-name:cog-dock}
@keyframes cog-pagein{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){body{animation:cog-pagein .18s ease-out}}

/* ---- HUD bar: floating dark glass, like a game's top toolbar ---- */
.hudbar{
  position:sticky; top:12px; z-index:90;
  display:flex; align-items:center; gap:9px; row-gap:7px; flex-wrap:wrap;
  background:var(--dark);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--dark-edge); border-radius:100px;
  padding:9px 16px; margin-bottom:24px;
  color:#F2F5F8;
  box-shadow:var(--shadow-hard);
}
.hudbar .brand{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.1rem;color:var(--ink);text-decoration:none;white-space:nowrap;display:flex;align-items:center;background:rgba(255,255,255,.92);border-radius:100px;padding:6px 14px}
.hudbar .brand em{font-style:normal;color:var(--sim-d)}
.hudbar .brand img{height:22px;display:block}
.hudstat{font-family:'Space Grotesk',sans-serif;font-size:.66rem;font-weight:700;color:rgba(240,245,250,.85);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:6px 12px;white-space:nowrap}
.hudstat b{color:#fff}
.hudstat i{color:#9FE8C6;margin-right:2px;font-size:.9em}
.hudtick{flex:1 1 140px;min-width:0;font-family:'Space Grotesk',sans-serif;font-size:.68rem;font-weight:500;color:rgba(240,245,250,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .5s;text-align:right;padding:0 4px}
.hudtick.on{opacity:1}
.hudacct{font-family:'Outfit',sans-serif;font-size:.8rem;font-weight:800;color:var(--ink);text-decoration:none;background:rgba(255,255,255,.92);border:none;border-radius:100px;padding:8px 15px;white-space:nowrap;margin-left:auto;transition:background .15s}
.hudacct:hover{background:#fff}
.hudacct i{margin-right:3px;opacity:.75}
.hudtick+.hudacct{margin-left:0}
.hudico{position:relative;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(240,245,250,.85);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);cursor:pointer;text-decoration:none;font-size:.85rem;flex:0 0 auto;transition:background .15s}
.hudico:hover{background:rgba(255,255,255,.2);color:#fff}
.hudico b{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:100px;background:#E85834;color:#fff;font-size:.6rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;font-family:'Space Grotesk',sans-serif}
.bellmenu{position:fixed;top:70px;right:22px;z-index:97;width:min(360px,92vw);max-height:60vh;overflow:auto;background:rgba(24,30,38,.9);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--dark-edge);border-radius:18px;padding:12px;box-shadow:var(--shadow-hard);color:#EAF0F6}
.bellmenu .bhead{font-family:'Space Grotesk',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.1em;color:#9FE8C6;padding:2px 6px 10px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:6px}
.bellmenu .bev{font-size:.8rem;font-weight:600;padding:7px 6px;border-bottom:1px solid rgba(255,255,255,.06);line-height:1.45}
.bellmenu .bev b{color:#9FE8C6}
.bellmenu .ball{display:block;text-align:center;font-family:'Outfit',sans-serif;font-weight:700;font-size:.82rem;color:#fff;padding:10px 6px 4px;text-decoration:none}
@media(max-width:760px){.hudbar{position:static;border-radius:22px}}

/* ---- the game dock: dark glass pill, white-pill active (inZOI tab bar) ---- */
.dock{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:4px;
  background:var(--dark);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--dark-edge);border-radius:100px;padding:8px 10px;
  box-shadow:var(--shadow-hard), 0 2px 0 rgba(255,255,255,.06) inset}
.dock .di{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:54px;height:50px;padding:0 9px;border-radius:15px;font-size:1.02rem;
  color:rgba(240,245,250,.82);background:transparent;border:none;text-decoration:none;
  transition:background .15s,color .15s,transform .12s;flex:0 0 auto;cursor:pointer}
.dock .di .dl{font-family:'Outfit',sans-serif;font-size:.56rem;font-weight:800;letter-spacing:.01em;line-height:1}
.dock .di:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-2px)}
.dock .di.on{background:#fff;color:var(--ink)}
.dockgrp{position:relative}
.dockgrp>summary{list-style:none}
.dockgrp>summary::-webkit-details-marker{display:none}
.dockgrp-head{font-family:'Space Grotesk',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.14em;color:rgba(159,232,198,.9);padding:6px 13px 8px;display:flex;flex-direction:column;gap:3px}
.dockgrp-sub{font-family:'Plus Jakarta Sans',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:0;text-transform:none;color:rgba(240,245,250,.62)}
.dock .me{width:56px;height:56px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 3px rgba(53,212,143,.45),0 6px 18px rgba(0,0,0,.35);margin:0 6px;background:#BFE3F7;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--ink);text-decoration:none;flex:0 0 auto;transition:transform .12s}
.dock .me:hover{transform:translateY(-3px)}
.dock .me img{width:100%;height:100%;image-rendering:pixelated;display:block}
.dockmore-menu{position:absolute;right:0;bottom:calc(100% + 16px);z-index:96;display:flex;flex-direction:column;gap:2px;min-width:206px;max-width:calc(100vw - 28px);
  background:rgba(24,30,38,.92);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--dark-edge);border-radius:18px;padding:8px;box-shadow:var(--shadow-hard)}
.dockmore-menu a{font-family:'Outfit',sans-serif;font-size:.86rem;font-weight:700;color:rgba(240,245,250,.85);text-decoration:none;padding:10px 13px;border-radius:12px;white-space:nowrap}
.dockmore-menu a:hover{background:rgba(255,255,255,.12);color:#fff}
.dockmore-menu a.on{background:#fff;color:var(--ink)}
.dockmore-menu a i{width:1.3em;text-align:center;margin-right:4px;opacity:.8}
@media(max-width:640px){
  .dock{gap:2px;padding:6px 7px;bottom:10px;max-width:97vw}
  .dock .di{min-width:46px;height:46px;padding:0 5px;font-size:.96rem;gap:2px}
  .dock .di .dl{font-size:.5rem}
  .dock .me{width:48px;height:48px;margin:0 3px}
  .hudstat.sec{display:none}
  body{padding-bottom:108px !important}
}

/* inside the in-game tablet (an iframe): the tablet frame IS the chrome */
html.intab .hudbar,html.intab .dock{display:none}
html.intab body{padding-bottom:28px !important;background:transparent}
html.intab body::after{display:none}

/* ---- frosted panels ---- */
.card,.tile,.lb,.buy,.mapcard,.skillpanel{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge); border-radius:22px;
  box-shadow:0 10px 34px rgba(15,25,40,.16);
  transition:transform .15s, box-shadow .15s;
}
.card:hover,.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.how{background:rgba(24,32,40,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:#DFF2E6;border:1px solid var(--dark-edge);border-radius:18px;box-shadow:var(--shadow-hard)}
.mapcard{overflow:hidden;border-radius:24px}

/* ---- buttons: dark glass pills, quiet and modern ---- */
.btn,a.cta,a.go,.big-cta{
  font-family:'Outfit',sans-serif;font-weight:700;cursor:pointer;color:#fff;
  background:var(--dark-solid);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22); border-radius:100px;
  box-shadow:0 8px 24px rgba(10,20,32,.3);
  transition:transform .1s, background .15s, box-shadow .15s;
}
.btn:hover,a.cta:hover,a.go:hover,.big-cta:hover{background:rgba(38,48,60,.92);transform:translateY(-1px);box-shadow:0 12px 28px rgba(10,20,32,.35)}
.btn:active,a.cta:active,a.go:active{transform:translateY(1px);box-shadow:0 4px 14px rgba(10,20,32,.3)}
.btn:disabled{opacity:.5;transform:none}
.btn.move{background:rgba(240,181,74,.92);color:#241804;border-color:rgba(255,255,255,.4)}
.btn.move:hover{background:rgba(247,195,96,.96)}
.btn.open{background:rgba(226,92,56,.92);border-color:rgba(255,255,255,.35)}
.btn.open:hover{background:rgba(238,108,72,.96)}

/* ---- meters & bars ---- */
.meter,.thermo,.lbbar,.bar{border:none;background:rgba(20,30,42,.14);border-radius:100px;overflow:hidden}
.meter i,.thermo i,.lbbar i,.bar i{background:linear-gradient(90deg,#5FF0AC,#22B571);border-radius:100px}
.bar i.low{background:linear-gradient(90deg,#F0A08C,#D96A4A)}

/* ---- tables ---- */
table{border-collapse:collapse}
th{font-family:'Space Grotesk',sans-serif;color:var(--ink2)}
td{border-bottom:1px solid var(--line)}
tr:hover td{background:rgba(255,255,255,.35)}

/* ---- chips ---- */
.mono{font-family:'Space Grotesk',sans-serif}
.cstat{background:rgba(255,255,255,.5);border:1px solid var(--glass-edge);box-shadow:none}
.stchip,.partner,.rank,.odd,.rchip{border:1px solid rgba(255,255,255,.55) !important;box-shadow:none}
.note{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);box-shadow:0 8px 24px rgba(15,25,40,.14)}

/* ---- pixel citizen portraits (avatar.php) ---- */
.av{overflow:hidden;background:#BFE3F7}
.av img,.rav img{width:100%;height:100%;display:block;image-rendering:pixelated;border-radius:inherit}
img[src^="avatar.php"],img[src*="avatar.php?"]{border-color:rgba(255,255,255,.8) !important}
.who .av{border:2px solid rgba(255,255,255,.85);box-shadow:0 8px 22px rgba(15,25,40,.25);animation:av-bob 3s ease-in-out infinite}
@keyframes av-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---- the plumbob over YOUR citizen ---- */
.who{position:relative;margin-top:18px}
.who .av::after{content:'';position:absolute;top:-20px;left:50%;margin-left:-7px;width:14px;height:14px;background:linear-gradient(135deg,#5FF0AC,#149A5C);transform:rotate(45deg);border-radius:3px;box-shadow:0 0 14px rgba(53,212,143,.8);animation:plumbob 2.2s ease-in-out infinite}
@keyframes plumbob{0%,100%{top:-20px}50%{top:-26px}}
.who .av{position:relative;overflow:visible}
.who .av img{border-radius:14px;border:none}

/* ---- links ---- */
a{color:inherit}
.card a:not(.btn):not(.go):not(.cta){color:var(--sim-d);font-weight:800}