:root {
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --wood: #5b3a22; --wood2: #3f2716; --cream: #fff3d6; --gold: #f3c74a;
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: none; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; position: fixed; inset: 0;
  background: #2b190e; color: var(--cream); font-family: var(--font); overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; }
button { font-family: inherit; color: inherit; border: 0; cursor: pointer; }
.hidden { display: none !important; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #2b190e; }

#hud { position: fixed; top: calc(var(--sat) + 6px); left: calc(var(--sal) + 8px); right: calc(var(--sar) + 8px);
  display: flex; gap: 6px; align-items: center; pointer-events: none; z-index: 5; }
#hud .spacer { flex: 1; }
.pill { pointer-events: auto; background: rgba(63,39,22,0.88); border: 2px solid #7a5232; border-radius: 14px;
  padding: 3px 10px; font-size: 14px; display: flex; align-items: center; gap: 5px; box-shadow: 0 2px 0 rgba(0,0,0,0.35); white-space: nowrap; }
.pill b { font-size: 15px; } .green { color: #9be86a; }
.ico { width: 16px; height: 16px; display: inline-block; background-size: contain; background-repeat: no-repeat; }
.round { pointer-events: auto; width: 34px; height: 30px; border-radius: 12px; background: rgba(63,39,22,0.9); border: 2px solid #7a5232; font-size: 15px; line-height: 1; }
#hud .round { padding: 0; }

#ratePill { position: fixed; z-index: 5; bottom: calc(var(--sab) + 70px); left: 50%; transform: translateX(-50%);
  background: rgba(63,39,22,0.92); border: 2px solid #7a5232; border-radius: 14px; display: flex; align-items: center; gap: 6px; padding: 2px 6px; font-size: 13px; }
#ratePill button { width: 30px; height: 24px; border-radius: 9px; background: #8a5a34; font-size: 18px; line-height: 1; font-weight: 700; }
#ratePill b { min-width: 18px; text-align: center; font-size: 15px; }

#bar { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; padding: 4px calc(var(--sar) + 6px) calc(var(--sab) + 4px) calc(var(--sal) + 6px);
  background: linear-gradient(#6b4527, #4a2e19); border-top: 2px solid #8a5d37; display: flex; gap: 5px; align-items: stretch; height: calc(64px + var(--sab)); }
#bar .ctl { display: flex; flex-direction: column; gap: 4px; }
#bar .ctl button { flex: 1; width: 40px; border-radius: 10px; background: #8a5a34; font-size: 12px; letter-spacing: -1px; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); }
#bar .ctl button.on { background: #f3c74a; color: #3b2010; }
#skills { flex: 1; display: flex; gap: 4px; min-width: 0; }
.skill { flex: 1; min-width: 0; position: relative; border-radius: 11px; padding: 2px 1px 2px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.28); border: 2px solid rgba(0,0,0,0.25); transition: transform 0.08s; }
.skill canvas { width: 30px; height: 30px; flex: none; }
.skill .lbl { font-size: 10.5px; font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,0.45); white-space: nowrap; overflow: hidden; max-width: 100%; }
.skill .badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; border-radius: 10px; background: #fff3d6; color: #3b2010;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #3b2010; }
.skill.sel { border-color: #fff8b0; box-shadow: 0 0 0 2px #59c3ff, 0 0 12px #59c3ff; transform: translateY(-2px); }
.skill.empty { filter: grayscale(0.85) brightness(0.65); }
#btnPopAll { width: 58px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8a5a34, #5a3820); border: 3px solid #a87545;
  font-size: 11px; font-weight: 800; line-height: 1.05; flex: none; align-self: center; height: 56px; }
#btnPopAll .pa2 { display: none; } #btnPopAll.armed { background: #ff5d8f; border-color: #fff; animation: throb 0.4s infinite alternate; }
#btnPopAll.armed .pa1 { display: none; } #btnPopAll.armed .pa2 { display: inline; }
#btnPopAll.used { opacity: 0.4; }
@keyframes throb { to { transform: scale(1.08); } }

#magnifier { position: fixed; z-index: 6; width: 104px; height: 104px; border-radius: 50%; border: 4px solid #f3e2b6;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(0,0,0,0.3); pointer-events: none; background: #2b190e; }
#toast { position: fixed; z-index: 7; top: calc(var(--sat) + 46px); left: 50%; transform: translateX(-50%); background: rgba(40,24,12,0.92); padding: 6px 14px;
  border-radius: 12px; font-size: 14px; opacity: 0; transition: opacity 0.25s; pointer-events: none; white-space: nowrap; border: 1px solid #7a5232; }
#toast.show { opacity: 1; }
#pausedTag { position: fixed; z-index: 6; top: 42%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; font-weight: 800; color: #fff3d6;
  text-shadow: 0 3px 0 #3b2010, 0 0 12px #000; pointer-events: none; }

.screen { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(70,44,24,0.82), rgba(25,14,6,0.94)); padding: calc(var(--sat) + 8px) calc(var(--sar) + 8px) calc(var(--sab) + 8px) calc(var(--sal) + 8px); }
.panel { background: linear-gradient(#fff3d6, #f4dcaa); color: #4a2a14; border-radius: 22px; border: 4px solid #8a5a34; padding: 12px 22px; text-align: center;
  max-width: 560px; width: 100%; max-height: 100%; box-shadow: 0 8px 0 rgba(0,0,0,0.35); }
.panel.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.panel.scroll * { touch-action: pan-y; }
.title { margin: 2px 0 0; font-size: 44px; letter-spacing: 2px; color: #7a4320; text-shadow: 0 3px 0 #f3c74a, 0 5px 0 #4a2a14; }
#startFace { width: 74px; height: 74px; border-radius: 18px; margin: 4px auto 0; display: block; }
h2 { margin: 2px 0 6px; font-size: 30px; color: #7a4320; } h3 { margin: 8px 0 2px; font-size: 16px; }
.sub { margin: 6px 0; font-size: 15px; } .small { font-size: 12.5px; margin: 6px 0; opacity: 0.85; }
.lvl { display: flex; gap: 10px; justify-content: center; align-items: center; font-size: 15px; }
.stars { color: #f3b51c; font-size: 20px; letter-spacing: 2px; text-shadow: 0 1px 0 #7a4320; }
.stars .off { color: rgba(122,67,32,0.25); text-shadow: none; }
.stars.bigstars { font-size: 46px; }
.row { display: flex; gap: 10px; justify-content: center; margin-top: 8px; } .row.wrap { flex-wrap: wrap; gap: 6px; }
.big { background: #6cbf3c; color: #fff; font-size: 20px; font-weight: 800; padding: 9px 30px; border-radius: 16px; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.25); text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.big.alt { background: #a87545; }
.mid { background: #a87545; color: #fff; font-size: 14px; font-weight: 700; padding: 7px 12px; border-radius: 12px; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25); }
label.file { position: relative; overflow: hidden; display: inline-block; }
label.file input { position: absolute; inset: 0; opacity: 0; }
textarea { width: 100%; height: 64px; border-radius: 10px; border: 2px solid #c79a62; background: #fffaf0; font: 11px ui-monospace, Menlo, monospace; color: #3b2010;
  -webkit-user-select: text; user-select: text; touch-action: manipulation; padding: 6px; resize: none; }

#rotate { position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: #2b190e; color: #fff3d6; text-align: center; padding: 30px; font-size: 18px; }
#rotate .phone { width: 46px; height: 80px; border: 4px solid #f3c74a; border-radius: 10px; animation: turn 1.8s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { #rotate { display: flex; } }
.ico.sprout { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15V8' stroke='%2378c850' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 9C8 5 5 3 2 3c0 3 2 6 6 6zM8 8c0-3 2-5 6-5 0 3-2 5-6 5z' fill='%2378c850'/%3E%3C/svg%3E"); }
.ico.house { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8L8 2l6 6v6H2z' fill='%23f3c74a'/%3E%3Crect x='6.5' y='9' width='3' height='5' fill='%237a4320'/%3E%3C/svg%3E"); }
.ico.clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='%23fff3d6' stroke='%237a4320' stroke-width='1.5'/%3E%3Cpath d='M8 4v4l3 2' stroke='%237a4320' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }