/* Groveheart Online - mobile HTML5 client. Mobile-first, landscape. */
:root {
  --bg: #0c1d14;
  --panel: rgba(14, 33, 24, 0.94);
  --panel-2: rgba(24, 52, 38, 0.92);
  --panel-line: rgba(160, 220, 170, 0.18);
  --text: #eef3e6;
  --muted: #a7b8a6;
  --accent: #6fd48b;
  --accent-2: #3fae66;
  --gold: #ffd76a;
  --danger: #ef5d55;
  --hp: #e5534b;
  --mp: #4c8df0;
  --exp: #b58cff;
  --radius: 14px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ui: 1;
  font-size: calc(15px * var(--ui));
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; touch-action: auto; }
button { font: inherit; color: inherit; }
#game { position: fixed; inset: 0; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#ui > * { pointer-events: auto; }
.ico { width: 1.35em; height: 1.35em; display: block; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- boot */
.boot { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: radial-gradient(circle at 50% 40%, #1b3d2a, #08130d 70%); transition: opacity .4s; }
.boot.out { opacity: 0; pointer-events: none; }
.boot-emblem { width: 96px; height: 96px; animation: pulse 1.6s ease-in-out infinite; }
.boot-text { color: var(--muted); letter-spacing: .08em; font-size: .9rem; }
@keyframes pulse { 50% { transform: scale(1.06); filter: brightness(1.15); } }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; }

/* ---------------------------------------------------------------- generic controls */
.btn { appearance: none; border: 1px solid var(--panel-line); background: rgba(255,255,255,0.06); color: var(--text);
  border-radius: 11px; padding: .62em 1.05em; font-weight: 600; cursor: pointer; min-height: 42px; transition: transform .08s, background .15s; }
.btn:active { transform: scale(.97); }
.btn:hover { background: rgba(255,255,255,0.1); }
.btn-primary { background: linear-gradient(180deg, #6fd48b, #3a9f5c); border-color: #8be3a3; color: #08200f; }
.btn-primary:hover { background: linear-gradient(180deg, #7fe09a, #43ad67); }
.btn-danger { background: linear-gradient(180deg, #f0716a, #b8372f); border-color: #ff9d97; color: #fff; }
.btn-small { min-height: 34px; padding: .35em .8em; font-size: .88rem; border-radius: 9px; }
.btn:disabled { opacity: .45; pointer-events: none; }
.icon-btn { appearance: none; border: 0; background: transparent; padding: 8px; border-radius: 10px; cursor: pointer; color: var(--text); display: grid; place-items: center; }
.icon-btn:hover { background: rgba(255,255,255,0.08); }
.input { width: 100%; background: rgba(0,0,0,0.35); border: 1px solid var(--panel-line); color: var(--text); border-radius: 10px;
  padding: .7em .85em; font-size: 16px; outline: none; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(111,212,139,0.18); }
label.field { display: grid; gap: 4px; font-size: .82rem; color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.err { color: #ff9b94; min-height: 1.2em; font-size: .88rem; }
.row { display: flex; gap: 8px; align-items: center; }
.grow { flex: 1; }
.spacer { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .75rem;
  background: rgba(255,255,255,.08); color: var(--muted); }
.chip.ok { background: rgba(111,212,139,.16); color: #9ff0b5; }
.chip.bad { background: rgba(239,93,85,.16); color: #ffb0aa; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }

/* ---------------------------------------------------------------- front-end scenes */
.scene { position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  padding: calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) calc(10px + var(--safe-b)) calc(14px + var(--safe-l)); }
.scene-bg { position: absolute; inset: -6%; background: #0c1d14 center/cover no-repeat; filter: saturate(.9) brightness(.55) blur(1px);
  animation: kenburns 60s ease-in-out infinite alternate; z-index: -2; }
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 30% 50%, rgba(10,30,18,.15), rgba(6,16,10,.85) 75%); }
@keyframes kenburns { from { transform: scale(1.05) translate(-1%, -1%); } to { transform: scale(1.18) translate(2%, 1.5%); } }
.glass { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.login-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 380px); gap: clamp(14px, 4vw, 48px); align-items: center; width: min(980px, 100%); }
.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.brand-logo { width: min(440px, 100%); filter: drop-shadow(0 8px 24px rgba(0,0,0,.5)); }
.brand-tag { color: #d9ecd2; font-size: .95rem; letter-spacing: .02em; text-shadow: 0 2px 6px #000; }
.brand-by { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; margin-top: 6px; }
.brand-by img { height: 18px; }
.login-card { padding: 18px 18px 14px; display: grid; gap: 10px; }
.login-card h2 { margin: 0 0 2px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.server-status { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); }
.server-status .dot.on { color: var(--accent); box-shadow: 0 0 8px var(--accent); }
.server-status .dot.off { color: var(--danger); }
.login-foot { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--muted); }

.cs-wrap { width: min(1040px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; }
.cs-head { display: flex; align-items: center; gap: 12px; }
.cs-head img { height: 40px; }
.cs-head h2 { margin: 0; font-size: 1.15rem; flex: 1; }
.cs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cs-card { position: relative; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  min-height: 190px; border-radius: 16px; transition: transform .12s, border-color .12s; text-align: center; }
.cs-card:hover { transform: translateY(-2px); }
.cs-card.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(111,212,139,.35), 0 18px 40px rgba(0,0,0,.45); }
.cs-card canvas.preview { width: 96px; height: 110px; }
.cs-card .portrait { width: 72px; height: 72px; border-radius: 14px; border: 2px solid rgba(255,255,255,.12); background: #0006; }
.cs-card .name { font-weight: 700; font-size: 1rem; }
.cs-card .meta { font-size: .78rem; color: var(--muted); }
.cs-card.empty { justify-content: center; color: var(--muted); border-style: dashed; background: rgba(14,33,24,.6); }
.cs-card.empty .plus { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(111,212,139,.12); color: var(--accent); }
.cs-card.hidden { opacity: .35; pointer-events: none; }
.cs-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }

.cc-wrap { width: min(1040px, 100%); max-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; }
.cc-preview { padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
.cc-preview canvas { width: 180px; height: 200px; }
.cc-preview .job-name { font-size: 1.2rem; font-weight: 800; }
.cc-preview .job-desc { color: var(--muted); font-size: .85rem; text-align: center; max-width: 320px; }
.cc-form { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.cc-jobs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cc-job { appearance: none; border: 2px solid transparent; border-radius: 12px; padding: 4px; background: rgba(0,0,0,.25); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .7rem; color: var(--muted); }
.cc-job img, .cc-job canvas { width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 9px; }
.cc-job.sel { border-color: var(--accent); color: var(--text); background: rgba(111,212,139,.12); }
.cc-colors { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.cc-color { appearance: none; aspect-ratio: 1; border-radius: 6px; border: 2px solid rgba(0,0,0,.4); cursor: pointer; padding: 0; min-width: 0; }
.cc-color.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); transform: scale(1.12); }

/* ---------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-status { position: absolute; left: calc(8px + var(--safe-l)); top: calc(8px + var(--safe-t)); display: flex; gap: 8px; align-items: flex-start;
  padding: 6px 10px 6px 6px; border-radius: 16px; background: linear-gradient(180deg, rgba(10,26,18,.82), rgba(10,26,18,.6));
  border: 1px solid var(--panel-line); min-width: 210px; max-width: 46vw; }
.hud-portrait { position: relative; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: #0007; flex: none; cursor: pointer;
  border: 2px solid rgba(255,255,255,.15); }
.hud-portrait canvas { width: 100%; height: 100%; display: block; }
.hud-level { position: absolute; right: 0; bottom: 0; background: rgba(0,0,0,.75); color: var(--gold); font-weight: 800; font-size: .7rem;
  padding: 0 4px; border-top-left-radius: 6px; }
.hud-bars { flex: 1; display: grid; gap: 3px; min-width: 120px; }
.hud-name { font-weight: 700; font-size: .85rem; display: flex; gap: 6px; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-name small { color: var(--muted); font-weight: 500; font-size: .7rem; }
.bar { position: relative; height: 13px; border-radius: 7px; background: rgba(0,0,0,.55); overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; transition: width .25s; }
.bar > span { position: absolute; inset: 0; font-size: .62rem; line-height: 12px; text-align: center; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.bar.hp > i { background: linear-gradient(180deg, #ff7b70, #c9362e); }
.bar.mp > i { background: linear-gradient(180deg, #6fb0ff, #2f6fd6); }
.bar.exp { height: 5px; }
.bar.exp > i { background: linear-gradient(90deg, #9f7bff, #d5b8ff); }
.hud-buffs { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 2px; }
.hud-buffs img { width: 18px; height: 18px; border-radius: 4px; }

.hud-target { position: absolute; left: 50%; top: calc(8px + var(--safe-t)); transform: translateX(-50%); padding: 4px 10px; border-radius: 12px;
  background: rgba(10,26,18,.78); border: 1px solid var(--panel-line); min-width: 170px; text-align: center; font-size: .78rem; }
.hud-target .bar { height: 8px; margin-top: 3px; }

.hud-topright { position: absolute; right: calc(8px + var(--safe-r)); top: calc(8px + var(--safe-t)); display: flex; gap: 8px; align-items: flex-start; }
.hud-buttons { display: grid; grid-template-columns: repeat(5, 40px); gap: 5px; }
.hud-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--panel-line); background: rgba(10,26,18,.78);
  color: #dfeedd; display: grid; place-items: center; cursor: pointer; padding: 0; }
.hud-btn:active { transform: scale(.94); }
.hud-btn.active { background: rgba(111,212,139,.25); border-color: var(--accent); color: #fff; }
.hud-btn .badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--danger); color: #fff;
  font-size: .62rem; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
.minimap { position: relative; width: 132px; height: 132px; border-radius: 16px; overflow: hidden; border: 2px solid rgba(160,220,170,.35);
  background: #0b1610; box-shadow: 0 6px 16px rgba(0,0,0,.4); cursor: pointer; }
.minimap canvas { width: 100%; height: 100%; display: block; }
.minimap-label { position: absolute; left: 0; right: 0; bottom: 0; font-size: .62rem; text-align: center; padding: 2px 4px; background: rgba(0,0,0,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minimap-coords { position: absolute; left: 0; right: 0; top: 0; font-size: .58rem; text-align: center; color: #cfe; background: rgba(0,0,0,.4); }
.minimap-phase { position: absolute; left: 4px; top: 14px; width: 20px; height: 20px; image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); }

/* joystick */
.joy { position: absolute; bottom: calc(14px + var(--safe-b)); left: calc(14px + var(--safe-l)); width: 150px; height: 150px; touch-action: none; }
.joy.right { left: auto; right: calc(14px + var(--safe-r)); }
.joy-zone { position: absolute; inset: -40px -60px -14px -14px; }
.joy-base { position: absolute; left: 15px; top: 15px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 2px solid rgba(220,255,225,.22); box-shadow: inset 0 0 18px rgba(0,0,0,.35); }
.joy-knob { position: absolute; left: 50px; top: 50px; width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bff3cb, #4cae6b 70%); border: 2px solid rgba(255,255,255,.5); box-shadow: 0 4px 12px rgba(0,0,0,.5); transition: transform .05s; }
.joy.active .joy-base { border-color: rgba(160,255,190,.5); }

/* action cluster */
.actions { position: absolute; right: calc(12px + var(--safe-r)); bottom: calc(12px + var(--safe-b)); width: 250px; height: 210px; }
.actions.left { right: auto; left: calc(12px + var(--safe-l)); }
.act { position: absolute; border-radius: 50%; border: 2px solid rgba(220,255,225,.28); background: rgba(10,26,18,.72); color: #f0f7ec;
  display: grid; place-items: center; padding: 0; cursor: pointer; touch-action: none; overflow: hidden; }
.act:active, .act.pressed { transform: scale(.93); filter: brightness(1.2); }
.act-attack { width: 86px; height: 86px; right: 4px; bottom: 6px; background: radial-gradient(circle at 40% 30%, #ff9d7a, #c33d2a 70%); border-color: rgba(255,220,200,.6); }
.act-attack .ico { width: 42px; height: 42px; }
.act-interact { width: 54px; height: 54px; right: 102px; bottom: 0px; background: radial-gradient(circle at 40% 30%, #ffe99b, #c09126 70%); border-color: rgba(255,240,190,.6); color: #2a1d00; }
.act-interact .ico { width: 26px; height: 26px; }
.act-interact span.lbl { position: absolute; bottom: 3px; font-size: .5rem; font-weight: 800; }
.act-skill { width: 52px; height: 52px; }
.act-skill img { width: 40px; height: 40px; border-radius: 50%; pointer-events: none; }
.act-skill.empty { border-style: dashed; color: rgba(255,255,255,.35); }
.act-skill.nomp img { filter: grayscale(1) brightness(.6); }
.act-skill .cd { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.act-skill .cdt { position: absolute; font-weight: 800; font-size: .8rem; text-shadow: 0 1px 3px #000; pointer-events: none; }
.act-item { width: 44px; height: 44px; border-radius: 12px; }
.act-item img { width: 32px; height: 32px; pointer-events: none; }
.act-item .cnt { position: absolute; right: 3px; bottom: 1px; font-size: .62rem; font-weight: 800; text-shadow: 0 1px 2px #000; pointer-events: none; }
.act-item.empty { border-style: dashed; color: rgba(255,255,255,.3); }
.act-small { width: 40px; height: 40px; }
.act-small .ico { width: 20px; height: 20px; }

/* chat */
.chat-mini { position: absolute; left: calc(176px + var(--safe-l)); bottom: calc(10px + var(--safe-b)); max-width: min(420px, 38vw); font-size: .78rem;
  display: flex; flex-direction: column; gap: 2px; pointer-events: auto; cursor: pointer; }
.chat-mini .line { background: rgba(0,0,0,.42); padding: 2px 8px; border-radius: 8px; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fadein .25s; }
.chat-line .nm { font-weight: 700; margin-right: 4px; }
.ct-system { color: #ffe08a; } .ct-party { color: #8fd3ff; } .ct-nest { color: #9ff0b5; } .ct-whisper { color: #ff9fe0; } .ct-shout { color: #ffb36b; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }
.cast-bar { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); width: 200px; }
.cast-bar .bar > i { background: linear-gradient(90deg, #ffd76a, #ffb347); }

/* ---------------------------------------------------------------- toasts */
#toasts { position: fixed; top: calc(70px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center;
  pointer-events: none !important; z-index: 40; }
.toast { padding: 7px 14px; border-radius: 12px; background: rgba(10,26,18,.92); border: 1px solid var(--panel-line); font-size: .85rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: opacity .35s, transform .35s; animation: fadein .2s; max-width: 80vw; text-align: center; }
.toast.out { opacity: 0; transform: translateY(-6px); }
.toast-warn { border-color: rgba(255,200,100,.5); color: #ffe0a3; }
.toast-error { border-color: rgba(255,120,110,.6); color: #ffc0bb; }
.toast-good { border-color: rgba(111,212,139,.7); color: #b8ffcb; }

/* ---------------------------------------------------------------- sheets */
.sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,0); transition: background .2s; z-index: 20; display: flex; justify-content: flex-end; }
.sheet-back.open { background: rgba(0,0,0,.28); }
.sheet { width: min(470px, 56vw); height: 100%; background: var(--panel); border-left: 1px solid var(--panel-line); display: flex; flex-direction: column;
  transform: translateX(30px); opacity: 0; transition: transform .2s, opacity .2s; padding-right: var(--safe-r); box-shadow: -18px 0 40px rgba(0,0,0,.4); }
.sheet-wide { width: min(760px, 78vw); }
.sheet-back.open .sheet { transform: none; opacity: 1; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-t)) 8px 6px 16px; border-bottom: 1px solid var(--panel-line); }
.sheet-head h2 { margin: 0; font-size: 1.05rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-body { flex: 1; overflow: auto; padding: 12px 14px calc(14px + var(--safe-b)); -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
.tabs { display: flex; gap: 4px; padding: 3px; background: rgba(0,0,0,.25); border-radius: 12px; margin-bottom: 10px; }
.tab { flex: 1; appearance: none; border: 0; background: transparent; color: var(--muted); padding: 7px 6px; border-radius: 9px; font-weight: 600; cursor: pointer; font-size: .85rem; }
.tab.on { background: rgba(111,212,139,.2); color: var(--text); }
.section-title { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 12px 0 6px; }
.list { display: flex; flex-direction: column; gap: 6px; }
.list-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid transparent; }
.list-item.click { cursor: pointer; }
.list-item.click:hover { background: rgba(255,255,255,.07); }
.list-item .ic { width: 38px; height: 38px; border-radius: 9px; background: rgba(0,0,0,.35); display: grid; place-items: center; flex: none; overflow: hidden; }
.list-item .ic img { max-width: 34px; max-height: 34px; }
.list-item .t { flex: 1; min-width: 0; }
.list-item .t b { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .t small { display: block; color: var(--muted); font-size: .76rem; }

/* bag */
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; }
.slot { position: relative; aspect-ratio: 1; border-radius: 10px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.07);
  display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--muted); min-width: 0; }
.slot img { width: 72%; height: 72%; object-fit: contain; image-rendering: auto; pointer-events: none; }
.slot .cnt { position: absolute; right: 3px; bottom: 1px; font-size: .66rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; }
.slot.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.slot .lbl { font-size: .55rem; text-align: center; padding: 2px; color: rgba(255,255,255,.35); }
.slot.locked { opacity: .3; }
.equip-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.money { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--gold); }
.item-detail { margin-top: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--panel-line); }
.item-detail h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.item-detail h4 img { width: 36px; height: 36px; }
.item-detail p { margin: 4px 0; font-size: .82rem; color: var(--muted); }
.item-detail .stats { font-size: .8rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 6px 0; }
.item-detail .btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* character */
.char-head { display: flex; gap: 12px; align-items: center; }
.char-head canvas { width: 72px; height: 72px; border-radius: 14px; background: #0006; }
.stat-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 10px; align-items: center; }
.stat-grid .v { font-weight: 800; text-align: right; }
.stat-grid .bonus { color: var(--accent); font-size: .78rem; }
.plus-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--accent); background: rgba(111,212,139,.18); color: var(--accent); display: grid; place-items: center; cursor: pointer; padding: 0; }
.plus-btn:disabled { opacity: .2; }
.kv { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 4px 12px; font-size: .84rem; }
.kv b { text-align: right; }

/* markup */
.markup { font-size: .92rem; line-height: 1.45; }
.mk-line { min-height: 1.35em; }
.mk-empty { min-height: .7em; }
.mk-link { appearance: none; display: block; width: 100%; text-align: left; margin: 4px 0; padding: 9px 12px; border-radius: 11px; cursor: pointer;
  background: rgba(130,173,255,.12); border: 1px solid rgba(130,173,255,.35); color: #b9d0ff; font-weight: 600; }
.mk-link:hover { background: rgba(130,173,255,.2); }
.mk-img { vertical-align: middle; max-height: 40px; margin: 2px 4px; }
.mk-itemimg { width: 32px; height: 32px; border-radius: 6px; background: rgba(0,0,0,.35); cursor: pointer; }

/* NPC dialog */
.npc-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.npc-head canvas, .npc-head img { width: 64px; height: 64px; border-radius: 14px; background: rgba(0,0,0,.35); }
.npc-head .t b { font-size: 1.05rem; } .npc-head .t small { color: var(--muted); display: block; }

/* skills */
.skill-row .lvl { font-size: .75rem; color: var(--gold); font-weight: 800; }
.skill-row img.gray { filter: grayscale(1) brightness(.7); }
.assign { display: flex; gap: 6px; margin-top: 6px; }
.assign button { width: 38px; height: 38px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.3); background: rgba(0,0,0,.3); cursor: pointer; padding: 0; display: grid; place-items: center; font-weight: 800; }
.assign button.on { border: 2px solid var(--accent); }
.assign button img { width: 30px; height: 30px; border-radius: 50%; }

/* world map */
.wm { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; background: #10190f; border-radius: 12px; cursor: grab; }
.wm canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wm-info { position: absolute; left: 10px; bottom: 10px; right: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(10,26,18,.9); border: 1px solid var(--panel-line); font-size: .85rem; pointer-events: none; }
.wm-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sheet.sheet-map .sheet-body { padding: 8px; display: flex; }

/* chat panel */
.chat-panel { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.chat-log { flex: 1; overflow: auto; font-size: .86rem; display: flex; flex-direction: column; gap: 3px; touch-action: pan-y; -webkit-user-select: text; user-select: text; }
.chat-log .chat-line { padding: 2px 4px; border-radius: 6px; word-break: break-word; }
.chat-input { display: flex; gap: 6px; }
.chat-input select { background: rgba(0,0,0,.35); color: var(--text); border: 1px solid var(--panel-line); border-radius: 10px; padding: 0 6px; font-size: 14px; }
.sheet.sheet-chat .sheet-body { display: flex; flex-direction: column; }

/* dialogs */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60; display: grid; place-items: center; padding: 16px; animation: fadein .15s; }
.dialog { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--panel-line); border-radius: 18px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); display: grid; gap: 10px; }
.dialog h3 { margin: 0; font-size: 1.05rem; }
.dialog-text { margin: 0; color: #d6e2d2; font-size: .92rem; white-space: pre-line; }
.dialog-buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dialog.death { text-align: center; border-color: rgba(239,93,85,.5); }
.dialog.death h3 { color: #ff9d97; font-size: 1.3rem; }
.dialog.death .dialog-buttons { justify-content: center; }

.overlay-block { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(4,10,7,.82); backdrop-filter: blur(3px); }
.overlay-block .glass { padding: 20px; display: grid; gap: 12px; text-align: center; width: min(360px, 92vw); }
.loading-veil { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; background: #05100a; transition: opacity .35s; pointer-events: none; }
.loading-veil.out { opacity: 0; }
.loading-veil .glass { padding: 14px 20px; display: flex; gap: 12px; align-items: center; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rotate-hint { display: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-height: 460px) {
  :root { font-size: calc(14px * var(--ui)); }
  .hud-buttons { grid-template-columns: repeat(5, 36px); gap: 4px; }
  .hud-btn { width: 36px; height: 36px; border-radius: 10px; }
  .minimap { width: 112px; height: 112px; }
  .hud-portrait { width: 44px; height: 44px; }
  .hud-status { min-width: 190px; }
  .cs-card { min-height: 160px; }
  .cs-card canvas.preview { height: 90px; }
  .brand-logo { width: min(360px, 100%); }
}
@media (max-width: 760px) and (orientation: landscape) {
  .login-wrap { grid-template-columns: 1fr 1fr; }
}
@media (orientation: portrait) {
  .login-wrap { grid-template-columns: 1fr; }
  .brand-logo { width: min(300px, 80vw); }
  .cs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-wrap { grid-template-columns: 1fr; overflow: auto; }
  .cc-colors { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sheet, .sheet-wide { width: 100%; }
  .hud-topright { flex-direction: column-reverse; align-items: flex-end; top: calc(70px + var(--safe-t)); }
  .hud-buttons { grid-template-columns: repeat(5, 36px); }
  .hud-btn { width: 36px; height: 36px; }
  .minimap { width: 104px; height: 104px; }
  .hud-status { max-width: 92vw; }
  .chat-mini { left: calc(10px + var(--safe-l)); bottom: calc(180px + var(--safe-b)); max-width: 70vw; }
  .rotate-hint { display: block; position: fixed; top: calc(4px + var(--safe-t)); left: 50%; transform: translateX(-50%); font-size: .7rem; color: var(--muted);
    background: rgba(0,0,0,.5); padding: 2px 10px; border-radius: 10px; pointer-events: none; }
}
@media (hover: hover) and (pointer: fine) {
  .joy { opacity: .55; }
}
.itembar { position: absolute; bottom: calc(10px + var(--safe-b)); right: calc(282px + var(--safe-r)); display: flex; gap: 6px; }
.itembar.left { right: auto; left: calc(282px + var(--safe-l)); }
.itembar .act { position: relative; }

/* create: fit short landscape screens */
.scene-cc .cc-wrap { height: 100%; }
.cc-wrap > * { min-height: 0; }
.cc-form { gap: 6px; }
.cc-form .section-title { margin: 4px 0 2px; }
.cc-colors { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-color { width: 22px; height: 22px; aspect-ratio: auto; flex: none; border-radius: 5px; }
.cc-job img, .cc-job canvas { max-width: 54px; }
.cc-preview { justify-content: center; }
@media (max-height: 460px) {
  .cc-job img, .cc-job canvas { max-width: 40px; }
  .cc-preview canvas { width: 140px; height: 150px; }
  .cc-color { width: 19px; height: 19px; }
  .cc-form .input { padding: .5em .7em; }
  .cc-form .btn { min-height: 38px; }
}

/* round 2 polish */
.actions.noskills .act-skill { display: none; }
.act-skill.empty { opacity: .5; }
.chat-mini { left: calc(10px + var(--safe-l)); bottom: calc(176px + var(--safe-b)); max-width: min(380px, 40vw); }
.bag-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 52px)); justify-content: start; }
.equip-grid { grid-template-columns: repeat(6, minmax(40px, 52px)); justify-content: start; }
.cs-card canvas.preview { width: 120px; height: 120px; }
.target-ring { }
@media (orientation: portrait) {
  .itembar, .itembar.left { right: calc(10px + var(--safe-r)); left: auto; bottom: calc(250px + var(--safe-b)); flex-direction: column; }
  .rotate-hint { top: auto; bottom: calc(6px + var(--safe-b)); }
}

/* ---------------------------------------------------------------- server UI layer: menu, nest, players, quests, GM, prompts */
.small { font-size: .78rem; }
.row.wrap { flex-wrap: wrap; }
.row.foot { margin-top: 12px; justify-content: space-between; flex-wrap: wrap; }
.btn > .ico { display: inline-block; vertical-align: middle; width: 1.2em; height: 1.2em; margin: -2px 6px 0 -2px; }
.btn > span { vertical-align: middle; }
.ui-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 18px 4px; }
.dot.on { color: var(--accent); box-shadow: 0 0 6px var(--accent); }
.chip .dot { width: 6px; height: 6px; }
.chip > .ico { width: 13px; height: 13px; }

.ui-hero { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(111,212,139,.14), rgba(255,255,255,.03)); border: 1px solid var(--panel-line); }
.ui-hero .t { flex: 1; min-width: 0; }
.ui-hero .t b { display: block; font-size: 1.12rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-hero .t small { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.hero-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: rgba(111,212,139,.16); color: var(--accent); }
.hero-ic .ico { width: 26px; height: 26px; }
.hero-ic.muted { background: rgba(255,255,255,.06); color: var(--muted); }

.rank { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; flex: none;
  font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.rank .ico { width: 13px; height: 13px; }
.rank.leader { background: rgba(255,215,106,.15); color: var(--gold); border: 1px solid rgba(255,215,106,.45); }
.rank.officer { background: rgba(111,190,255,.13); color: #9fd0ff; border: 1px solid rgba(111,190,255,.4); }

.notice-card { padding: 7px 12px 9px; margin-bottom: 10px; border-radius: 12px; background: rgba(0,0,0,.22);
  border: 1px solid var(--panel-line); border-left: 3px solid var(--gold); }
.notice-card.empty { border-left-color: rgba(255,255,255,.16); }
.notice-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.notice-card p { margin: 1px 0 0; font-size: .9rem; white-space: pre-wrap; word-break: break-word; }
.notice-card.empty p { color: var(--muted); font-style: italic; font-size: .82rem; }
.icon-btn.small { padding: 4px; }
.icon-btn.small .ico { width: 18px; height: 18px; }

.list-item.member, .list-item.player { padding: 6px 6px 6px 7px; cursor: pointer; }
.list-item.member:hover, .list-item.player:hover { background: rgba(255,255,255,.07); }
.list-item .ic.face { position: relative; overflow: visible; }
.list-item .ic.face img { max-width: 38px; max-height: 38px; border-radius: 9px; }
.list-item .ic.face .status { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #12271b; background: #67716a; }
.list-item.on .ic.face .status, .list-item.player .ic.face .status { background: var(--accent); box-shadow: 0 0 6px rgba(111,212,139,.8); }
.list-item.off .t, .list-item.off .ic.face img { opacity: .55; }
.list-item.off .ic.face img { filter: grayscale(.9); }
.list-item.me { background: rgba(111,212,139,.07); border-color: rgba(111,212,139,.2); }
.chip.you { margin-left: 6px; padding: 0 6px; font-size: .6rem; font-weight: 800; vertical-align: 2px; text-transform: uppercase;
  letter-spacing: .05em; background: rgba(111,212,139,.2); color: #b8ffcb; }
.icon-btn.more { padding: 7px; color: var(--muted); flex: none; }
.icon-btn.more:hover { color: var(--text); }
.list-item .where { display: inline-flex; align-items: center; gap: 3px; max-width: 38%; flex: none; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; font-size: .74rem; color: var(--muted); }
.list-item .where.near { color: #9ff0b5; }
.list-item .where .ico { width: 14px; height: 14px; }
.list-item.mine { border-color: rgba(255,215,106,.35); }
.list-item.tight { padding: 6px 8px 6px 10px; min-height: 44px; }
.list-item.current { border-color: rgba(111,212,139,.6); background: rgba(111,212,139,.1); }
.list-item .go { color: var(--muted); }
.list-item .go .ico { width: 18px; height: 18px; transform: rotate(90deg); }
.row.tools { margin: 2px 0 8px; }

.invite-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,215,106,.16), rgba(111,212,139,.07)); border: 1px solid rgba(255,215,106,.45);
  animation: fadein .25s; }
.invite-card .hero-ic { width: 38px; height: 38px; background: rgba(255,215,106,.18); color: var(--gold); }
.invite-card .t { flex: 1; min-width: 0; }
.invite-card .t b { display: block; font-size: .92rem; }
.invite-card .t small { color: var(--muted); font-size: .76rem; }

.field-hint { min-height: 1.25em; margin: 6px 2px 0; font-size: .78rem; color: var(--muted); }
.field-hint.bad { color: #ffb0aa; }
.field-hint.ok { color: #9ff0b5; }
.req-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.search { position: relative; min-width: 0; }
.search > .ico { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search > .input { padding-left: 36px; }
.empty-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; color: var(--muted);
  background: rgba(255,255,255,.04); border: 1px dashed var(--panel-line); }
.empty-card p { margin: 0; font-size: .86rem; line-height: 1.45; }
.empty-card b { color: var(--gold); }

.menu-who { display: flex; flex-direction: column; margin: 0 2px 10px; }
.menu-who b { font-size: 1.02rem; }
.menu-who small { color: var(--muted); font-size: .78rem; }
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { position: relative; appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 80px;
  padding: 9px 10px 8px; border-radius: 14px; border: 1px solid var(--panel-line); text-align: left; color: var(--text); cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); transition: transform .08s, background .15s; }
.tile:hover { background: rgba(255,255,255,.1); }
.tile:active { transform: scale(.97); }
.tile .tile-ic { width: 30px; height: 30px; margin-bottom: 4px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(111,212,139,.16); color: var(--accent); }
.tile .tile-ic .ico { width: 19px; height: 19px; }
.tile b { font-size: .88rem; }
.tile small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted);
  font-size: .68rem; line-height: 1.25; }
.tile .badge { position: absolute; top: 7px; right: 7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center; background: var(--danger); color: #fff; font-size: .66rem; font-weight: 800; }
.tile.gm .tile-ic { background: rgba(213,156,255,.18); color: #e2c2ff; }
.tile.loading, .tile:disabled { opacity: .5; }

.quest-card { margin-bottom: 8px; padding: 9px 12px 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--panel-line); }
.quest-card.complete { border-color: rgba(111,212,139,.55); background: rgba(111,212,139,.07); }
.qhead { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.qhead b { flex: 1; min-width: 0; font-size: .95rem; }
.qhead .lvl { flex: none; padding: 2px 6px; border-radius: 6px; font-size: .64rem; font-weight: 800; color: var(--gold); background: rgba(255,215,106,.12); }
.obj { display: grid; grid-template-columns: minmax(0, 1fr) 84px 40px; align-items: center; gap: 8px; margin: 3px 0; font-size: .83rem; }
.obj .goal { display: flex; align-items: center; gap: 4px; min-width: 0; }
.obj.done .goal { color: #9ff0b5; }
.obj .tick .ico { width: 14px; height: 14px; }
.obj .n { text-align: right; font-size: .76rem; font-weight: 700; color: var(--muted); }
.qbar { height: 7px; border-radius: 4px; overflow: hidden; background: rgba(0,0,0,.45); }
.qbar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4fbf71, #9ff0b5); }
.qmeta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .77rem; color: var(--muted); }
.qmeta .ico { flex: none; width: 14px; height: 14px; }
.qmeta b { color: var(--text); font-weight: 600; }
.qbtns { margin-top: 8px; }
.btn-ghost-danger { color: #ffb0aa; border-color: rgba(239,93,85,.35); }
.btn-ghost-danger:hover { background: rgba(239,93,85,.14); }

.where-bar { position: absolute; left: 10px; top: 10px; max-width: min(380px, 72%); padding: 8px 12px; border-radius: 12px;
  background: rgba(10,26,18,.88); border: 1px solid var(--panel-line); box-shadow: 0 6px 18px rgba(0,0,0,.35); font-size: .8rem;
  pointer-events: none; }
.wb-head { display: flex; align-items: center; gap: 6px; }
.wb-head b { font-size: .95rem; }
.wb-head .ic .ico { width: 16px; height: 16px; color: var(--accent); }
.wb-line { margin-top: 2px; color: #d6e2d2; }
.wb-line.muted { color: var(--muted); }

.gm-tabs { overflow-x: auto; scrollbar-width: none; }
.gm-tabs .tab { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.gm-tabs .tab .ico { width: 16px; height: 16px; flex: none; }
.grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.grid-list .list-item { width: 100%; text-align: left; color: inherit; font: inherit; }
.seg { display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(0,0,0,.3); }
.seg-btn { appearance: none; padding: 6px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.seg-btn.on { background: rgba(111,212,139,.25); color: var(--text); }
.gm-fields { display: grid; gap: 6px; }
.gm-field { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.gm-field label { font-size: .84rem; color: var(--muted); }
.gm-field .input { padding: .45em .7em; }

.ui-hero.profile .ic.face { width: 50px; height: 50px; border-radius: 12px; background: rgba(0,0,0,.35); display: grid; place-items: center; flex: none; }
.ui-hero.profile .ic.face img { max-width: 46px; max-height: 46px; }
.ui-hero.profile .ic.face .status { display: none; }
.equip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.equip { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 5px 6px; border-radius: 10px; background: rgba(255,255,255,.04); }
.equip .slot { grid-row: 1 / 3; width: 38px; height: 38px; }
.equip small { color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; }
.equip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .78rem; }

.dialog-head { display: flex; align-items: center; gap: 10px; }
.dialog-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; }
.dialog-head .icon-btn { margin: -6px -6px -6px 0; }
.prompt-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(111,212,139,.16); color: var(--accent); }
.prompt-icon .ico { width: 20px; height: 20px; }
.prompt-error { margin: 0; padding: 6px 10px; border-radius: 9px; background: rgba(239,93,85,.12); color: #ffb0aa; font-size: .85rem; }
.prompt-field { position: relative; margin-bottom: 10px; }
.prompt-field textarea { resize: none; font: inherit; font-size: 16px; }
.prompt-count { position: absolute; right: 4px; bottom: -17px; font-size: .66rem; color: var(--muted); }
.prompt-expires { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.prompt-expires .ico { width: 15px; height: 15px; }
.prompt-nest_invite { border-color: rgba(255,215,106,.55); box-shadow: 0 0 0 1px rgba(255,215,106,.12), 0 20px 60px rgba(0,0,0,.6); }
.prompt-nest_invite .prompt-icon { background: rgba(255,215,106,.18); color: var(--gold); }
.prompt-back { transition: opacity .12s; }
.prompt-back.out { opacity: 0; }
.dialog.action-sheet { width: min(390px, 100%); }
.sheet-actions { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow: auto; }
.act-row { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 12px;
  border-radius: 12px; border: 1px solid var(--panel-line); background: rgba(255,255,255,.05); color: var(--text); text-align: left; cursor: pointer; }
.act-row:hover { background: rgba(255,255,255,.09); }
.act-row .ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(0,0,0,.3); }
.act-row .ic .ico { width: 18px; height: 18px; }
.act-row .t { display: flex; flex-direction: column; min-width: 0; }
.act-row .t b { font-size: .92rem; }
.act-row .t small { font-size: .73rem; color: var(--muted); }
.act-row.danger { color: #ffb0aa; border-color: rgba(239,93,85,.35); }
.act-row.danger .ic { background: rgba(239,93,85,.18); }
.act-row.primary { border-color: rgba(111,212,139,.5); }
.act-row:disabled { opacity: .45; pointer-events: none; }
.picker-dialog { width: min(470px, 100%); }
.picker-dialog .list.picker { max-height: 44vh; overflow: auto; }
.picker-dialog .section-title { margin-top: 10px; }
.notice-editor { width: min(460px, 100%); }
@media (max-height: 460px) {
  .modal-back { padding: 8px; }
  .dialog { max-height: calc(100vh - 16px); overflow: auto; }
  .tile { min-height: 72px; padding: 8px 9px 7px; }
  .picker-dialog .list.picker { max-height: 36vh; }
}
@media (orientation: portrait) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-field { grid-template-columns: 88px minmax(0, 1fr) auto; }
}
#toasts { left: var(--toast-x, 50%); }
@media (max-height: 460px) {
  .ui-hero { padding: 7px 10px; margin-bottom: 8px; }
  .ui-hero .hero-ic { width: 38px; height: 38px; }
  .notice-card { margin-bottom: 8px; }
  .sheet-body > .tabs { margin-bottom: 8px; }
}
#toasts .toast { max-width: var(--toast-max, 80vw); }