:root {
  --ink: #2a1d12; --paper: #fbf3e2; --gold: #e8b65a; --gold-2: #c8902e; --red: #8c2b1e; --red-2: #b2412b;
  --glass: rgba(30, 22, 14, .62); --line: rgba(255, 226, 170, .22); --muted: #a99377;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: radial-gradient(120% 90% at 50% 35%, #a7a29b 0%, #8a857f 55%, #6d6964 100%); font-family: 'Be Vietnam Pro', system-ui, sans-serif; color: #fff4dd; }
canvas#game, canvas#overlay { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
canvas#game { cursor: pointer; }
canvas#overlay { pointer-events: none; z-index: 2; }
.nogl { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; background: #2a1d12; color: #fff4dd; padding: 30px; text-align: center; font-size: 18px; }
.icon-rows { display: flex; flex-direction: column; gap: 6px; }
.icon-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: #fff8e8; border: 1px solid #ecd9b4; margin-bottom: 6px; }
.icon-row b { flex: 1; font-size: 13px; }
.icon-row .ic { width: 34px; height: 34px; border-radius: 9px; background: #8f2a1c; color: #ffd98a; display: grid; place-items: center; font-weight: 700; font-family: 'Noto Serif', serif; overflow: hidden; }
.icon-row .ic img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.icon-row .file { margin: 0; padding: 6px 10px; border-radius: 999px; background: #8c2b1e; color: #fff; font-size: 12px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.icon-row .file input { display: none; }
.icon-row input[type=number] { padding: 6px 8px; }
.mini { border: 0; background: transparent; color: #8c2b1e; font-size: 12px; font-weight: 600; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
kbd { font-family: inherit; font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: rgba(255,255,255,.08); }

.hud-tl, .hud-tr, .hud-bl, #actionBtn, #minimap, #hint, #ticker { z-index: 6 !important; }
.glass { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-size: 13px; color: #fff4dd; white-space: nowrap; }
.chip.btn:hover { background: rgba(60, 40, 20, .8); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #7ee081; box-shadow: 0 0 8px #7ee081; }

#hud > * { position: fixed; z-index: 5; }
.hud-tl { top: max(12px, env(safe-area-inset-top)); left: 12px; }
.hud-tr { top: max(12px, env(safe-area-inset-top)); right: 12px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 60vw; }
.pop { margin-top: 6px; border-radius: 14px; padding: 8px; min-width: 200px; font-size: 13px; }
.pop .r { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 8px; gap: 12px; }
.pop .r.me { background: rgba(232, 182, 90, .18); }
.pop .bar { height: 4px; background: rgba(255,255,255,.1); border-radius: 4px; margin: 0 8px 4px; overflow: hidden; }
.pop .bar i { display: block; height: 100%; background: var(--gold); }
.hud-bl { left: 12px; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 6px; }
.emote { width: 42px; height: 42px; border-radius: 12px; font-size: 20px; color: #fff; }
.emote:active { transform: scale(.92); }
#actionBtn {
  left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, #f3c86c, #d29433); color: #3a1d08; font-weight: 700; font-size: 16px;
  box-shadow: 0 8px 30px rgba(232, 160, 60, .45), inset 0 -3px 0 rgba(0,0,0,.15); animation: breathe 2.4s ease-in-out infinite;
}
#actionBtn kbd { border-color: rgba(58,29,8,.3); background: rgba(255,255,255,.35); color: #3a1d08; }
#actionBtn.busy { filter: grayscale(.4); animation: none; }
#actionIcon { font-size: 20px; }
@keyframes breathe { 50% { box-shadow: 0 8px 40px rgba(240, 180, 70, .75), inset 0 -3px 0 rgba(0,0,0,.15); } }
#minimap { right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); border-radius: 12px; width: 150px; height: auto; cursor: pointer; }
#hint { left: 50%; top: max(60px, calc(env(safe-area-inset-top) + 50px)); transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; font-size: 12.5px; transition: opacity 1s; white-space: nowrap; }
#ticker { left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
#ticker .t { background: rgba(140, 43, 30, .85); border: 1px solid rgba(255,210,140,.35); padding: 7px 14px; border-radius: 999px; font-size: 13px; animation: tin .4s ease-out; }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }

.modal-wrap { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(12, 8, 4, .55); backdrop-filter: blur(3px); }
.card {
  position: relative; width: min(460px, 100%); max-height: 92vh; overflow: auto; color: var(--ink);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  border-radius: 22px; padding: 26px 24px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(140, 90, 30, .25), inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(200, 144, 46, .45);
  animation: pop .25s ease-out;
}
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.card h1, .card h2 { font-family: 'Noto Serif', serif; color: var(--red); margin: 0 0 8px; }
.card h1 { font-size: 28px; line-height: 1.15; }
.card h2 { font-size: 21px; }
.card label { display: block; font-size: 12px; font-weight: 600; color: #7a5a35; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.card input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #e1cba3; background: #fffaf0; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.card input:focus { border-color: var(--gold-2); }
.muted { color: #8b7356; margin: 0; }
.small { font-size: 12px; margin-top: 10px; text-align: center; }
.eyebrow { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); font-weight: 700; }
.lead { color: #5b4329; font-size: 14px; line-height: 1.55; margin: 6px 0 4px; }
.x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(140,43,30,.1); color: var(--red); font-size: 14px; }
.primary { width: 100%; margin-top: 18px; padding: 14px; border: 0; border-radius: 14px; font-weight: 700; font-size: 16px; color: #fff6e3; background: linear-gradient(180deg, var(--red-2), var(--red)); box-shadow: 0 6px 18px rgba(140,43,30,.35), inset 0 -3px 0 rgba(0,0,0,.2); }
.primary:active { transform: translateY(1px); }
.primary.ghost { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #d8c09a; }
.swatches button.sel { box-shadow: 0 0 0 3px var(--gold-2); }
.hats { display: flex; gap: 6px; flex-wrap: wrap; }
.hats button, .wish-chips button { padding: 8px 12px; border-radius: 999px; border: 1.5px solid #e1cba3; background: #fffaf0; color: var(--ink); font-size: 13px; }
.hats button.sel { border-color: var(--red); background: var(--red); color: #fff; }
.wish-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wish-chips button { font-size: 12px; padding: 6px 10px; }
.app-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.app-grid button { aspect-ratio: .8; border-radius: 12px; border: 2px solid #e6d2ad; background: linear-gradient(180deg, #9b3322, #6e1f14); color: #f7d58c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; position: relative; overflow: hidden; }
.app-grid button img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; }
.app-grid button .ab { font-family: 'Noto Serif', serif; font-size: 18px; font-weight: 700; }
.app-grid button .an { font-size: 9.5px; color: #fff0d0; line-height: 1.1; text-align: center; }
.app-grid button .stripe { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.app-grid button.sel { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,182,90,.5); transform: translateY(-2px); }
.result { text-align: center; }
.result .big { font-size: 64px; margin: 4px 0; }
.code-box { margin: 14px auto 4px; display: flex; align-items: stretch; border: 2px dashed var(--gold-2); border-radius: 14px; overflow: hidden; background: #fff8e8; }
.code-box code { flex: 1; font-size: 22px; font-weight: 700; letter-spacing: .08em; padding: 12px; color: var(--red); font-family: ui-monospace, monospace; }
.code-box button { border: 0; background: var(--gold); padding: 0 16px; font-weight: 700; color: #3a1d08; }
.result .shop { display: inline-block; margin-top: 14px; color: var(--red); font-weight: 700; }
.bag-item { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: #fff8e8; border: 1px solid #ecd9b4; margin-top: 10px; }
.bag-item .ic { font-size: 28px; }
.bag-item b { display: block; }
.bag-item code { color: var(--red); font-weight: 700; }
.bag-item a { color: var(--red); font-size: 12px; font-weight: 600; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stats3 div { background: #fff8e8; border: 1px solid #ecd9b4; border-radius: 12px; padding: 10px; text-align: center; font-size: 12px; color: #7a5a35; }
.stats3 b { display: block; font-size: 22px; color: var(--red); }

#toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#toast div { background: rgba(30,22,14,.88); border: 1px solid var(--line); padding: 10px 16px; border-radius: 12px; font-size: 14px; animation: tin .3s; max-width: 88vw; text-align: center; }
#conn { position: fixed; inset: auto 0 0 0; top: 0; height: 32px; z-index: 40; background: #8c2b1e; text-align: center; line-height: 32px; font-size: 13px; }

@media (max-width: 640px) {
  .chip { padding: 6px 9px; font-size: 12px; }
  #minimap { width: 100px; }
  .emote { width: 36px; height: 36px; font-size: 17px; }
  .hud-bl { bottom: 84px; }
  #hint { display: none; }
  #ticker { top: 96px; width: 92vw; }
  #ticker .t { font-size: 12px; text-align: center; }
  .hud-tr { max-width: 58vw; }
  .app-grid { grid-template-columns: repeat(4, 1fr); }
  .card h1 { font-size: 24px; }
}

.tabs { display: grid; grid-template-columns: 1fr 1fr; background: #f1e4c9; border-radius: 12px; padding: 4px; margin-top: 14px; }
.tabs button { border: 0; background: transparent; padding: 10px 6px; border-radius: 9px; font-weight: 600; color: #7a5a35; font-size: 13.5px; }
.tabs button.on { background: #fffaf0; color: var(--red); box-shadow: 0 1px 4px rgba(90,60,20,.18); }
.err { color: #b2412b; font-size: 13px; min-height: 1em; margin: 10px 0 0; }
.hint-l { text-transform: none; letter-spacing: 0; font-weight: 500; color: #a08560; }
.privacy { text-align: left; line-height: 1.5; }
.linkbtn { display: block; margin: 12px auto 0; border: 0; background: none; color: var(--red); font-weight: 600; font-size: 13px; text-decoration: underline; }
.back-box { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: #fff8e8; border: 1px solid #ecd9b4; }
.back-box small { display: block; color: #8b7356; font-size: 12px; }
.back-box b { font-size: 19px; color: var(--red); font-family: 'Noto Serif', serif; }
.av { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #d8c09a; flex: none; }

/* ---- Sinh lực, cửa hàng, kéo co, khẩu nghiệp ---- */
.stam .sbar { width: 54px; height: 7px; border-radius: 6px; background: rgba(255,255,255,.15); overflow: hidden; display: inline-block; }
.stam .sbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #e07a4f, #f2c35b, #7ec26a); transition: width .4s; }
.stam.low .sbar i { background: #d9534f; }
.stam.low { animation: pulseLow 1.2s infinite; }
@keyframes pulseLow { 50% { box-shadow: 0 0 0 3px rgba(217,83,79,.45); } }
.card.shop { width: min(520px, 100%); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.shop-grid .it { border: 1.5px solid #e6d2ad; background: #fff8e8; border-radius: 14px; padding: 10px 6px; text-align: center; cursor: pointer; font: inherit; color: var(--ink); position: relative; }
.shop-grid .it:hover { border-color: var(--gold-2); transform: translateY(-1px); }
.shop-grid .it .ic { font-size: 26px; display: block; height: 34px; }
.shop-grid .it .sw { width: 30px; height: 30px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px #d8c09a; }
.shop-grid .it b { display: block; font-size: 13px; margin-top: 4px; }
.shop-grid .it small { color: #8b7356; font-size: 11.5px; }
.shop-grid .it.own small { color: #2f855a; font-weight: 600; }
.shop-grid .it.on { border-color: var(--red); box-shadow: 0 0 0 2px rgba(140,43,30,.25); }
.shop-grid .it.poor { opacity: .55; }
.hats button[data-hair].sel { border-color: var(--red); background: var(--red); color: #fff; }
.tug-offer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff8e8; border: 1px solid #ecd9b4; margin-top: 8px; }
.bets { display: flex; gap: 8px; margin-top: 10px; }
.bets button { flex: 1; padding: 12px 6px; border-radius: 12px; border: 1.5px solid #e1cba3; background: #fffaf0; font-weight: 700; color: var(--red); }
.bets button:hover { background: #fff1d6; }
.mini-btn { border: 0; border-radius: 10px; padding: 8px 12px; background: var(--red); color: #fff; font-weight: 600; }
#tugHud { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 15; width: min(520px, 92vw); background: rgba(30,22,14,.86); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 16px; text-align: center; }
.tug-names { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.tug-names b:first-child { color: #ff9a8a; } .tug-names b:last-child { color: #8ab8ff; }
.tug-names span { font-size: 12px; color: #e8c878; }
.tug-bar { position: relative; height: 16px; border-radius: 10px; margin: 10px 0; background: linear-gradient(90deg, rgba(192,57,43,.55), rgba(255,255,255,.08) 50%, rgba(47,111,179,.55)); }
.tug-bar .mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: #fff4dd; }
.tug-bar i { position: absolute; top: -5px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: #f2c35b; border: 3px solid #fff4dd; left: 50%; transition: left .08s; }
#tugMsg { font-family: 'Noto Serif', serif; font-size: 26px; font-weight: 700; color: #ffd98a; min-height: 34px; }
#tugBtn { margin-top: 8px; width: 100%; padding: 14px; border: 0; border-radius: 14px; font-size: 18px; font-weight: 800; color: #3a1d08; background: linear-gradient(180deg, #f3c86c, #d29433); }
#tugBtn:active { transform: scale(.97); }
#sayBar { position: fixed; left: 50%; bottom: max(84px, calc(env(safe-area-inset-bottom) + 70px)); transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; width: min(560px, 92vw); }
#sayBar input { flex: 1; border: 0; background: transparent; color: #fff4dd; font: inherit; font-size: 15px; outline: none; }
#sayBar input::placeholder { color: #c9b48a; }
#sayBar button { border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700; background: #c0392b; color: #fff; }
@media (max-width: 640px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } .stam .sbar { width: 36px; } #sayBar { bottom: 140px; } #tugHud { top: 110px; } }

/* ================= Màn hình đăng nhập (2 cột) ================= */
.card.intro { width: min(860px, 100%); padding: 0; display: grid; grid-template-columns: 1fr 1.08fr; overflow: hidden; max-height: none; }
.intro-hero {
  position: relative; padding: 34px 32px 28px; color: #f6e6c4; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(232,182,90,.18), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,220,150,.035) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #7d2418 0%, #5a170f 60%, #3f100a 100%);
}
.intro-hero::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(232,182,90,.35); border-radius: 16px; pointer-events: none; }
.hero-mark { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: rgba(232,182,90,.16); border: 1px solid rgba(232,182,90,.45); margin-bottom: 18px; }
.intro-hero .eyebrow { color: #e8b65a; }
.intro-hero h1 { color: #fff1d6; font-size: 30px; line-height: 1.15; margin: 6px 0 10px; }
.intro-hero .lead { color: #ead3ab; font-size: 14px; line-height: 1.6; margin: 0; }
.hero-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.hero-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #f3e1bd; }
.hero-list span { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: rgba(255,240,210,.1); font-size: 16px; }
.intro-hero .live { margin: auto 0 0; padding-top: 22px; font-size: 12.5px; color: #d9bf8f; }
.intro-form { padding: 28px 30px 22px; display: flex; flex-direction: column; justify-content: center; }
.intro-form .tabs { margin-top: 0; margin-bottom: 4px; }
.form-title { font-size: 22px; margin: 0 0 4px; }
.field { margin-top: 12px; }
.field label { margin: 0 0 6px; }
.intro-form input { padding: 11px 13px; font-size: 14.5px; }
.char-box { margin-top: 14px; display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #fff8e8; border: 1px solid #ecd9b4; }
.char-opts { flex: 1; display: grid; gap: 9px; min-width: 0; }
.opt { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; }
.opt > span { font-size: 11px; font-weight: 700; color: #7a5a35; text-transform: uppercase; letter-spacing: .06em; }
.char-box .swatches { gap: 7px; }
.char-box .swatches button { width: 28px; height: 28px; border-width: 2.5px; }
.seg { display: inline-grid; grid-auto-flow: column; background: #f1e4c9; border-radius: 10px; padding: 3px; justify-self: start; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #7a5a35; }
.seg button.sel { background: #fffaf0; color: var(--red); box-shadow: 0 1px 3px rgba(90,60,20,.2); }
.char-note { margin: 8px 0 0; font-size: 12px; color: #9a8061; }
.intro-form .err { margin-top: 8px; }
.intro-form .primary { margin-top: 10px; }
.privacy { margin: 10px 0 0; font-size: 11.5px; color: #9a8061; text-align: center; line-height: 1.5; }
/* nhân vật xem trước */
.pv { --robe: #7a5a43; position: relative; width: 72px; height: 92px; flex: none; }
.pv i { position: absolute; display: block; }
.pv-robe { left: 12px; bottom: 2px; width: 48px; height: 46px; background: var(--robe); border-radius: 22px 22px 14px 14px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); transition: background .2s; }
.pv-robe::after { content: ''; position: absolute; left: 50%; top: 4px; width: 3px; height: 26px; background: rgba(0,0,0,.25); transform: rotate(22deg); transform-origin: top; }
.pv-head { left: 16px; top: 18px; width: 40px; height: 40px; border-radius: 50%; background: #f0c9a3; z-index: 2; overflow: hidden; }
.pv-head::before { content: ''; position: absolute; left: -2px; right: -2px; top: -6px; height: 22px; background: #3a2a20; border-radius: 50% 50% 40% 40%; }
.pv-head b { position: absolute; left: 11px; top: 21px; width: 4px; height: 5px; border-radius: 50%; background: #2a1a10; box-shadow: 14px 0 0 #2a1a10; }
.pv-bun { left: 29px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: #3a2a20; z-index: 1; }
.pv-hat { left: 4px; top: 4px; width: 0; height: 0; border-left: 32px solid transparent; border-right: 32px solid transparent; border-bottom: 24px solid #e6cf98; z-index: 3; opacity: 0; transition: opacity .2s; filter: drop-shadow(0 2px 0 #c9ad6e); }
.pv.bald .pv-head::before { background: #e5ba93; height: 16px; top: -4px; }
.pv.bald .pv-bun { display: none; }
.pv.non .pv-hat { opacity: 1; }
.pv.non .pv-bun { display: none; }
@media (max-width: 760px) {
  .card.intro { grid-template-columns: 1fr; max-height: 94vh; overflow: auto; }
  .intro-hero { padding: 22px 22px 18px; }
  .intro-hero::after { inset: 8px; }
  .hero-mark { width: 44px; height: 44px; font-size: 22px; margin-bottom: 10px; border-radius: 12px; }
  .intro-hero h1 { font-size: 23px; margin-bottom: 6px; }
  .intro-hero .lead { display: none; }
  .intro-hero { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .intro-hero .hero-mark { grid-row: span 2; margin: 0; }
  .intro-hero .eyebrow { align-self: end; }
  .intro-hero h1 { margin: 2px 0 0; font-size: 21px; }
  .intro-hero .live { grid-column: 1 / -1; font-size: 11.5px; }
  .char-note { display: none; }
  .hero-list { display: none; }
  .intro-hero .live { padding-top: 10px; }
  .intro-form { padding: 18px 20px 18px; }
  .pv { width: 58px; transform: scale(.85); transform-origin: left center; }
}
@media (max-height: 700px) and (min-width: 761px) { .hero-list { gap: 6px; margin-top: 14px; } .intro-hero { padding-top: 24px; } .hero-mark { margin-bottom: 10px; } }