:root {
  color-scheme: light;
  --ink: #17203b;
  --ink-soft: #4f5870;
  --paper: #fffaf0;
  --cream: #fff0cf;
  --blue: #377cf6;
  --blue-dark: #2452b5;
  --cyan: #4ed8da;
  --coral: #ff6f61;
  --gold: #ffc83d;
  --green: #54c78a;
  --purple: #8a6de9;
  --line: 3px solid var(--ink);
  --shadow: 0 8px 0 rgba(23, 32, 59, 0.14);
  font-family: "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #161d35; color: var(--ink); }
body { min-height: 100svh; overflow-x: hidden; }
button, select, input { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, [tabindex]:focus-visible, select:focus-visible { outline: 4px solid #fff; box-shadow: 0 0 0 7px var(--blue); }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-150%); background: #fff; border: var(--line); border-radius: 12px; padding: 10px; color: var(--ink); }
.skip-link:focus { transform: none; }

.site-shell { min-height: 100svh; display: grid; grid-template-columns: minmax(230px, 1fr) minmax(320px, 520px) minmax(230px, 1fr); align-items: center; gap: 28px; padding: 24px; background: radial-gradient(circle at 50% 20%, #303b66, #161d35 68%); }
.game-frame { position: relative; width: 100%; height: min(920px, calc(100svh - 32px)); min-height: 620px; overflow: hidden; isolation: isolate; background: var(--cream); border: 4px solid #0c1124; border-radius: 32px; box-shadow: 0 30px 80px rgba(0,0,0,.36), inset 0 0 0 3px rgba(255,255,255,.18); }
.desktop-panel { width: min(300px, 100%); color: #f7f8ff; }
.desktop-panel--left { justify-self: end; }
.desktop-panel--right { justify-self: start; }
.brand-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; font-weight: 900; letter-spacing: .07em; line-height: .9; }
.brand-lockup small { display: inline-block; margin-top: 4px; color: #bec6e4; font-size: .58rem; letter-spacing: .09em; }
.brand-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 5px 0 #090d1c; font-size: .72rem; letter-spacing: -.16em; white-space: nowrap; transform: rotate(-4deg); }
.side-card { padding: 20px; border: 2px solid rgba(255,255,255,.2); border-radius: 22px; background: rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.side-card h2, .desktop-panel h2 { margin: 5px 0 10px; font-size: 1.25rem; }
.side-card p, .side-note { color: #bec6e4; line-height: 1.7; font-size: .9rem; }
.eyebrow { margin: 0; color: #8bdcdf; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.key-guide { margin-top: 20px; text-align: center; }
kbd { display: inline-grid; place-items: center; width: 36px; height: 34px; margin: 2px; color: var(--ink); background: #fff; border: 2px solid #aeb7d5; border-radius: 8px; box-shadow: 0 3px 0 #8d97b7; }
.key-guide small { display: block; margin-top: 10px; color: #909abc; }
.side-note { padding: 10px 4px; }
.career-log { max-height: 47svh; overflow: auto; padding: 0; list-style: none; counter-reset: log; }
.career-log li { position: relative; padding: 10px 8px 10px 38px; color: #c9d0ea; border-left: 2px solid #465175; font-size: .86rem; line-height: 1.4; }
.career-log li::before { counter-increment: log; content: counter(log); position: absolute; left: -14px; top: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--ink); background: var(--cyan); border: 2px solid var(--ink); font-size: .7rem; font-weight: 900; }
.side-card--tip { display: flex; gap: 12px; align-items: center; margin-top: 20px; padding: 14px; }
.side-card--tip p { margin: 3px 0 0; }
.tip-icon { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink); background: var(--gold); color: var(--ink); font-weight: 900; }

.boot-screen { height: 100%; display: grid; place-content: center; justify-items: center; gap: 15px; background: linear-gradient(145deg, #fff1c9, #ffca72); font-weight: 800; }
.boot-logo { display: grid; place-items: center; width: 92px; height: 92px; border: 5px solid var(--ink); border-radius: 30px; background: var(--gold); box-shadow: 0 9px 0 var(--ink); font-size: 1.45rem; letter-spacing: -.12em; white-space: nowrap; transform: rotate(-5deg); animation: boot-bob 1s ease-in-out infinite alternate; }
@keyframes boot-bob { to { transform: translateY(-9px) rotate(4deg); } }

.screen { height: 100%; padding: max(22px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom)); overflow-y: auto; background: var(--paper); }
.screen--hero { display: flex; flex-direction: column; justify-content: flex-end; background: #ffc66a; overflow: hidden; }
.hero-art { position: absolute; inset: 0 0 38%; overflow: hidden; background: linear-gradient(#79d9dd 0 30%, #acd98b 30% 34%, #ef9d5d 34%); }
.hero-art::before { content: ""; position: absolute; width: 520px; height: 360px; left: 50%; top: 30%; transform: translate(-50%) rotate(30deg); background: repeating-linear-gradient(90deg, #efb875 0 52px, #f4c785 52px 55px); border: 6px solid rgba(23,32,59,.1); box-shadow: 0 30px 0 rgba(23,32,59,.08); }
.hero-buildings { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 5%, #f7dfb4 5% 22%, transparent 22% 70%, #ff806d 70% 92%, transparent 92%); opacity: .8; clip-path: polygon(0 35%,18% 18%,28% 65%,70% 48%,79% 20%,100% 42%,100% 100%,0 100%); }
.hero-character { position: absolute; left: 50%; bottom: 10%; width: 110px; height: 160px; transform: translateX(-50%); filter: drop-shadow(0 14px 0 rgba(23,32,59,.15)); }
.hero-character .head { position: absolute; top: 0; left: 25px; width: 62px; height: 66px; border: 5px solid var(--ink); border-radius: 45% 45% 48% 48%; background: #f2b580; z-index: 2; }
.hero-character .hair { position: absolute; top: -8px; left: 20px; width: 72px; height: 38px; border: 5px solid var(--ink); border-radius: 50% 55% 20% 20%; background: #49344b; transform: rotate(-4deg); z-index: 3; }
.hero-character .body { position: absolute; top: 59px; left: 15px; width: 82px; height: 74px; border: 5px solid var(--ink); border-radius: 28px 28px 16px 16px; background: var(--blue); }
.hero-character .badge { position: absolute; z-index: 4; top: 78px; left: 42px; width: 29px; height: 34px; border: 4px solid var(--ink); border-radius: 8px; background: #fff; }
.hero-character .leg { position: absolute; top: 124px; width: 27px; height: 41px; border: 5px solid var(--ink); border-radius: 10px; background: #314772; }
.hero-character .leg--a { left: 25px; transform: rotate(9deg); }.hero-character .leg--b { right: 25px; transform: rotate(-9deg); }
.hero-copy { position: relative; z-index: 2; margin: 0 -22px -22px; padding: 34px 26px max(28px, env(safe-area-inset-bottom)); border-top: 4px solid var(--ink); border-radius: 30px 30px 0 0; background: var(--paper); }
.title-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 2px solid var(--ink); border-radius: 999px; background: var(--cyan); font-size: .72rem; font-weight: 900; }
.game-title { margin: 12px 0 4px; color: var(--blue); font-size: clamp(3.5rem, 15vw, 5.5rem); line-height: .95; letter-spacing: .02em; }
.title-subtitle { margin: 0 0 11px; color: var(--ink); font-size: clamp(.84rem, 3.7vw, 1rem); font-weight: 900; letter-spacing: .04em; line-height: 1.45; }
.lead { margin: 10px 0 20px; color: var(--ink-soft); font-weight: 700; line-height: 1.6; }
.button-stack { display: grid; gap: 10px; }
.btn { min-height: 52px; padding: 11px 18px; border: var(--line); border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 5px 0 var(--ink); font-weight: 900; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn--primary { color: #fff; background: var(--blue); }.btn--accent { background: var(--gold); }.btn--ghost { background: transparent; box-shadow: none; }.btn--danger { color: #fff; background: #c94957; }
.btn:disabled { cursor: not-allowed; opacity: .48; filter: grayscale(.3); transform: none; box-shadow: 0 4px 0 var(--ink); }
.screen-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.screen-header h1 { margin: 2px 0 0; font-size: 1.7rem; }.screen-header p { margin: 0; }
.icon-btn { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border: var(--line); border-radius: 15px; background: #fff; box-shadow: 0 4px 0 var(--ink); cursor: pointer; font-size: 1.2rem; }
.stepper { display: flex; gap: 7px; margin: 12px 0 24px; }.stepper span { height: 8px; flex: 1; border: 2px solid var(--ink); border-radius: 999px; background: #fff; }.stepper .is-active { background: var(--blue); }
.screen--setup { display: grid; grid-template-rows: auto minmax(132px, .85fr) minmax(288px, 1.3fr); gap: 12px; overflow: hidden; }.screen-header--setup { margin: 0; }.setup-avatar-stage { position: relative; min-height: 132px; overflow: hidden; border: var(--line); border-radius: 24px; background: linear-gradient(145deg, #78dbe0 0 54%, #acd98b 54%); box-shadow: 0 5px 0 rgba(23,32,59,.18); }.setup-avatar-stage::before, .setup-avatar-stage::after { content: ""; position: absolute; bottom: -21px; width: 55%; height: 56%; border: 3px solid rgba(23,32,59,.13); border-radius: 50% 50% 0 0; background: #f2bd79; }.setup-avatar-stage::before { left: -8%; transform: rotate(10deg); }.setup-avatar-stage::after { right: -8%; transform: rotate(-10deg); }.setup-avatar-canvas { position: relative; z-index: 1; display:block; width:100%; height:100%; min-height:132px; cursor:grab; touch-action:none; }.setup-avatar-canvas:active { cursor:grabbing; }
.setup-choice-sheet { min-height: 0; padding: 12px; border: var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow); }.setup-step-nav { display:flex; align-items:center; min-height:32px; }.setup-nav-button { min-height:32px; padding:5px 7px; border:0; border-radius:9px; color:var(--ink-soft); background:transparent; font-size:.68rem; font-weight:900; cursor:pointer; text-align:left; }.setup-nav-button:hover { background:#eef3ff; color:var(--blue-dark); }.setup-nav-button:disabled { visibility:hidden; }.stepper--setup { margin:9px 0 13px; }.stepper--setup span { height:7px; }
.setup-question-heading { margin: 0 0 10px; }.setup-question-heading h2 { margin:0; font-size:1.08rem; }.choice-group { margin:0; }.choice-grid { display:grid; gap:8px; }.choice-card { width:100%; position:relative; display:grid; grid-template-columns:43px 1fr auto; align-items:center; gap:10px; min-height:62px; padding:8px 10px; border:2px solid var(--ink); border-radius:15px; color:var(--ink); background:#fff; box-shadow:0 3px 0 rgba(23,32,59,.18); cursor:pointer; text-align:left; transition:transform .12s, box-shadow .12s, background .12s; }.choice-card:hover, .choice-card.is-selected { background:#f6f8ff; transform:translateY(-1px); box-shadow:0 4px 0 var(--blue); }.choice-card:focus-visible { outline:4px solid var(--blue); outline-offset:2px; }.choice-icon { display:grid; place-items:center; width:41px; height:41px; border:2px solid var(--ink); border-radius:12px; background:var(--cream); font-size:1.25rem; }.choice-copy strong, .choice-copy small { display:block; }.choice-copy strong { font-size:.86rem; }.choice-copy small { margin-top:2px; color:var(--ink-soft); font-size:.67rem; }.choice-arrow { display:grid; place-items:center; width:27px; height:27px; color:var(--blue-dark); font-size:1.35rem; font-weight:900; }.choice-card:hover .choice-arrow { transform:translateX(3px); }

.job-list { display: grid; gap: 14px; }.job-card { position: relative; padding: 16px; border: var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }.job-card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -55px; top: -55px; border-radius: 50%; background: var(--job-color, var(--blue)); opacity: .15; }.job-card--locked { background: #f3f0eb; }.job-head { position: relative; z-index: 1; display: grid; grid-template-columns: 56px 1fr auto; gap: 11px; align-items: center; }.job-icon { display: grid; place-items: center; width: 54px; height: 54px; border: var(--line); border-radius: 17px; background: var(--job-color, var(--blue)); font-size: 1.6rem; }.job-head h2 { margin: 0; font-size: 1.08rem; }.job-head p { margin: 4px 0 0; color: var(--ink-soft); font-size: .74rem; }.fit-score { text-align: right; }.fit-score strong { display: block; color: var(--blue); font-size: 1.25rem; }.fit-score small { color: var(--ink-soft); }.job-reasons { margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: #f4f5fa; color: var(--ink-soft); font-size: .76rem; line-height: 1.5; }.job-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 13px 0; }.job-stat { text-align: center; }.job-stat small { display: block; color: var(--ink-soft); font-size: .62rem; }.dots { display: flex; justify-content: center; gap: 3px; margin-top: 5px; }.dots i { width: 8px; height: 8px; border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; }.dots i.on { background: var(--job-color, var(--blue)); }.job-card .btn { width: 100%; min-height: 46px; }.soon-badge { padding: 6px 9px; border: 2px solid var(--ink); border-radius: 999px; background: var(--gold); font-size: .65rem; font-weight: 900; white-space: nowrap; }

.workplace-screen { position: relative; height: 100%; background: #e9c188; overflow: hidden; }.world-canvas { display: block; width: 100%; height: 100%; touch-action: none; }.world-shade { pointer-events: none; position: absolute; inset: 0; background: linear-gradient(rgba(11,20,46,.12), transparent 19%, transparent 76%, rgba(11,20,46,.28)); }
.virtual-joystick { --joystick-x: 0px; --joystick-y: 0px; pointer-events: none; position: absolute; z-index: 2; left: 0; top: 0; display: grid; place-items: center; width: min(68px, 19vmin); aspect-ratio: 1; border: 2px solid rgba(255,255,255,.56); border-radius: 50%; background: rgba(7,12,26,.52); opacity: 0; visibility: hidden; transform: translate(-50%,-50%) scale(.82); transition: opacity .14s ease-out, transform .14s ease-out, visibility 0s linear .14s; }.virtual-joystick.is-active { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); transition-delay: 0s; }.virtual-joystick__stick { position: absolute; left: 50%; top: 50%; width: min(36px, 10vmin); aspect-ratio: 1; border: 2px solid rgba(255,255,255,.84); border-radius: 50%; background: rgba(255,255,255,.82); box-shadow: 0 2px 8px rgba(0,0,0,.24); transform: translate(calc(-50% + var(--joystick-x)), calc(-50% + var(--joystick-y))); }
.hand-raised { display: block; width: 100%; height: 100%; fill: currentColor; }.movement-hint { pointer-events: none; position: absolute; z-index: 3; left: 50%; top: 59%; width: 180px; height: 100px; color: rgba(255,255,255,.94); opacity: 0; visibility: hidden; transform: translate(-50%,-50%) scale(.88); transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.32)); }.movement-hint.is-visible { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); transition-delay: 0s; }.movement-hint__infinity { position: relative; z-index: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(255,255,255,.65); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }.movement-hint__finger { position: absolute; z-index: 1; left: 50%; top: 50%; width: 56px; height: 56px; color: #fff; transform: translate(-50%,-50%) rotate(-12deg); animation: movement-hint-finger 3.6s linear infinite; }.movement-hint:not(.is-visible) .movement-hint__finger { animation-play-state: paused; }
@keyframes movement-hint-finger { 0%,100% { transform:translate(-50%,-50%) rotate(-12deg); left:50%; top:50%; } 12.5% { left:34%; top:76%; } 25% { left:6%; top:50%; } 37.5% { left:34%; top:24%; } 50% { left:50%; top:50%; } 62.5% { left:66%; top:24%; } 75% { left:94%; top:50%; } 87.5% { left:66%; top:76%; } }
.hud-top { position: absolute; z-index: 5; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }.hud-top > * { pointer-events: auto; }.age-chip, .money-chip { min-height: 47px; border: var(--line); border-radius: 15px; background: rgba(255,255,255,.95); box-shadow: 0 5px 0 rgba(23,32,59,.75); }.age-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px; }.age-chip strong { font-size: 1.2rem; }.age-chip small { display: block; color: var(--ink-soft); font-size: .62rem; }.money-chip { padding: 6px 11px; text-align: right; }.money-chip strong { display: block; color: #138b5e; }.money-chip small { display: block; color: var(--ink-soft); font-size: .62rem; }
.hud-top .icon-btn { width: 47px; height: 47px; box-shadow: 0 5px 0 rgba(23,32,59,.75); }
.objective-card { position: absolute; z-index: 5; top: max(76px, calc(env(safe-area-inset-top) + 64px)); left: 50%; width: min(88%, 390px); transform: translateX(-50%); padding: 10px 12px; border: var(--line); border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 6px 0 rgba(23,32,59,.78); }.objective-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; }.objective-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: var(--gold); font-size: 1.35rem; }.objective-copy strong, .objective-copy small { display: block; }.objective-copy small { margin-top: 3px; color: var(--ink-soft); font-size: .67rem; }.objective-count { font-size: .75rem; font-weight: 900; }.progress { position: relative; height: 13px; margin-top: 8px; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; background: #dce0e8; }.progress > span { display: block; height: 100%; width: var(--progress, 0%); border-right: 2px solid var(--ink); background: linear-gradient(90deg, var(--cyan), var(--blue)); transition: width .12s linear; }
.progress > span.is-complete { background: linear-gradient(90deg, var(--gold), var(--coral)); }
.hud-bottom { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); display: grid; gap: 8px; }.stats-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }.mini-stat { padding: 7px 3px; border: 2px solid var(--ink); border-radius: 11px; background: rgba(255,255,255,.92); text-align: center; box-shadow: 0 3px 0 rgba(23,32,59,.62); }.mini-stat small, .mini-stat strong { display: block; }.mini-stat small { color: var(--ink-soft); font-size: .56rem; }.mini-stat strong { margin-top: 2px; font-size: .8rem; }.work-tip { justify-self: center; padding: 7px 12px; border: 2px solid rgba(23,32,59,.6); border-radius: 999px; color: #fff; background: rgba(23,32,59,.72); font-size: .67rem; font-weight: 800; backdrop-filter: blur(5px); }
.reward-pop { pointer-events: none; position: absolute; z-index: 7; left: 50%; top: 42%; transform: translate(-50%,-50%); padding: 12px 18px; border: var(--line); border-radius: 16px; background: var(--gold); box-shadow: 0 6px 0 var(--ink); font-size: 1.05rem; font-weight: 900; animation: reward-pop .9s both; }.reward-pop small { display: block; margin-top: 3px; font-size: .68rem; }.reward-pop--hidden { display:none; }
@keyframes reward-pop { 0% { opacity:0; transform:translate(-50%,20%) scale(.5) rotate(-5deg) } 25% { opacity:1; transform:translate(-50%,-50%) scale(1.08) rotate(2deg) } 75% { opacity:1 } 100% { opacity:0; transform:translate(-50%,-110%) scale(.9) } }

.modal-backdrop { position: absolute; z-index: 20; inset: 0; display: grid; align-items: end; padding: 18px; background: rgba(12,17,36,.58); backdrop-filter: blur(4px); }.modal { max-height: 86%; overflow: auto; padding: 20px; border: var(--line); border-radius: 25px; background: var(--paper); box-shadow: 0 9px 0 var(--ink); animation: modal-up .22s ease-out; }.modal h2 { margin: 5px 0 9px; font-size: 1.45rem; }.modal p { color: var(--ink-soft); line-height: 1.55; }.modal-icon { display: grid; place-items: center; width: 52px; height: 52px; border: var(--line); border-radius: 16px; background: var(--gold); font-size: 1.5rem; }.modal-actions { display: grid; gap: 9px; margin-top: 18px; }.modal-actions--row { grid-template-columns: 1fr 1fr; }
@keyframes modal-up { from { opacity:0; transform:translateY(30px) } }
.event-option { width: 100%; margin-top: 9px; padding: 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; }.event-option strong, .event-option span { display:block; }.event-option span { margin-top: 4px; color: var(--ink-soft); font-size: .73rem; }.event-option:hover { background:#eaf1ff; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid #d9d6ce; }.settings-row input[type="range"] { width: 45%; }.switch { position: relative; width: 54px; height: 32px; }.switch input { position:absolute; opacity:0; }.switch span { position:absolute; inset:0; border:2px solid var(--ink); border-radius:99px; background:#bbc0cb; }.switch span::after { content:""; position:absolute; width:22px; height:22px; top:3px; left:4px; border:2px solid var(--ink); border-radius:50%; background:#fff; transition:.15s; }.switch input:checked + span { background:var(--green); }.switch input:checked + span::after { transform:translateX(20px); }

.summary-hero { margin: 0 -22px 22px; padding: 45px 24px 28px; color: #fff; background: linear-gradient(145deg, var(--blue-dark), var(--purple)); border-bottom: 4px solid var(--ink); text-align:center; }.summary-hero .big-score { margin: 5px 0; font-size: 3.5rem; line-height:1; }.summary-hero p { margin:7px 0; color:#e8e7ff; }.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.summary-stat { padding:13px; border:2px solid var(--ink); border-radius:14px; background:#fff; }.summary-stat small,.summary-stat strong { display:block; }.summary-stat small { color:var(--ink-soft); font-size:.68rem; }.summary-stat strong { margin-top:4px; font-size:1.1rem; }.history-list { padding-left:20px; color:var(--ink-soft); line-height:1.65; font-size:.83rem; }.upgrade-list { display:grid; gap:9px; }.upgrade-card { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:11px; border:2px solid var(--ink); border-radius:14px; background:#fff; }.upgrade-card .upgrade-icon { display:grid; place-items:center; width:40px; height:40px; border:2px solid var(--ink); border-radius:11px; background:var(--cyan); }.upgrade-card p { margin:2px 0 0; color:var(--ink-soft); font-size:.68rem; }.upgrade-card .btn { min-height:40px; padding:7px 10px; box-shadow:0 3px 0 var(--ink); font-size:.7rem; }
.toast-region { position:fixed; z-index:100; left:50%; bottom:20px; width:min(90%,390px); transform:translateX(-50%); pointer-events:none; }.toast { padding:12px 16px; border:var(--line); border-radius:14px; color:#fff; background:var(--ink); box-shadow:0 6px 18px rgba(0,0,0,.3); text-align:center; font-weight:800; animation:toast-in 2.8s both; }.toast--warning { background:#a5424e; }.toast + .toast { margin-top:7px; }
@keyframes toast-in { 0%{opacity:0;transform:translateY(15px)} 10%,85%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-8px)} }
.job-preview-events { margin: 0 0 13px; color: var(--ink-soft); font-size: .73rem; line-height: 1.5; }.job-preview-events strong { color: var(--ink); }.preview-events-heading { margin: 18px 0 8px; font-size: 1rem; }.preview-events { margin: 0; padding-left: 1.3rem; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }
.notice { padding:12px; border:2px solid var(--ink); border-radius:13px; background:#fff3c7; font-size:.76rem; line-height:1.5; }.empty-state { display:grid; place-content:center; height:100%; padding:30px; text-align:center; background:var(--paper); }.empty-state .modal-icon { margin:auto; }.empty-state .btn { margin-top:15px; }

@media (max-width: 1000px) {
  .site-shell { display:block; padding:0; background:var(--paper); }
  .desktop-panel { display:none; }
  .game-frame { width:100%; height:100svh; min-height:580px; border:0; border-radius:0; box-shadow:none; }
}
@media (max-height: 640px) {
  .screen--setup { grid-template-rows:auto minmax(104px, .7fr) minmax(266px, 1.3fr); gap:8px; padding-right:16px; padding-left:16px; }
  .setup-avatar-stage, .setup-avatar-canvas { min-height:104px; border-radius:20px; }
  .setup-choice-sheet { padding:9px; border-radius:20px; }.setup-step-nav, .setup-nav-button { min-height:28px; }.setup-nav-button { font-size:.62rem; }.stepper--setup { margin:6px 0 8px; }.stepper--setup span { height:6px; }
  .setup-question-heading { margin-bottom:6px; }.setup-question-heading h2 { font-size:1rem; }.choice-grid { gap:6px; }.choice-card { min-height:54px; padding:6px 8px; }.choice-icon { width:37px; height:37px; font-size:1.1rem; }.choice-copy strong { font-size:.78rem; }.choice-copy small { font-size:.61rem; }
}
@media (max-height: 700px) and (min-width: 1001px) { .game-frame { min-height:0; height:calc(100svh - 16px); }.site-shell{padding:8px;} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
.virtual-joystick.is-reduced-motion { transition: none; }