:root { font-family: "Comic Sans MS", "Segoe Print", ui-sans-serif, system-ui, sans-serif; color: #171713; background: #e8dfca; }
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #fff7b5, #ddd2bb 55%); }
button { font: inherit; }
.app-shell { width: min(100%, 520px); margin: auto; overflow: hidden; padding: max(12px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); background: rgba(250,250,242,.9); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow { font: 800 11px/1 monospace; letter-spacing: .18em; color: #696a5f; }
.demo-notice { display: inline-block; margin: 3px 0 0; padding: 2px 7px; border: 1.5px solid #171713; border-radius: 999px; background: #fff145; font-size: 11px; font-weight: 900; }
h1 { margin: 3px 0 0; font-size: clamp(23px, 6.4vw, 31px); line-height: 1; }
.rules-button { min-width: 64px; min-height: 42px; border: 2px solid #171713; border-radius: 12px; background: #fff145; font-weight: 900; box-shadow: 3px 3px 0 #171713; }
.status-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 10px 0 7px; }
.status-card div { padding: 7px; border: 1px solid #cacbbf; border-radius: 10px; background: white; }
.status-card span, .status-card strong, .status-card label { display: block; }
.status-card span, .status-card label { color: #74766b; font-size: 11px; }
.status-card strong { margin-top: 2px; font-size: 13px; }
.status-card select { display: block; width: 100%; margin-top: 1px; padding: 0; border: 0; background: transparent; color: #171713; font: inherit; font-size: 13px; font-weight: 900; line-height: 1.2; cursor: pointer; }
.status-card select:disabled { cursor: default; opacity: 1; }
.wallet-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; padding: 9px 11px; border: 2px solid #171713; border-radius: 14px; background: #fff; transition: transform .25s, box-shadow .25s, background .25s; }
.wallet-card span { display: block; color: #707168; font-size: 11px; }
.wallet-card strong { display: block; margin-top: 1px; font-size: 21px; }
.wallet-card.balance-pop { transform: scale(1.05); background: #dfffe1; box-shadow: 0 0 0 5px rgba(33,193,76,.2), 5px 5px 0 #171713; }
.sound-toggle { min-height: 36px; padding: 0 10px; border: 1px solid #171713; border-radius: 10px; background: #f1f1e9; font-size: 12px; font-weight: 800; }
.mode-switch { display: flex; padding: 2px; border: 1px solid #171713; border-radius: 10px; background: #e8e8dd; }
.mode-switch button { min-height: 30px; padding: 0 7px; border: 0; border-radius: 7px; background: transparent; font-size: 11px; font-weight: 900; }
.mode-switch button[aria-pressed="true"] { background: #fff145; box-shadow: 1px 1px 0 #171713; }
.scene { position: relative; height: 115px; overflow: hidden; border: 2px solid #171713; border-radius: 16px; background: repeating-linear-gradient(90deg,#bdc0b3 0 48px,#afb2a5 48px 50px); }
.boss { position: absolute; left: 12px; bottom: 0; width: 91px; height: 111px; object-fit: contain; pointer-events: none; transition: transform .9s ease-in-out; }
.boss.patrolling { animation: boss-patrol 3.2s ease-in-out infinite alternate; }
.boss.walking { transform: translateX(260px); }
.speech { position: absolute; top: 16px; right: 11px; max-width: calc(100% - 122px); padding: 9px 11px; border-radius: 12px 12px 4px 12px; background: #171713; color: white; font-size: 12px; font-weight: 700; }
.circuit-strip { position: absolute; right: 8px; bottom: 7px; z-index: 4; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 112px); padding: 3px 4px 3px 7px; border: 1px solid #171713; border-radius: 8px; background: rgba(250,250,242,.94); font: 800 8px/1.1 monospace; }
.circuit-strip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.circuit-strip button { flex: none; min-height: 23px; padding: 0 6px; border: 1px solid #171713; border-radius: 5px; background: #fff145; font: 900 9px/1 sans-serif; }
.rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 134px; gap: 7px; width: 100%; margin: 8px 0; }
.room { width: 100%; min-width: 0; height: 134px; padding: 6px; overflow: hidden; text-align: left; border: 2.5px solid #171713; border-radius: 9px 15px 10px 14px; background: #f8f1df; color: inherit; box-shadow: 3px 3px 0 rgba(23,23,19,.18); }
.room span, .room strong, .room small, .room em { display: block; }
.room > span { font-size: 11px; line-height: 1; }
.room strong { margin-top: 2px; font-size: 17px; line-height: 1; }
.room em { width: fit-content; margin-top: 3px; padding: 2px 4px; border-radius: 5px; background: #e8e8dd; color: #505148; font-size: 8px; line-height: 1.15; font-style: normal; font-weight: 800; }
.room-avatars { display: grid; grid-template-columns: repeat(2, 29px); column-gap: 3px; row-gap: 10px; min-height: 29px; margin: 5px 0 3px; }
.avatar-slot { position: relative; display: block; width: 22px; height: 22px; }
.room-avatars img { width: 22px; height: 22px; border: 1.5px solid #171713; border-radius: 50%; background: #f4edda; object-fit: cover; }
.room-avatars img:nth-child(2n) { transform: rotate(3deg); }
.room-avatars img:nth-child(3n) { transform: rotate(-3deg); }
.avatar-slot.is-me img { border: 2.5px solid #0a9d38; box-shadow: 0 0 0 1px #fff; }
.avatar-slot.is-me b { position: absolute; right: -7px; top: -6px; z-index: 3; min-width: 14px; padding: 1px 2px; border: 1px solid #171713; border-radius: 4px; background: #fff145; color: #171713; font: 900 8px/1.15 sans-serif; text-align: center; }
.avatar-title { position: absolute; left: 12px; bottom: -7px; z-index: 2; padding: 1px 2px; border: 1px solid #171713; border-radius: 4px; background: #fff; color: #171713; font: 900 7px/1.1 sans-serif; font-style: normal; white-space: nowrap; }
.avatar-slot.is-me .avatar-title { left: 5px; bottom: -9px; }
.room small { margin-top: 2px; overflow: hidden; color: #77786f; font-size: 8px; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
.room.selected { border-color: #171713; background: #fff145; box-shadow: 3px 3px 0 #171713; }
.room:disabled { opacity: 1; }
.action-card, .result { padding: 10px; border-radius: 14px; background: white; border: 1px solid #cacbbf; }
.action-card p { min-height: 16px; margin: 0 0 7px; font-size: 12px; line-height: 1.25; color: #616258; }
.primary, .secondary { width: 100%; min-height: 47px; border: 0; border-radius: 12px; font-weight: 900; }
.primary { background: #171713; color: #fff; }
.secondary { margin-top: 8px; background: #fff145; color: #171713; border: 2px solid #171713; }
.primary:disabled { background: #6d6e65; }
.result { margin-top: 12px; border: 2px solid #171713; background: #fff145; }
.community-bar { display: flex; align-items: center; gap: 6px; margin: 7px 0; min-width: 0; }
.community-bar button { min-height: 32px; padding: 5px 8px; border: 1.5px solid #171713; border-radius: 9px; background: #fff; font-size: 11px; font-weight: 900; white-space: nowrap; }
.community-bar button b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #fff145; }
.community-bar span { overflow: hidden; margin-left: auto; color: #66675e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.result-kicker { margin: 0; font-size: 12px; font-weight: 800; }
.result h2 { margin: 4px 0; font-size: 28px; }
.result p:last-child { margin-bottom: 0; }
.round-summary { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(23,23,19,.25); font-weight: 800; }
.claim-bonus { display: inline-block; padding: 4px 10px; border: 2px solid #171713; border-radius: 8px; background: #fff; font-size: 20px; font-weight: 1000; transform: rotate(-2deg); }
.profit-positive { color: #078b2e; }
.profit-negative { color: #d32318; }
.hidden { display: none !important; }
.settlement-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: start center; padding: 15vh 18px 0; pointer-events: none; background: radial-gradient(circle at 50% 26%, rgba(255,241,69,.55), transparent 48%); }
.settlement-banner { width: min(94vw, 470px); padding: 24px 18px; border: 3px solid #171713; border-radius: 24px; text-align: center; background: #fff145; box-shadow: 9px 9px 0 #171713; animation: slam-in .35s cubic-bezier(.2,1.4,.4,1); }
.settlement-banner.loss { background: #ffddd9; }
.settlement-banner p { margin: 0; font-size: clamp(32px, 11vw, 58px); font-weight: 1000; line-height: 1; }
.bonus-label { display: table; margin: 10px auto 0; padding: 5px 16px; border: 3px solid #171713; border-radius: 7px; background: #fff; font-size: clamp(22px, 7vw, 34px); font-weight: 1000; transform: rotate(-2deg); }
.settlement-banner > strong { display: block; margin: 14px 0 10px; color: #079431; font-size: clamp(42px, 15vw, 72px); line-height: 1; text-shadow: 2px 2px 0 #fff; }
.settlement-banner.loss > strong { color: #d32318; }
.balance-change { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 10px; font-weight: 900; }
.balance-change span:first-child { color: #777; text-decoration: line-through; }
.settlement-banner small { font-weight: 800; }
.flying-coin { position: fixed; z-index: 30; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid #7c5d00; border-radius: 50%; background: #ffd52e; color: #5b4300; font-size: 10px; font-weight: 1000; pointer-events: none; animation: fly-to-wallet .9s cubic-bezier(.3,.1,.3,1) forwards; }
@keyframes slam-in { from { transform: scale(.55) rotate(-4deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes fly-to-wallet { to { left: var(--coin-x); top: var(--coin-y); transform: scale(.35) rotate(540deg); opacity: .2; } }
@keyframes boss-patrol { from { transform: translateX(0) translateY(0) rotate(-1deg); } to { transform: translateX(245px) translateY(2px) rotate(1deg); } }
dialog { width: min(calc(100% - 32px), 480px); border: 2px solid #171713; border-radius: 20px; padding: 18px; }
dialog::backdrop { background: rgba(0,0,0,.58); }
.success-share-dialog { width: min(calc(100% - 28px), 470px); padding: 0; border: 3px solid #171713; border-radius: 24px; background: #fff145; box-shadow: 9px 9px 0 #171713; }
.success-share-dialog::backdrop { background: rgba(0,0,0,.78); }
.success-share-card { padding: 28px 20px 20px; text-align: center; }
.success-share-card h2 { margin: 0; font-size: clamp(38px, 12vw, 58px); line-height: 1; }
.success-share-card > strong { display: block; margin: 16px 0 12px; color: #078b2e; font-size: clamp(42px, 14vw, 68px); line-height: 1; text-shadow: 2px 2px 0 #fff; }
.success-share-card p { margin: 0 0 18px; font-size: 14px; font-weight: 900; line-height: 1.45; }
.success-share-close { margin-top: 9px; padding: 7px 16px; border: 0; background: transparent; color: #4f5048; font-size: 12px; font-weight: 800; text-decoration: underline; }
.success-share-card small { display: block; min-height: 18px; margin-top: 5px; font-weight: 900; }
.circuit-panel { position: fixed; right: 12px; bottom: 12px; z-index: 18; width: min(350px, calc(100% - 24px)); padding: 11px; border: 2px solid #171713; border-radius: 15px; background: #f8f1df; box-shadow: 6px 6px 0 rgba(23,23,19,.7); pointer-events: none; }
.circuit-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.circuit-panel-head > div { display: flex; align-items: center; gap: 7px; }
.circuit-panel-head strong { font: 900 13px/1 monospace; }
.circuit-panel-head small { padding: 2px 5px; border: 1px solid #171713; border-radius: 5px; background: #fff145; font-size: 9px; font-weight: 900; }
.circuit-panel-head button { width: 29px; height: 29px; border: 1px solid #171713; border-radius: 50%; background: #fff; font-size: 19px; line-height: 1; pointer-events: auto; }
.circuit-board { overflow: hidden; border: 2px solid #171713; border-radius: 9px; background: #101612; }
.circuit-board svg { display: block; width: 100%; height: auto; }
.circuit-traces { stroke-dasharray: 8 6; animation: circuit-flow 1.1s linear infinite; }
.circuit-board.evaluating { box-shadow: 0 0 0 3px rgba(118,185,0,.38); }
.circuit-io { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.circuit-io p { min-width: 0; margin: 0; padding: 6px; border: 1px solid #171713; border-radius: 7px; background: #fff; }
.circuit-io b, .circuit-io span { display: block; }
.circuit-io b { color: #568800; font: 1000 10px/1 monospace; }
.circuit-io span { margin-top: 3px; font-size: 9px; line-height: 1.25; }
.circuit-decision { margin: 7px 0 4px; font-size: 11px; }
.circuit-note { display: block; color: #616258; font-size: 9px; line-height: 1.3; }
@keyframes circuit-flow { to { stroke-dashoffset: -28; } }
.dialog-head { display: flex; align-items: center; justify-content: space-between; }
.dialog-head h2 { margin: 0; }
.dialog-head button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #eee; font-size: 26px; }
.rule-copy { line-height: 1.55; }
.dialog-note { color: #66675e; font-size: 12px; line-height: 1.45; }
.invite-assurance { margin: 12px 0 7px; padding: 11px; border: 2px solid #171713; border-radius: 10px; background: #fff145; font-size: 15px; font-weight: 1000; line-height: 1.4; }
.invite-link { display: grid; gap: 8px; }
.invite-link code { overflow: hidden; padding: 9px; border: 1px solid #171713; border-radius: 9px; background: #f5f0df; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0; }
.metric-grid div { padding: 10px; border: 1px solid #171713; border-radius: 10px; background: #f8f1df; }
.metric-grid dt { color: #66675e; font-size: 11px; }
.metric-grid dd { margin: 3px 0 0; font-size: 18px; font-weight: 1000; }
.record-metrics div:nth-child(4), .record-metrics div:nth-child(5) { grid-column: span 1; }
.inline-status { min-height: 1.3em; font-size: 12px; font-weight: 900; }
.points-total { padding: 13px; border: 2px solid #171713; border-radius: 12px; background: #fff145; text-align: center; }
.points-total strong { font-size: 32px; }
.points-rules { padding-left: 20px; line-height: 1.55; }
@media (min-width: 430px) { .boss.walking { transform: translateX(350px); } @keyframes boss-patrol { from { transform: translateX(0) translateY(0) rotate(-1deg); } to { transform: translateX(335px) translateY(2px) rotate(1deg); } } }
@media (max-width: 380px) {
  .rooms { grid-auto-rows: 126px; gap: 6px; }
  .room { height: 126px; padding: 5px; }
  .room-avatars { grid-template-columns: repeat(2, 27px); }
  .avatar-slot, .room-avatars img { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .boss { transition: none; } .boss.patrolling { animation-duration: 7s; } }