:root {
  color-scheme: dark;
  --ink: #f7f2e5;
  --muted: #a9bdb4;
  --night: #071713;
  --night-2: #0b211b;
  --panel: rgba(10, 30, 25, 0.94);
  --panel-soft: rgba(17, 42, 34, 0.88);
  --line: rgba(221, 205, 160, 0.18);
  --gold: #e9c979;
  --mint: #6ee7c6;
  --teal: #168e7c;
  --danger: #ffad9f;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --ui-root-size: 16px;
  --player-name-size: 9px;
  --speech-text-size: 10px;
  font-family: "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
  font-synthesis: none;
}

html[data-font-size="small"] { --ui-root-size: 14px; --player-name-size: 8px; --speech-text-size: 9px; }
html[data-font-size="large"] { --ui-root-size: 18px; --player-name-size: 10px; --speech-text-size: 11px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-width: 320px; font-size: var(--ui-root-size); background: var(--night); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 9% -10%, rgba(44, 145, 119, .24), transparent 35rem),
    radial-gradient(circle at 91% 0%, rgba(221, 183, 91, .13), transparent 32rem),
    linear-gradient(145deg, #071713 0%, #0b241d 48%, #071512 100%);
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:not(:disabled) { cursor: pointer; }

.screen { min-height: 100vh; padding: 12px; position: relative; }
.screen[hidden] { display: none !important; }
.shell { width: min(1880px, 100%); margin-inline: auto; }
.version-badge { position: absolute; z-index: 80; right: 17px; bottom: 5px; padding: 2px 6px; color: rgba(216,232,225,.72); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(5,23,18,.72); font: 800 8px/1.2 ui-monospace, monospace; letter-spacing: .05em; pointer-events: none; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.topbar {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: linear-gradient(115deg, rgba(15, 43, 35, .96), rgba(7, 23, 19, .92));
  box-shadow: 0 14px 42px rgba(0, 0, 0, .22), inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: blur(20px);
  position: relative;
  z-index: 20;
}

.topbar::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.025);
  border-radius: 20px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-icon {
  width: 44px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(150, 239, 212, .24);
  background: linear-gradient(145deg, #1e9d87, #0c5f53);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.18);
}
.brand-icon i {
  width: 17px;
  height: 17px;
  border: 4px solid #fffbed;
  border-radius: 50%;
  position: relative;
}
.brand-icon i::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: -5px;
  bottom: -3px;
  background: #fffbed;
  clip-path: polygon(0 0, 100% 35%, 15% 100%);
}
.brand-copy { display: grid; gap: 2px; }
.brand-copy small { color: #a9c5bb; font-weight: 800; font-size: .67rem; letter-spacing: .22em; }
.brand-copy strong { font-size: clamp(1rem, 1.6vw, 1.22rem); letter-spacing: .035em; }

.field-pill, .connection-pill, .player-count, .self-name {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.field-pill { color: #cdeade; }
.field-pill i, .connection-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px var(--mint); }
.entry-nav { display: flex; align-items: center; gap: 4px; }
.entry-nav a { padding: 7px 10px; color: #bad0c7; border: 1px solid transparent; border-radius: 999px; font-size: .68rem; font-weight: 800; text-decoration: none; }
.entry-nav a:hover, .entry-nav a:focus-visible { color: #fff8e5; border-color: rgba(110,231,198,.25); background: rgba(110,231,198,.08); outline: 0; }

/* Entry */
.entry-main { padding-top: 10px; }
.entry-card {
  min-height: calc(100vh - 100px);
  display: grid;
  grid-template-columns: minmax(390px, .78fr) minmax(520px, 1.22fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(14, 39, 32, .97), rgba(7, 23, 19, .96));
  box-shadow: var(--shadow);
}
.entry-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 3.2vw, 50px);
  position: relative;
  z-index: 2;
}
.entry-form-panel::before {
  content: "";
  position: absolute;
  width: 330px;
  aspect-ratio: 1;
  top: -170px;
  left: -150px;
  border: 1px solid rgba(110,231,198,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(110,231,198,.025), 0 0 0 84px rgba(110,231,198,.015);
  pointer-events: none;
}
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--mint); font-size: .75rem; font-weight: 900; letter-spacing: .12em; }
.eyebrow i { width: 25px; height: 1px; background: var(--mint); }
.entry-form-panel h1 { margin: 14px 0 12px; font-size: clamp(2.35rem, 4vw, 4.35rem); line-height: 1.04; letter-spacing: -.05em; }
.entry-form-panel h1 em { color: var(--gold); font-style: normal; text-shadow: 0 8px 38px rgba(233,201,121,.16); }
.lead { max-width: 46rem; margin: 0 0 17px; color: #b9cbc4; font-size: .86rem; line-height: 1.65; }
.entry-live-strip { max-width: 520px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; margin: 0 0 14px; padding: 8px 10px; border: 1px solid rgba(110,231,198,.16); border-radius: 13px; background: rgba(110,231,198,.055); }
.entry-live-strip > span { display: inline-flex; align-items: center; gap: 6px; color: #cde8de; font-size: .62rem; white-space: nowrap; }
.entry-live-strip > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(110,231,198,.65); }
.entry-live-strip p { min-width: 0; margin: 0; display: grid; gap: 2px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.1); }
.entry-live-strip small { color: var(--gold); font: 900 .45rem/1 ui-monospace, monospace; letter-spacing: .09em; }
.entry-live-strip strong { overflow: hidden; color: #dbe9e3; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.meet-banner { max-width: 520px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; margin: -5px 0 13px; padding: 8px 10px; border: 1px solid rgba(233,201,121,.32); border-radius: 12px; background: rgba(233,201,121,.08); }
.meet-banner > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #10251e; background: var(--gold); font-weight: 900; }
.meet-banner p { min-width: 0; display: grid; gap: 2px; margin: 0; }
.meet-banner b { color: #f7e7b7; font-size: .67rem; }
.meet-banner small { overflow: hidden; color: #9eb3aa; font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
#join-form { max-width: 520px; }
#join-form > label { display: block; margin-bottom: 10px; font-size: .78rem; font-weight: 900; letter-spacing: .05em; }
input {
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  color: #fffbee;
  caret-color: var(--gold);
  border: 1px solid rgba(226,209,166,.28);
  border-radius: 14px;
  outline: none;
  background: rgba(0,0,0,.22);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder { color: #7f988f; }
input:focus { border-color: rgba(110,231,198,.78); background: rgba(0,0,0,.3); box-shadow: 0 0 0 4px rgba(110,231,198,.1); }
.input-help { display: flex; justify-content: space-between; gap: 14px; margin-top: 9px; color: #879f96; font-size: .69rem; }
.input-help b { color: #d8e4df; }
.alert { margin: 11px 0 0; color: var(--danger); font-size: .78rem; font-weight: 700; }
.primary-button {
  width: 100%; min-height: 62px; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 13px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 16px; color: #092019; font-weight: 900;
  background: linear-gradient(120deg, #f4d98e, #6fe2c3 76%); box-shadow: 0 15px 30px rgba(42,178,145,.18); transition: transform .2s, filter .2s;
}
.primary-button:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.06); }
.primary-button:disabled { cursor: not-allowed; opacity: .38; filter: saturate(.35); }
.button-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(0,0,0,.16); border-radius: 50%; }
.secondary-button { width: 100%; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 7px; border: 1px solid rgba(110,231,198,.2); border-radius: 12px; color: #c9e6dc; background: rgba(110,231,198,.055); font-size: .68rem; font-weight: 800; }
.secondary-button:hover, .secondary-button:focus-visible { border-color: rgba(110,231,198,.58); background: rgba(110,231,198,.12); outline: 0; }
.avatar-fieldset { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.avatar-fieldset legend { margin-bottom: 7px; color: #f7f2e5; font-size: .78rem; font-weight: 900; letter-spacing: .05em; }
.avatar-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: #8fa89f; font-size: .66rem; }
.avatar-heading strong { color: var(--gold); font-size: .68rem; }
.avatar-options { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.avatar-option { min-width: 0; height: 64px; display: grid; grid-template-rows: 1fr auto; place-items: center; gap: 1px; padding: 4px 2px 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; color: #829a91; background: rgba(255,255,255,.025); transition: border-color .15s, background .15s, transform .15s; }
.avatar-option:hover { transform: translateY(-1px); border-color: rgba(110,231,198,.4); background: rgba(110,231,198,.065); }
.avatar-option.is-selected { color: #10271f; border-color: #e9d08a; background: linear-gradient(150deg, #f1d98e, #71d8bc); box-shadow: 0 7px 20px rgba(65,195,159,.15); }
.avatar-option > span { font: 900 .52rem/1 ui-monospace, monospace; }
.avatar-sprite, .custom-avatar-preview { width: 32px; height: 43px; display: block; background-repeat: no-repeat; image-rendering: pixelated; }
.avatar-sprite { background-size: 800% 400%; background-position: var(--avatar-x) 0%; }
.avatar-sprite.avatar-01, .avatar-sprite.avatar-02, .avatar-sprite.avatar-03, .avatar-sprite.avatar-04 { background-image: url("avatars/motion/avatar-jrpg-01-04-v4.png"); }
.avatar-sprite.avatar-05, .avatar-sprite.avatar-06, .avatar-sprite.avatar-07, .avatar-sprite.avatar-08 { background-image: url("avatars/motion/avatar-jrpg-05-08-v4.png"); }
.avatar-01, .avatar-05 { --avatar-x: 0%; }
.avatar-02, .avatar-06 { --avatar-x: 28.571429%; }
.avatar-03, .avatar-07 { --avatar-x: 57.142857%; }
.avatar-04, .avatar-08 { --avatar-x: 85.714286%; }
.custom-avatar-preview { display: grid; place-items: center; overflow: hidden; border: 1px dashed rgba(110,231,198,.46); border-radius: 8px; background-color: rgba(110,231,198,.06); background-position: center; background-repeat: no-repeat; background-size: contain; }
.custom-avatar-preview b { color: var(--mint); font-size: 1.1rem; }
.avatar-option.is-selected .custom-avatar-preview b { color: #173a30; }
.avatar-spec { margin: 8px 0 0; color: #748e84; font-size: .59rem; line-height: 1.55; }
.avatar-spec b { color: #b9cbc4; }
.entry-visual { min-height: 500px; position: relative; overflow: hidden; background: #15382e; }
.entry-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,23,19,.82), transparent 30%), linear-gradient(0deg, rgba(3,14,11,.94), transparent 48%); }
.entry-visual img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; filter: saturate(.88) contrast(1.04); }
.visual-badge { position: absolute; z-index: 2; right: 28px; top: 28px; width: 110px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #10291f; background: rgba(245,222,157,.92); box-shadow: 0 15px 45px rgba(0,0,0,.25); }
.visual-badge b { font: 900 2rem/1 ui-monospace, monospace; }
.visual-badge span { font: 900 .55rem/1.35 ui-monospace, monospace; }
.visual-caption { position: absolute; z-index: 2; left: clamp(24px, 5vw, 74px); right: 25px; bottom: clamp(26px, 5vw, 66px); display: grid; gap: 8px; }
.visual-caption small { color: var(--gold); font: 800 .72rem/1 ui-monospace, monospace; letter-spacing: .14em; }
.visual-caption strong { max-width: 800px; font-size: clamp(1.45rem, 2.8vw, 2.9rem); line-height: 1.35; }
.visual-caption span { color: #c1d1ca; font-size: .78rem; }
.entry-info { margin: 12px 0 0; padding: clamp(28px, 4vw, 56px); border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(145deg, rgba(13,39,32,.94), rgba(7,23,19,.9)); box-shadow: 0 20px 55px rgba(0,0,0,.2); }
.entry-info-intro { max-width: 900px; }
.entry-info-intro .eyebrow { margin: 0; }
.entry-info h2 { max-width: 900px; margin: 13px 0 12px; font-size: clamp(1.45rem, 2.7vw, 2.6rem); line-height: 1.35; letter-spacing: -.025em; }
.entry-info-intro > p:last-child { margin: 0; color: #aec2ba; font-size: .83rem; line-height: 1.95; }
.entry-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 26px; }
.entry-info-grid article { padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: rgba(255,255,255,.028); }
.entry-info-grid article > span { color: var(--gold); font: 900 .55rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.entry-info-grid h3 { margin: 9px 0 7px; font-size: .9rem; }
.entry-info-grid p { margin: 0; color: #9db2aa; font-size: .7rem; line-height: 1.85; }
.entry-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.entry-links a { min-width: 0; display: grid; gap: 4px; padding: 13px 15px; color: inherit; border: 1px solid rgba(110,231,198,.13); border-radius: 14px; background: rgba(110,231,198,.035); text-decoration: none; }
.entry-links a:hover, .entry-links a:focus-visible { border-color: rgba(110,231,198,.48); background: rgba(110,231,198,.09); outline: 0; }
.entry-links b { font-size: .71rem; }
.entry-links span { overflow: hidden; color: #82a197; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 8px 6px; color: #759087; font-size: .6rem; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 13px; }
.site-footer a { color: #9eb5ac; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--mint); outline: 0; }

/* World */
.room-screen { padding: 10px 10px 24px; }
.room-topbar { min-height: 56px; gap: 10px; padding: 7px 10px; border-radius: 17px; }
.room-topbar::after { inset: 3px; border-radius: 13px; }
.room-brand { gap: 8px; }
.room-brand .brand-icon { width: 36px; border-radius: 11px; }
.room-brand .brand-icon i { width: 14px; height: 14px; border-width: 3px; }
.room-brand .brand-copy small { font-size: .46rem; letter-spacing: .16em; }
.room-brand .brand-copy strong { font-size: .88rem; }
.room-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.font-controls { min-height: 30px; display: inline-flex; align-items: center; gap: 1px; padding: 2px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(0,0,0,.16); }
.font-controls > span { display: none; }
.font-controls button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; color: #c8d8d2; background: transparent; font-size: .55rem; font-weight: 900; }
.font-controls button[aria-pressed="true"] { color: #10281f; background: linear-gradient(135deg, #f0d48c, #77d6bd); box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.font-controls button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.connection-pill { color: #b7ffe8; background: rgba(27,169,132,.14); }
.connection-pill.is-offline, .connection-pill.is-error { color: #ffc5bb; background: rgba(180,65,51,.15); }
.connection-pill.is-offline i, .connection-pill.is-error i { background: #ff8e7b; box-shadow: 0 0 12px #ff8e7b; }
.connection-pill.is-connecting i { animation: pulse 1s infinite alternate; }
.room-topbar .connection-pill, .room-topbar .player-count, .room-topbar .self-name { min-height: 30px; gap: 5px; padding: 4px 8px; font-size: .6rem; }
.room-topbar .connection-pill i { width: 6px; height: 6px; }
.player-count { color: var(--mint); font: 900 .6rem/1 ui-monospace, monospace; }
.self-name { color: #111e1a; border-color: transparent; background: linear-gradient(120deg, #eed58d, #dcbf72); }
.outline-button { min-height: 30px; padding: 0 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: transparent; font-weight: 800; font-size: .6rem; }
.outline-button:hover { background: rgba(255,255,255,.08); }
.journey-button b { color: var(--gold); font: 900 .58rem/1 ui-monospace, monospace; }
.journey-button.is-complete { color: #13271f; border-color: transparent; background: linear-gradient(135deg, #efd58d, #78dac0); }
.journey-button.is-complete b { color: #13271f; }
.room-main { --chat-panel-width: 300px; display: grid; grid-template-columns: minmax(0, 1fr) 10px var(--chat-panel-width); gap: 6px; padding-top: 8px; }
.chat-resizer { min-height: 160px; position: relative; align-self: stretch; border-radius: 999px; cursor: col-resize; touch-action: none; }
.chat-resizer::before { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 64px; transform: translate(-50%, -50%); border-radius: 999px; background: rgba(110,231,198,.28); box-shadow: 0 0 0 1px rgba(255,255,255,.04); transition: height .16s, background .16s; }
.chat-resizer:hover::before, .chat-resizer:focus-visible::before, body.is-resizing-chat .chat-resizer::before { height: 96px; background: var(--mint); }
.chat-resizer:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
body.is-resizing-chat { cursor: col-resize; user-select: none; }
.map-card, .chat-card { min-width: 0; border: 1px solid var(--line); border-radius: 26px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.map { height: clamp(540px, calc(100dvh - 98px), 900px); min-height: 480px; position: relative; overflow: hidden; overflow: clip; isolation: isolate; outline: none; cursor: crosshair; background: #102a21; }
.map:focus-visible { box-shadow: inset 0 0 0 3px var(--mint); }
.world {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; contain: layout paint;
  background-color: #264f3b; background-image: url("world-map-v3.webp"); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%;
  image-rendering: auto;
}
.world::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 48%, transparent 20%, rgba(5,25,17,.13) 84%, rgba(3,16,12,.28)); }
.world-grid { position: absolute; inset: 0; opacity: .075; background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px); background-size: 160px 160px; }
.portal-layer { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.portal-marker { position: absolute; width: 68px; height: 68px; display: grid; place-items: center; transform: translate(-50%, -50%); border: 3px solid rgba(255,239,180,.9); border-radius: 50%; color: #fff2b0; background: rgba(8,43,34,.78); box-shadow: 0 0 0 9px rgba(255,222,126,.12), 0 10px 25px rgba(0,0,0,.28); font-size: 24px; animation: portalPulse 1.8s ease-in-out infinite alternate; }
.portal-marker.is-disabled { border-style: dashed; opacity: .82; }
.players-layer { position: absolute; z-index: 10; inset: 0; pointer-events: none; }
.player-marker { --marker-shift-x: 0px; --marker-shift-y: 0px; position: absolute; width: 72px; height: 96px; transform: translate(calc(-50% + var(--marker-shift-x)), calc(-80% + var(--marker-shift-y))); filter: drop-shadow(0 7px 5px rgba(0,0,0,.3)); }
.player-marker.is-self { z-index: 4; }
.player-marker.is-mid:not(.is-self) { opacity: .9; }
.player-marker.is-far:not(.is-self) { opacity: .64; filter: grayscale(.22) drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
.player-avatar { --facing-scale: 1; width: 50px; height: 63px; position: absolute; z-index: 1; left: 50%; bottom: 23px; background-position: center bottom; background-repeat: no-repeat; background-size: contain; image-rendering: pixelated; transform: translateX(-50%) scaleX(var(--facing-scale)); transform-origin: 50% 92%; }
.player-avatar.is-builtin {
  width: 50px;
  background-image: var(--motion-atlas);
  background-size: 800% 400%;
  background-position: var(--motion-x-idle) var(--direction-y, 0%);
}
.player-avatar.is-builtin.avatar-01, .player-avatar.is-builtin.avatar-02, .player-avatar.is-builtin.avatar-03, .player-avatar.is-builtin.avatar-04 { --motion-atlas: url("avatars/motion/avatar-jrpg-01-04-v4.png"); }
.player-avatar.is-builtin.avatar-05, .player-avatar.is-builtin.avatar-06, .player-avatar.is-builtin.avatar-07, .player-avatar.is-builtin.avatar-08 { --motion-atlas: url("avatars/motion/avatar-jrpg-05-08-v4.png"); }
.player-avatar.is-builtin.avatar-01, .player-avatar.is-builtin.avatar-05 { --motion-x-idle: 0%; --motion-x-walk: 14.285714%; }
.player-avatar.is-builtin.avatar-02, .player-avatar.is-builtin.avatar-06 { --motion-x-idle: 28.571429%; --motion-x-walk: 42.857143%; }
.player-avatar.is-builtin.avatar-03, .player-avatar.is-builtin.avatar-07 { --motion-x-idle: 57.142857%; --motion-x-walk: 71.428571%; }
.player-avatar.is-builtin.avatar-04, .player-avatar.is-builtin.avatar-08 { --motion-x-idle: 85.714286%; --motion-x-walk: 100%; }
.player-avatar[data-direction="down"] { --direction-y: 0%; }
.player-avatar[data-direction="left"] { --direction-y: 33.333333%; }
.player-avatar[data-direction="right"] { --direction-y: 66.666667%; }
.player-avatar[data-direction="up"] { --direction-y: 100%; }
.player-avatar.is-custom[data-direction="left"] { --facing-scale: -1; }
.player-marker.is-walking .player-avatar.is-builtin { animation: spriteWalkCycle .36s steps(1, end) infinite; }
.player-marker.is-walking .player-avatar.is-custom { animation: walkBob .32s ease-in-out infinite alternate; }
.player-marker.is-self .player-avatar { filter: drop-shadow(0 0 4px rgba(255,244,183,.86)); }
.player-label { width: max-content; max-width: 108px; position: absolute; z-index: 2; left: 50%; bottom: 2px; transform: translateX(-50%); padding: 0 2px; overflow: hidden; color: #fffdf3; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-shadow: 0 1px 1px rgba(0,10,7,.98), 1px 0 1px rgba(0,10,7,.9), -1px 0 1px rgba(0,10,7,.9), 0 0 4px rgba(0,10,7,.96); font-size: var(--player-name-size); font-weight: 900; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap; writing-mode: horizontal-tb; }
.player-marker:not(.is-self) .player-label { background: transparent; }
.player-emote { position: absolute; z-index: 4; left: 50%; bottom: 76px; min-width: 28px; height: 28px; display: grid; place-items: center; transform: translateX(-50%); border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)); color: #fff; font-size: 20px; line-height: 1; animation: emotePop .24s ease-out; }
.speech-layer { position: absolute; z-index: 60; inset: 0; overflow: hidden; pointer-events: none; }
.player-ui-layer { position: absolute; z-index: 66; inset: 0; overflow: hidden; pointer-events: none; }
.player-action-button { width: 22px; height: 22px; position: absolute; display: grid; place-items: center; transform: translate(-50%, -50%); padding: 0; pointer-events: auto; border: 1px solid rgba(255,255,255,.66); border-radius: 50%; color: #fff; background: rgba(8,35,29,.86); box-shadow: 0 5px 12px rgba(0,0,0,.28); font: 900 12px/1 ui-monospace, monospace; }
.player-action-button:hover, .player-action-button:focus-visible { color: #10271f; background: var(--gold); outline: 2px solid rgba(110,231,198,.9); outline-offset: 2px; }
.speech-bubble {
  --bubble-tail-x: 50%;
  width: max-content; min-width: 52px; max-width: min(180px, calc(100vw - 28px)); position: absolute; z-index: 3;
  left: 0; top: 0; padding: 5px 7px;
  color: #14271f; border: 1px solid rgba(255,255,255,.96); border-radius: 10px 10px 10px 4px;
  background: #fff9e9; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  font-family: inherit; font-size: var(--speech-text-size); font-weight: 800; line-height: 1.5; letter-spacing: .01em; text-align: left;
  writing-mode: horizontal-tb; text-orientation: mixed; white-space: normal; word-break: normal; overflow-wrap: anywhere; line-break: strict;
}
.speech-bubble::after {
  content: ""; position: absolute; left: var(--bubble-tail-x); bottom: -9px; transform: translateX(-50%);
  border-width: 9px 7px 0; border-style: solid; border-color: #fff9e9 transparent transparent;
}
.speech-bubble.is-distant { min-width: 34px; padding: 3px 8px; color: #dce9e4; border-color: rgba(255,255,255,.38); background: rgba(10,39,32,.9); text-align: center; letter-spacing: .12em; }
.speech-bubble.is-distant::after { border-top-color: rgba(10,39,32,.9); }
.speech-bubble.is-below { border-radius: 4px 10px 10px 10px; }
.speech-bubble.is-below::after { top: -9px; bottom: auto; border-width: 0 7px 9px; border-color: transparent transparent #fff9e9; }
.map-vignette { position: absolute; z-index: 20; inset: 0; pointer-events: none; box-shadow: inset 0 0 95px rgba(2,13,10,.38), inset 0 0 0 1px rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(5,21,16,.22), transparent 16%, transparent 81%, rgba(4,18,14,.26)); }
.portal-prompt { position: absolute; z-index: 50; left: 50%; bottom: 18px; width: min(430px, calc(100% - 390px)); min-width: 300px; transform: translateX(-50%); display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid rgba(233,201,121,.45); border-radius: 16px; background: rgba(5,23,18,.92); box-shadow: 0 14px 34px rgba(0,0,0,.32); backdrop-filter: blur(14px); }
.portal-prompt > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #17281f; background: var(--gold); font-size: 1.25rem; }
.portal-prompt div { min-width: 0; display: grid; gap: 2px; }
.portal-prompt small { color: var(--gold); font: 900 .49rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.portal-prompt strong { overflow: hidden; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-prompt p { margin: 0; overflow: hidden; color: #91a99f; font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-prompt button { min-height: 38px; padding: 0 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 11px; color: #10271f; background: linear-gradient(135deg, #f0d48c, #73d8bb); font-size: .65rem; font-weight: 900; }
.portal-prompt button:disabled { color: #91a89f; background: rgba(255,255,255,.07); }
.portal-action { display: grid; justify-items: end; gap: 3px; }
.portal-action > small { min-height: 8px; color: #a9c2b8; font: 800 .43rem/1 ui-monospace, monospace; white-space: nowrap; }
.minimap { position: absolute; z-index: 40; right: 12px; top: 12px; width: 158px; padding: 8px; border: 1px solid rgba(255,255,255,.19); border-radius: 12px; background: rgba(5,23,18,.82); box-shadow: 0 10px 25px rgba(0,0,0,.22); backdrop-filter: blur(12px); }
.minimap-heading { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: .47rem; letter-spacing: .06em; }
.minimap-heading span { color: var(--gold); font-weight: 900; }
.minimap-heading b { color: #9db2aa; }
.minimap-surface { aspect-ratio: 5 / 3; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background-color: #183e31; background-image: url("world-map-v3.webp"); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; image-rendering: auto; }
.minimap-surface::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: rgba(5,23,18,.13); }
.minimap-viewport { position: absolute; z-index: 1; border: 1px solid rgba(255,250,219,.9); background: rgba(255,255,255,.12); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.minimap-self { position: absolute; z-index: 2; width: 9px; height: 9px; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: #e8c769; box-shadow: 0 0 10px #ffe18a; }
.minimap-meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 5px; }
.minimap-meta strong { min-width: 0; overflow: hidden; color: #dce8e3; font-size: .47rem; text-overflow: ellipsis; white-space: nowrap; }
.minimap-meta span { flex: 0 0 auto; color: #8ea79e; font: 800 .42rem/1 ui-monospace, monospace; white-space: nowrap; }
.map-help { position: absolute; z-index: 40; left: 18px; bottom: 18px; display: grid; gap: 3px; padding: 11px 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(5,23,18,.78); backdrop-filter: blur(10px); }
.map-help strong { color: #fff7d9; font-size: .74rem; }
.map-help span { color: #98aea6; font-size: .59rem; }
.map-controls { position: absolute; z-index: 45; right: 18px; bottom: 18px; display: grid; justify-items: end; gap: 6px; }
.dpad-toggle { min-height: 30px; padding: 0 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #d9e7e1; background: rgba(5,23,18,.84); box-shadow: 0 7px 18px rgba(0,0,0,.22); backdrop-filter: blur(10px); font-size: .55rem; font-weight: 800; }
.dpad-toggle:hover { background: rgba(21,65,53,.94); }
.dpad { display: grid; grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 38px); gap: 4px; padding: 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(5,23,18,.82); box-shadow: 0 12px 30px rgba(0,0,0,.25); backdrop-filter: blur(12px); }
.dpad button { border: 1px solid rgba(255,255,255,.2); border-radius: 13px; color: #09281f; background: linear-gradient(145deg, #c9f1e4, #77c8b7); box-shadow: inset 0 1px rgba(255,255,255,.6); font-size: 1.25rem; font-weight: 900; touch-action: none; }
.dpad button:active, .dpad button.is-active { transform: translateY(1px); filter: brightness(.82); }
.dpad .jump-button { color: #f5e7bc; background: rgba(21,57,47,.95); border-color: rgba(233,201,121,.42); font: 900 .42rem/1 ui-monospace, monospace; letter-spacing: .02em; }

/* Chat */
.chat-card { min-height: 0; display: grid; grid-template-rows: auto minmax(220px, 1fr) auto; }
.chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 13px 10px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(24,64,52,.82), rgba(9,28,23,.4)); }
.chat-heading small { color: var(--gold); font: 800 .48rem/1 ui-monospace, monospace; letter-spacing: .08em; }
.chat-heading h2 { margin: 4px 0 0; font-size: 1rem; }
.audience-status { display: grid; justify-items: end; gap: 3px; }
.audience-status span { padding: 4px 7px; color: #0a2a21; border-radius: 999px; background: var(--mint); font-size: .56rem; font-weight: 900; }
.chat-log { min-height: 0; overflow-y: auto; padding: 10px 9px; scroll-behavior: smooth; scrollbar-color: #426c5f transparent; scrollbar-width: thin; }
.message { max-width: 88%; margin-bottom: 8px; }
.message.is-self { margin-left: auto; }
.message-meta { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; color: #86a097; font-size: .49rem; }
.message.is-self .message-meta { justify-content: flex-end; }
.message-meta b { color: #d8e4df; font-size: .54rem; }
.message-menu { width: 20px; height: 20px; display: grid; place-items: center; margin-left: auto; padding: 0; border: 0; border-radius: 50%; color: #a8beb5; background: rgba(255,255,255,.055); font: 900 .65rem/1 ui-monospace, monospace; }
.message.is-self .message-menu { display: none; }
.message-menu:hover, .message-menu:focus-visible { color: #0b271f; background: var(--gold); outline: 1px solid var(--mint); }
.message-body { padding: 6px 8px; color: #e8f1ed; border: 1px solid rgba(255,255,255,.08); border-radius: 4px 11px 11px 11px; background: #183b31; font-size: .62rem; line-height: 1.45; writing-mode: horizontal-tb; text-orientation: mixed; white-space: normal; word-break: normal; overflow-wrap: anywhere; line-break: strict; }
.message.is-self .message-body { color: #12251e; border-color: rgba(255,255,255,.32); border-radius: 11px 4px 11px 11px; background: linear-gradient(135deg, #f1da9b, #82d8c1); }
.chat-form { position: relative; padding: 9px; border-top: 1px solid var(--line); background: rgba(4,18,14,.62); }
.chat-form .alert { margin: 0 0 6px; }
.chat-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px 42px; gap: 6px; }
.chat-input-row input { min-height: 42px; padding-inline: 11px; border-radius: 11px; font-size: .68rem; }
.chat-input-row button { border: 1px solid rgba(255,255,255,.17); border-radius: 11px; color: #0b241c; background: linear-gradient(135deg, #f0d48c, #64d5b5); box-shadow: 0 8px 18px rgba(32,147,119,.16); font-size: .9rem; transition: transform .16s, opacity .16s; }
.chat-form .input-help { justify-content: flex-end; margin-top: 6px; font-size: .53rem; }
.chat-input-row button:not(:disabled):hover { transform: translateY(-2px); }
.chat-input-row button:disabled { cursor: not-allowed; opacity: .3; filter: grayscale(.5); }
.emote-bar { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; }
.emote-bar > span { margin-right: auto; color: #7f9b91; font: 900 .44rem/1 ui-monospace, monospace; letter-spacing: .08em; }
.emote-bar button { width: 28px; height: 25px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; color: #e9f1ed; background: rgba(255,255,255,.045); font-size: .72rem; line-height: 1; }
.emote-bar button:hover, .emote-bar button:focus-visible { border-color: rgba(110,231,198,.65); background: rgba(110,231,198,.13); outline: 0; }
.mobile-chat-toggle { display: none; }
.chat-input-row .emoji-toggle { padding: 0; color: #eef7f3; background: rgba(255,255,255,.055); box-shadow: none; font-size: 1rem; }
.emoji-tray { position: absolute; z-index: 20; right: 9px; bottom: calc(100% + 7px); width: min(220px, calc(100% - 18px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 6px; border: 1px solid rgba(110,231,198,.28); border-radius: 11px; background: rgba(5,23,18,.98); box-shadow: 0 12px 32px rgba(0,0,0,.46); }
.emoji-tray button { min-width: 0; height: 31px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; color: #fff; background: rgba(255,255,255,.045); font-size: .92rem; line-height: 1; }
.emoji-tray button:hover, .emoji-tray button:focus-visible { border-color: rgba(110,231,198,.55); background: rgba(110,231,198,.13); outline: 0; }

/* Safety dialog */
.player-dialog { width: min(430px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; color: var(--ink); border: 1px solid rgba(233,201,121,.27); border-radius: 20px; background: #0a211a; box-shadow: 0 28px 90px rgba(0,0,0,.58); }
.player-dialog::backdrop { background: rgba(1,9,7,.72); backdrop-filter: blur(5px); }
.dialog-card { padding: 15px; }
.dialog-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dialog-card > header small { color: var(--gold); font: 900 .5rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.dialog-card h2 { margin: 4px 0 0; font-size: 1rem; }
#player-dialog-close { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.05); font-size: 1rem; }
.dialog-summary { margin: 12px 0; color: #a9beb5; font-size: .7rem; line-height: 1.65; }
.target-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.target-actions > button { min-height: 36px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.06); font-size: .68rem; font-weight: 800; }
.report-box { grid-column: 1 / -1; padding: 9px; border: 1px solid rgba(255,173,159,.18); border-radius: 11px; background: rgba(94,35,29,.13); }
.report-box summary { cursor: pointer; color: #f4c0b7; font-size: .65rem; font-weight: 800; }
.report-box label { display: block; margin: 9px 0 4px; color: #aebfb8; font-size: .56rem; }
.report-box select, .report-box textarea { width: 100%; padding: 8px 9px; color: #eef5f1; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; outline: none; background: #071813; font-size: .66rem; resize: vertical; }
.report-box select:focus, .report-box textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(110,231,198,.1); }
.report-box .report-block-option { display: flex; align-items: center; gap: 7px; }
.report-block-option input { width: 15px; min-height: 15px; margin: 0; }
.danger-button { width: 100%; min-height: 36px; margin-top: 7px; border: 1px solid rgba(255,173,159,.3); border-radius: 9px; color: #24110e; background: #f0a697; font-size: .65rem; font-weight: 900; }
.moderation-list-section { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.moderation-list-section h3 { margin: 0 0 7px; font-size: .67rem; }
.moderation-list { display: grid; gap: 5px; }
.moderation-list > p { margin: 0; color: #829a90; font-size: .6rem; }
.moderation-entry { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 9px; background: rgba(255,255,255,.04); font-size: .6rem; }
.moderation-entry b { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moderation-entry span { color: #9ab0a7; }
.moderation-entry button { padding: 4px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.05); font-size: .55rem; }
.dialog-status { min-height: 1em; margin: 9px 0 0; color: var(--mint); font-size: .59rem; }
.journey-progress { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.journey-progress i { width: 0%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--mint)); transition: width .3s ease; }
.journey-list { display: grid; gap: 7px; margin: 12px 0; padding: 0; list-style: none; counter-reset: journey; }
.journey-list li { counter-increment: journey; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; color: #b3c6be; background: rgba(255,255,255,.035); font-size: .68rem; }
.journey-list li::before { content: counter(journey); width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #9bb1a8; background: rgba(255,255,255,.07); font: 900 .55rem/1 ui-monospace, monospace; }
.journey-list li::after { content: "未到着"; color: #718c82; font-size: .52rem; }
.journey-list li.is-visited { color: #f8edca; border-color: rgba(110,231,198,.3); background: rgba(110,231,198,.08); }
.journey-list li.is-visited::before { content: "✓"; color: #0c2b21; background: var(--mint); }
.journey-list li.is-visited::after { content: "到着"; color: var(--mint); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.dialog-actions button { min-height: 38px; padding: 7px 10px; border: 1px solid rgba(110,231,198,.2); border-radius: 10px; color: #d6e8e1; background: rgba(110,231,198,.07); font-size: .64rem; font-weight: 800; }
.dialog-actions button:first-child { color: #10261e; border-color: transparent; background: linear-gradient(135deg, #efd58d, #72d9bd); }
.dialog-actions button:disabled { cursor: not-allowed; opacity: .35; filter: grayscale(.6); }
.invite-actions { grid-template-columns: 1fr 1fr 1fr; }
.dialog-label { display: block; margin: 12px 0 5px; color: #b8ccc4; font-size: .62rem; font-weight: 800; }
.dialog-select { width: 100%; min-height: 42px; padding: 0 10px; color: #eff8f4; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; outline: 0; background: #071b15; font-size: .68rem; }
.dialog-select:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(110,231,198,.1); }

@keyframes spriteWalkCycle {
  0%, 49.999% { background-position: var(--motion-x-idle) var(--direction-y, 0%); transform: translateX(-50%) scaleX(var(--facing-scale)); }
  50%, 100% { background-position: var(--motion-x-walk) var(--direction-y, 0%); transform: translateX(-50%) scaleX(var(--facing-scale)); }
}
@keyframes walkBob { from { transform: translateX(-50%) translateY(0) scaleX(var(--facing-scale)); } to { transform: translateX(-50%) translateY(-1px) scaleX(var(--facing-scale)); } }
@keyframes jumpAvatar { 0%, 100% { transform: translateX(-50%) translateY(0) scaleX(var(--facing-scale)); } 18% { transform: translateX(-50%) translateY(1px) scaleX(var(--facing-scale)); } 52% { transform: translateX(-50%) translateY(-18px) scaleX(var(--facing-scale)); } 82% { transform: translateX(-50%) translateY(-3px) scaleX(var(--facing-scale)); } }
.player-marker.is-jumping .player-avatar.is-builtin,
.player-marker.is-jumping .player-avatar.is-custom { animation: jumpAvatar .62s cubic-bezier(.25,.75,.28,1); }
.player-marker.is-jumping .player-avatar.is-builtin { background-position: var(--motion-x-idle) var(--direction-y, 0%); }
@keyframes pulse { from { opacity: .38; } to { opacity: 1; } }
@keyframes portalPulse { from { box-shadow: 0 0 0 7px rgba(255,222,126,.08), 0 10px 25px rgba(0,0,0,.28); } to { box-shadow: 0 0 0 13px rgba(255,222,126,.18), 0 10px 25px rgba(0,0,0,.28); } }
@keyframes emotePop { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.6); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }

@media (max-width: 1180px) {
  .entry-card { grid-template-columns: .9fr 1.1fr; }
  .entry-form-panel { padding: 44px; }
}

@media (max-width: 880px) {
  body.is-in-room { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  .screen { padding: 9px; }
  .room-screen {
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: max(6px, env(safe-area-inset-top)) 6px 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .topbar { min-height: 70px; padding: 10px 13px; border-radius: 19px; }
  .room-topbar { width: 100%; min-height: 52px; padding: 6px 8px; border-radius: 15px; }
  .brand-icon { width: 46px; border-radius: 14px; }
  .brand-copy small { font-size: .54rem; }
  .brand-copy strong { font-size: 1.02rem; }
  .field-pill { font-size: .63rem; }
  .entry-main { padding-top: 9px; }
  .entry-card { min-height: 0; grid-template-columns: 1fr; border-radius: 22px; }
  .entry-form-panel { padding: 42px 24px 34px; }
  .entry-form-panel h1 { font-size: clamp(2.5rem, 11vw, 4.4rem); }
  .entry-visual { min-height: 390px; }
  .entry-info-grid, .entry-links { grid-template-columns: 1fr; }
  .entry-info { padding: 30px 24px; border-radius: 22px; }
  .room-main {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    position: relative;
    padding-top: 0;
    overflow: hidden;
    isolation: isolate;
  }
  .chat-resizer { display: none; }
  .room-topbar { position: relative; top: auto; }
  html[data-font-size="large"] .room-topbar { flex-wrap: wrap; }
  html[data-font-size="large"] .room-actions { width: 100%; justify-content: flex-end; }
  .room-actions { flex-wrap: nowrap; }
  .connection-pill span { font-size: 0; }
  .connection-pill { min-width: 32px; padding-inline: 8px; }
  .room-topbar .self-name { width: 30px; min-width: 30px; max-width: 30px; padding: 0; overflow: hidden; font-size: 0; }
  .self-name::before { content: "ME"; font-size: .6rem; }
  #leave-button, .safety-button { width: 38px; padding: 0; font-size: .54rem; }
  .journey-button span { display: none; }
  .invite-button { padding-inline: 9px; }
  .player-count { font-size: .55rem; padding-inline: 7px; }
  .room-main > .map-card,
  .room-main > .chat-card {
    position: absolute;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 19px;
  }
  .room-main > .map-card {
    z-index: 1;
    inset: 6px 0 max(6px, env(safe-area-inset-bottom));
    pointer-events: auto;
  }
  .room-main > .chat-card {
    z-index: 72;
    top: auto;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    max-height: min(56dvh, 430px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: rgba(6,25,20,.97);
    box-shadow: 0 16px 46px rgba(0,0,0,.4);
    transition: height .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .room-main[data-mobile-chat="collapsed"] > .chat-card {
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }
  .room-main[data-mobile-chat="collapsed"] .chat-card > :not(.chat-form) { display: none; }
  .room-main[data-mobile-chat="collapsed"] .chat-form {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: auto;
  }
  .room-main[data-mobile-chat="collapsed"] .emote-bar,
  .room-main[data-mobile-chat="collapsed"] .input-help { display: none; }
  .room-main[data-mobile-chat="expanded"] > .chat-card {
    height: min(56dvh, 430px);
    display: grid;
  }
  .map { width: 100%; height: 100%; min-height: 0; }
  .chat-log { min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .chat-input-row {
    position: relative;
    grid-template-columns: 40px minmax(0, 1fr) 40px 42px;
    gap: 5px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background: rgba(5,23,18,.95);
    box-shadow: 0 8px 28px rgba(0,0,0,.34);
    backdrop-filter: blur(16px);
  }
  .chat-input-row input {
    min-width: 0;
    min-height: 44px;
    padding-inline: 9px;
    border: 0;
    background: rgba(255,255,255,.035);
    box-shadow: none;
    font-size: 16px;
  }
  .chat-input-row button { min-width: 0; min-height: 44px; padding: 0; }
  .mobile-chat-toggle {
    position: relative;
    display: grid;
    place-items: center;
    color: #e9f3ee;
    background: rgba(255,255,255,.07);
    box-shadow: none;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .02em;
  }
  .mobile-chat-toggle-label { transform: translateY(.5px); }
  .mobile-chat-badge {
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    position: absolute;
    right: -5px;
    top: -7px;
    padding: 0 4px;
    border: 1px solid #fff2dc;
    border-radius: 999px;
    color: #fff;
    background: #d56553;
    font: 900 .5rem/1 ui-monospace, monospace;
  }
  .emoji-tray {
    position: absolute;
    right: 0;
    bottom: calc(100% + 7px);
    left: auto;
    width: min(220px, 100%);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 7px;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,.46);
  }
  .mobile-room-count {
    min-width: 0;
    min-height: 0;
    padding: 0;
    color: var(--mint);
    border: 0;
    background: transparent;
    font: 900 .43rem/1 ui-monospace, monospace;
    white-space: nowrap;
  }
  .map-controls, .portal-prompt { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .room-main.is-chat-input-active .map-controls { visibility: hidden; opacity: 0; pointer-events: none; }
  .room-screen > .version-badge { right: 9px; bottom: calc(68px + env(safe-area-inset-bottom)); }
  .minimap { width: 136px; }
}

@media (max-width: 560px) {
  .brand { gap: 9px; }
  .brand-icon { width: 40px; }
  .brand-icon i { width: 17px; height: 17px; border-width: 4px; }
  .room-brand .brand-copy small { display: none; }
  .room-brand .brand-copy strong { font-size: .88rem; }
  .field-pill { display: none; }
  .entry-nav { gap: 1px; }
  .entry-nav a { padding: 6px 7px; font-size: .57rem; }
  .entry-form-panel { padding: 34px 19px 28px; }
  .entry-form-panel h1 { margin-top: 17px; }
  .lead { line-height: 1.8; }
  .entry-live-strip { grid-template-columns: 1fr; margin-top: -12px; }
  .entry-live-strip p { padding: 7px 0 0; border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }
  .entry-visual { min-height: 315px; }
  .avatar-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .avatar-option { height: 64px; }
  .visual-badge { width: 82px; right: 16px; top: 16px; }
  .visual-badge b { font-size: 1.5rem; }
  .visual-caption { left: 20px; bottom: 22px; }
  .room-topbar { min-height: 48px; align-items: center; flex-wrap: nowrap; padding: 5px 6px; }
  .room-brand { width: auto; min-width: 0; flex: 0 1 auto; gap: 6px; }
  .room-brand .brand-icon { width: 32px; flex: 0 0 32px; border-radius: 10px; }
  .room-brand .brand-icon i { width: 13px; height: 13px; border-width: 3px; }
  .room-brand .brand-copy { min-width: 0; }
  .room-brand .brand-copy strong { display: block; max-width: 76px; overflow: hidden; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
  .room-actions { width: auto; min-width: 0; flex: 1; justify-content: flex-end; gap: 3px; flex-wrap: nowrap; }
  .room-actions #player-count,
  .room-actions #self-name { display: none; }
  .room-topbar .connection-pill { min-width: 28px; min-height: 28px; padding-inline: 7px; }
  #leave-button, .safety-button { width: 34px; min-width: 34px; min-height: 28px; padding: 0; font-size: .49rem; }
  .journey-button, .invite-button { min-width: 34px; min-height: 28px; padding: 0 6px; font-size: .49rem; }
  .journey-button b { font-size: .49rem; }
  .portal-prompt { bottom: 82px; width: calc(100% - 20px); min-width: 0; grid-template-columns: 36px minmax(0, 1fr) auto; }
  .portal-prompt > span { width: 34px; height: 34px; }
  .portal-prompt p { display: none; }
  .portal-action > small { display: none; }
  .minimap { right: 10px; top: 10px; width: 122px; padding: 7px; }
  .map-help { left: 10px; bottom: 10px; max-width: 185px; padding: 9px 10px; }
  .map-help span { font-size: .52rem; }
  .font-controls { min-height: 28px; gap: 0; padding: 1px; }
  .font-controls button { width: 22px; height: 24px; font-size: .5rem; }
  .map-controls { right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .dpad { grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 38px); padding: 7px; }
  .chat-heading { padding: 11px 12px 9px; }
  .chat-form { padding: 7px 8px max(7px, env(safe-area-inset-bottom)); }
  .entry-form-panel input, .chat-input-row input { font-size: 16px; }
  .player-dialog { width: calc(100% - 16px); }
  .invite-actions { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .entry-nav a:nth-child(2) { display: none; }
  .map-help { display: none; }
  .minimap { width: 112px; }
  .chat-input-row { grid-template-columns: 38px minmax(0, 1fr) 38px 40px; gap: 4px; padding: 4px; }
}

@media (max-width: 360px) {
  .room-brand .brand-copy { display: none; }
  .room-topbar { gap: 5px; }
  .font-controls button { width: 21px; }
  .mobile-room-count { font-size: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* NARABI NEAR SEO/MONETIZATION v1.7.1 */
.near-discovery,.near-support{margin-top:28px}
.near-support .affiliate-note{margin:16px 0 0;font-size:12px;line-height:1.7;opacity:.72}
.near-related-links{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.near-related-links a{text-decoration:underline}