* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; background:#0b1020; font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif; color:#fff;
  user-select:none; -webkit-user-select:none; touch-action:none; }
#game-wrap { position:fixed; inset:0; }
#game-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }

/* Asset loading */
.loading-screen { position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#8edbff,#ffd8a8); padding:24px; }
.loading-card { width:min(320px,82vw); text-align:center; color:#5a321d; }
.loading-title { font-size:28px; font-weight:900; letter-spacing:5px; text-shadow:0 2px 0 rgba(255,255,255,.45); }
.loading-track { height:14px; margin:16px 0 10px; overflow:hidden; border:3px solid #fff4db; border-radius:20px;
  background:rgba(87,47,25,.2); box-shadow:0 3px 0 rgba(87,47,25,.18); }
#loading-progress { width:0; height:100%; border-radius:20px; background:linear-gradient(90deg,#ff7d67,#ffd15c,#65d49a);
  transition:width .18s ease; }
.loading-card p { font-size:13px; font-weight:700; }

/* HUD */
#hud { position:absolute; inset:0; pointer-events:none; z-index:5; }
#hud-top { position:absolute; top:max(10px, env(safe-area-inset-top)); left:12px; right:12px;
  display:flex; align-items:flex-start; gap:10px; }
#score-box { background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.15); border-radius:14px;
  padding:6px 14px; min-width:130px; backdrop-filter:blur(6px); }
#score { font-size:30px; font-weight:800; letter-spacing:1px; line-height:1; text-shadow:0 2px 0 rgba(0,0,0,.5); }
#mult { display:inline-block; margin-top:4px; font-size:13px; font-weight:800; color:#111; background:#ffd23f;
  border-radius:20px; padding:1px 10px; }
#distance { display:inline-block; margin:5px 0 0 5px; color:#fff; font-size:12px; font-weight:700; white-space:nowrap; }
#distance-value { font-size:14px; color:#fff4b8; }
#coin-box,#key-box { background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.15); border-radius:20px;
  padding:8px 14px; font-weight:800; font-size:17px; backdrop-filter:blur(6px); }
.pillow-hud-icon { width:24px; height:20px; object-fit:contain; vertical-align:middle; }
#missions { position:absolute; top:max(76px, calc(env(safe-area-inset-top) + 66px)); left:12px; display:flex; flex-direction:column; gap:4px; max-width:46vw; }
.mission { font-size:11px; background:rgba(0,0,0,.4); border-radius:8px; padding:3px 8px; color:#cfe3ff; }
.mission.done { color:#7CFC98; text-decoration:line-through; }
#power-timers { position:absolute; top:max(76px, calc(env(safe-area-inset-top) + 66px)); right:12px; display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.ptimer { font-size:12px; font-weight:800; background:rgba(0,0,0,.55); border-radius:8px; padding:3px 9px; border:1px solid rgba(255,255,255,.2); }
#hud-buttons { position:absolute; right:12px; bottom:calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px; pointer-events:auto; }
.round-btn { width:58px; height:58px; border-radius:50%; border:2px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.5); color:#fff; font-size:24px; cursor:pointer; position:relative; backdrop-filter:blur(6px); }
.round-btn:active { transform:scale(.92); }
.round-btn.board { border-color:#ffd23f; }
#board-count { position:absolute; bottom:-6px; right:-4px; background:#ffd23f; color:#111; font-size:13px; font-weight:800;
  border-radius:12px; padding:0 7px; }
#stumble-flash { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 55%, rgba(255,0,0,.45)); opacity:0; transition:opacity .15s; }

/* Overlays */
.overlay { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(5,8,20,.55), rgba(5,8,20,.78)); padding:16px; overflow-y:auto; }
.card { width:min(480px, 94vw); max-height:94vh; overflow-y:auto; background:linear-gradient(180deg,#1b2450,#101633);
  border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:26px 24px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6); }
.logo-sub { font-size:12px; letter-spacing:5px; color:#7CFC98; font-weight:800; }
h1 { font-size:52px; font-weight:900; letter-spacing:2px; font-style:italic; margin:4px 0 2px;
  text-shadow:3px 3px 0 #e83e8c, 6px 6px 0 rgba(0,0,0,.4); }
h1 span { color:#ffd23f; }
h2 { font-size:34px; font-weight:900; font-style:italic; letter-spacing:1px; margin-bottom:4px; }
.tag { color:#cfe3ff; margin-bottom:14px; font-size:14px; }
.controls-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; text-align:left; }
.controls-grid div { background:rgba(255,255,255,.07); border-radius:10px; padding:8px 10px; font-size:12px; display:flex; gap:8px; align-items:center; }
.controls-grid.small { grid-template-columns:1fr 1fr; }
kbd { background:#fff; color:#111; border-radius:6px; padding:2px 7px; font-weight:800; font-size:12px; white-space:nowrap;
  box-shadow:0 2px 0 #999; }
.controls-grid span { color:#cfe3ff; }
.touch-hint { font-size:12px; color:#9fb3d9; margin-bottom:12px; }
.big-btn { display:block; width:100%; margin-top:10px; padding:15px; font-size:19px; font-weight:900; letter-spacing:1px;
  border:none; border-radius:14px; cursor:pointer; color:#10210f;
  background:linear-gradient(180deg,#8dff5e,#37c837); box-shadow:0 5px 0 #1d7a1d, 0 8px 20px rgba(0,0,0,.4); }
.big-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #1d7a1d; }
.big-btn.revive { background:linear-gradient(180deg,#ffd23f,#ff9d00); box-shadow:0 5px 0 #9a5b00, 0 8px 20px rgba(0,0,0,.4); color:#3a2400; }
.ghost-btn { margin-top:10px; background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff;
  border-radius:12px; padding:10px 18px; cursor:pointer; font-size:14px; }
.menu-row { display:flex; justify-content:space-between; margin-top:12px; font-size:14px; color:#cfe3ff; }
.mechanics { margin-top:14px; text-align:left; font-size:13px; color:#cfe3ff; background:rgba(255,255,255,.05);
  border-radius:12px; padding:10px 12px; }
.mechanics summary { cursor:pointer; font-weight:800; color:#fff; }
.mechanics ul { margin:8px 0 2px 16px; display:flex; flex-direction:column; gap:5px; }
.disclaimer { margin-top:12px; font-size:11px; color:#8a97b8; }

/* Shared town postcard treatment for the start and revival/result panels. */
.town-overlay { background:linear-gradient(180deg,rgba(59,116,126,.24),rgba(79,58,35,.46));
  padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
  touch-action:pan-y; }
.town-overlay .town-card { width:min(380px,90vw); max-height:calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding:19px 20px 15px; border:3px solid #fff9e9; border-radius:26px;
  background:linear-gradient(180deg,#fff8e7,#fff0d5); color:#67432d;
  box-shadow:0 8px 0 #bb8658,0 18px 44px rgba(70,48,32,.3),inset 0 0 0 1px #eacb9e;
  overscroll-behavior:contain; touch-action:pan-y; }
#menu .logo-sub { display:inline-block; padding:5px 14px; border-radius:20px; background:#d9eee2;
  color:#347367; font-size:11px; letter-spacing:2px; border:1px solid #bedaca; }
#menu h1 { font-size:42px; line-height:1.25; margin:9px 0 6px; letter-spacing:0;
  font-style:normal; color:#754a32; text-shadow:0 2px 0 #fff,0 4px 0 #e8cfac; white-space:nowrap; }
#menu h1 span { color:#e86d4c; }
#menu .tag { margin:0; color:#82634e; font-size:12px; line-height:1.6; }
.menu-scene { position:relative; height:112px; margin:10px 0; overflow:hidden;
  border-radius:20px; border:1px solid #c5dccb;
  background:radial-gradient(ellipse at 22% 28%,#fff9e6 0 5%,transparent 5.5%),
    radial-gradient(ellipse at 80% 20%,#fff9e6 0 8%,transparent 8.5%),
    linear-gradient(180deg,#d6eee8 0 65%,#c4dbc0 65%); }
.menu-scene::before { content:""; position:absolute; width:158px; height:100%; bottom:-45px; left:50%;
  transform:translateX(-50%) perspective(100px) rotateX(30deg);
  background:linear-gradient(90deg,#79bbcb 0 32%,#fff2d6 32% 34%,#e99e82 34% 66%,#fff2d6 66% 68%,#88be94 68%);
  border-left:5px solid #ead8b7; border-right:5px solid #ead8b7; }
.menu-runner { position:absolute; width:124px; height:124px; left:50%; bottom:-4px; transform:translateX(-50%);
  background:url('assets/ui/menu-duo-front.webp') center / contain no-repeat; }
.menu-pillow { position:absolute; right:12px; top:28px; display:flex; align-items:center; flex-direction:column;
  transform:rotate(7deg); }
.menu-pillow img { width:43px; height:43px; object-fit:contain; filter:drop-shadow(0 3px 0 rgba(100,68,40,.13)); }
.menu-pillow span { font-size:10px; font-weight:800; padding:3px 7px; border-radius:8px;
  background:#fff8e6; border:1px solid #dfc7a3; color:#8c5a36; }
.gesture-guide { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.gesture-guide div { display:flex; flex-direction:column; align-items:center; padding:7px 2px 6px;
  background:#fffaf0; border:1px solid #ead5b7; border-radius:13px; }
.gesture-guide span { display:grid; place-items:center; width:28px; height:28px; margin-bottom:5px;
  border-radius:9px; background:#e2eee3; color:#3e8070; font-size:21px; font-weight:900; line-height:1; }
.gesture-guide div:last-child span { font-size:15px; background:#ffecd2; color:#b87630; }
.gesture-guide b { font-size:11px; white-space:nowrap; }
.gesture-guide small { font-size:10px; color:#92745b; margin-top:3px; white-space:nowrap; }
.town-card .big-btn { margin-top:12px; padding:12px 10px; border:2px solid #fff0c4; border-radius:15px;
  color:#fffaf0; background:linear-gradient(180deg,#f69660,#ed7049); text-shadow:0 1px 0 #ba5837;
  box-shadow:0 5px 0 #b95537,0 9px 15px rgba(185,98,54,.2),inset 0 2px 0 #ffcba0; }
.town-card .big-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #b95537; }
#menu .menu-row { margin-top:13px; gap:8px; color:#775337; }
#menu .menu-row div { flex:1; padding:7px 8px; background:#f6e5c8; border-radius:12px;
  display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; }
#menu .menu-row span { font-size:11px; white-space:nowrap; }
#menu .menu-row b { font-size:17px; overflow-wrap:anywhere; }
#menu .mechanics { margin-top:9px; background:transparent; color:#82634e; border-top:1px dashed #d9bc94;
  border-radius:0; padding:8px 2px 0; line-height:1.6; }
#menu .mechanics summary { color:#775337; text-align:center; font-size:12px; min-height:44px;
  padding:10px 0; }
#menu .mechanics[open] summary { text-align:left; }
#menu .controls-grid div { background:#f4e6cf; flex-wrap:wrap; gap:5px; }
#menu .controls-grid span { color:#775337; }
#menu kbd { color:#775337; background:#fffaf0; box-shadow:0 2px 0 #d8bb92; }
.town-card button:focus-visible,.town-card summary:focus-visible { outline:3px solid #398675; outline-offset:4px; }
@media (max-width:380px) {
  .town-overlay .town-card { padding:17px 14px 13px; }
  #menu h1 { font-size:36px; }
  .menu-pillow { right:8px; }
}
@media (max-height:650px) {
  .town-overlay { align-items:flex-start; }
  .town-overlay .town-card { margin:auto 0; }
  .menu-scene { height:100px; }
  .menu-runner { width:108px; height:108px; }
}
.go-stats { display:flex; gap:10px; margin:14px 0; }
.go-stats div { flex:1; background:rgba(255,255,255,.07); border-radius:12px; padding:10px 4px; }
.go-stats label { display:block; font-size:11px; letter-spacing:2px; color:#9fb3d9; }
.go-stats b { font-size:24px; }
#go-newbest { font-weight:900; color:#ffd23f; margin-bottom:6px; animation:pulse 1s infinite; }
@keyframes pulse { 50% { transform:scale(1.08); } }
#go-sub { color:#cfe3ff; }

/* Results: revive is the main action; retry and menu remain easy to find. */
.result-badge { display:inline-block; padding:5px 14px; border-radius:20px; background:#d9eee2;
  color:#347367; font-size:11px; font-weight:800; letter-spacing:1px; border:1px solid #bedaca; }
.town-overlay .result-card { width:min(344px,88vw); }
.result-mascot { display:grid; place-items:center; width:62px; height:62px; margin:11px auto 8px;
  background:#ffedc7; border:2px solid #fffaf0; border-radius:24px; transform:rotate(-7deg);
  box-shadow:0 4px 0 #e9cd97; }
.result-mascot img { width:48px; height:48px; object-fit:contain; transform:rotate(7deg); }
#gameover h2 { color:#d76b48; font-size:30px; font-style:normal; margin-bottom:8px;
  text-shadow:0 2px 0 #fff; }
#gameover #go-sub { color:#82634e; font-size:13px; line-height:1.7; }
#gameover .go-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:12px 0 10px; }
#gameover .go-stats div { min-width:0; background:#f6e5c8; border:1px solid #ead1ad;
  border-radius:12px; padding:9px 4px; }
#gameover .go-stats label { color:#8b6a4e; font-size:11px; letter-spacing:0; margin-bottom:5px; }
#gameover .go-stats b { display:block; color:#775337; font-size:clamp(17px,5vw,24px); overflow-wrap:anywhere; }
#gameover #go-newbest { color:#b56a23; font-size:13px; background:#ffe8b6; border-radius:10px; padding:7px; }
#gameover #btn-revive { color:#fffdf0; background:linear-gradient(180deg,#79bba0,#4b947e);
  border-color:#e9f6d9; box-shadow:0 5px 0 #326b59,0 9px 15px rgba(60,107,85,.16),inset 0 2px 0 #b2d9b8;
  text-shadow:0 1px 0 #397461; font-size:18px; line-height:1.5; padding:10px; letter-spacing:0; }
#gameover #btn-revive span { display:block; }
#gameover #btn-revive small { display:block; color:#f3f7e6; font-size:12px; font-weight:600; }
#gameover #btn-revive:active { box-shadow:0 2px 0 #326b59; }
#gameover #btn-restart { font-size:17px; }
#gameover .ghost-btn { display:block; width:100%; min-height:40px; margin-top:12px;
  border-color:#d8ba91; color:#82634e; background:rgba(255,250,237,.65); font-weight:700; }
@media (max-height:650px) {
  .result-mascot { width:54px; height:54px; margin:10px auto; border-radius:18px; }
  .result-mascot img { width:42px; height:42px; }
}

/* Pause: the same warm small-town postcard style as menu and results. */
.town-overlay .pause-card { width:min(344px,88vw); }
.pause-badge { display:inline-block; padding:5px 14px; border-radius:20px; background:#d9eee2;
  color:#347367; font-size:11px; font-weight:800; letter-spacing:1px; border:1px solid #bedaca; }
.pause-icon { width:58px; height:58px; margin:11px auto 8px; display:flex; align-items:center; justify-content:center; gap:8px;
  border:2px solid #fffaf0; border-radius:24px; background:#ffedc7; box-shadow:0 4px 0 #e9cd97; transform:rotate(-4deg); }
.pause-icon span { width:9px; height:27px; border-radius:7px; background:#df7552; box-shadow:0 2px 0 #b65d42; }
#pause h2 { color:#d76b48; font-size:30px; font-style:normal; margin-bottom:7px; text-shadow:0 2px 0 #fff; }
#pause .pause-sub { color:#82634e; font-size:13px; line-height:1.7; }
#pause #btn-resume { color:#fffdf0; background:linear-gradient(180deg,#79bba0,#4b947e);
  border-color:#e9f6d9; box-shadow:0 5px 0 #326b59,0 9px 15px rgba(60,107,85,.16),inset 0 2px 0 #b2d9b8;
  text-shadow:0 1px 0 #397461; }
#pause #btn-resume:active { box-shadow:0 2px 0 #326b59; }
#pause .ghost-btn { display:block; width:100%; min-height:40px; margin-top:12px;
  border-color:#d8ba91; color:#82634e; background:rgba(255,250,237,.65); font-weight:700; }
.pause-controls-title { margin-top:12px; padding-top:10px; border-top:1px dashed #d9bc94;
  color:#99765a; font-size:11px; font-weight:800; letter-spacing:2px; }
#pause .controls-grid { margin:9px 0 0; }
#pause .controls-grid div { min-width:0; background:#f6e5c8; border:1px solid #ead1ad; color:#775337; }
#pause .controls-grid span { min-width:0; color:#775337; }
#pause kbd { color:#775337; background:#fffaf0; box-shadow:0 2px 0 #d8bb92; }
@media (max-height:650px) {
  .pause-icon { width:52px; height:52px; margin:9px auto 7px; border-radius:18px; }
  .pause-icon span { width:8px; height:25px; }
  #pause h2 { font-size:26px; }
  .pause-controls-title { margin-top:13px; padding-top:10px; }
}
#countdown { position:absolute; inset:0; z-index:9; display:flex; align-items:center; justify-content:center;
  font-size:110px; font-weight:900; font-style:italic; text-shadow:4px 4px 0 rgba(0,0,0,.5); pointer-events:none; }
#toast { position:absolute; left:50%; top:22%; transform:translateX(-50%); z-index:11; background:rgba(0,0,0,.7);
  border:1px solid #ffd23f; color:#ffd23f; font-weight:900; padding:10px 18px; border-radius:14px; font-size:16px;
  animation:toastIn .3s ease-out; white-space:nowrap; }
@keyframes toastIn { from { transform:translateX(-50%) scale(.7); opacity:0; } }

@media (max-width:480px) {
  h1 { font-size:42px; }
  #score { font-size:24px; }
  .card { padding:20px 16px; }
}