/* Shared shell styles for Princess Hop. The big-buttons control widget
 * lives in index.html alongside its own HOLD-to-run wiring. */
:root{ --teal:#3aa6a0; --teal-dark:#2c7e7a; --gold:#ffcf5c; --gold-dark:#d99b22; --pink:#ff8bb6; --ink:#22324a; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; background:#0d2230;
  font-family:"Fredoka","Baloo 2","Comic Sans MS","Segoe UI",system-ui,sans-serif; color:var(--ink);
  user-select:none; -webkit-user-select:none; touch-action:manipulation; }
#stage{ position:fixed; inset:0; overflow:hidden; background:#bfe7e2; }
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

#hud{ position:absolute; left:0; right:0; top:0; z-index:40; display:flex; justify-content:center; align-items:center;
  gap:10px; padding:52px 10px 6px; pointer-events:none; flex-wrap:wrap; }
.pill{ background:rgba(255,255,255,.88); border:3px solid var(--teal-dark); border-radius:999px; padding:3px 12px;
  font-weight:800; font-size:17px; color:var(--ink); box-shadow:0 3px 0 var(--teal-dark); display:flex; align-items:center; gap:5px; }

.screen{ position:absolute; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:24px; text-align:center; transition:opacity .4s ease; }
.screen.hide{ opacity:0; pointer-events:none; } .screen[hidden]{ display:none; }
#intro{ background:transparent; }
#title-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
#intro::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,40,55,.15), rgba(10,40,55,.05) 40%, rgba(10,40,55,.45)); z-index:1; }
#title-text{ position:relative; z-index:2; margin-top:-6vh; }
#title-text .t1{ display:block; font-size:clamp(40px,12vw,86px); font-weight:800; color:#fff; letter-spacing:2px; line-height:.92;
  text-shadow:-3px 0 0 #2c7e7a,3px 0 0 #2c7e7a,0 -3px 0 #2c7e7a,0 3px 0 #2c7e7a,0 8px 18px rgba(0,0,0,.4); }
#title-text .t2{ display:block; font-size:clamp(16px,4.4vw,26px); font-weight:700; color:#fff7d6; margin-top:6px; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.title-actions{ position:relative; z-index:2; }
.wood-btn{ font-family:inherit; font-weight:800; cursor:pointer; font-size:clamp(20px,5vw,28px); color:#5b3a17; padding:14px 34px; border:none; border-radius:18px;
  background:linear-gradient(#ffe39a,var(--gold)); box-shadow:0 6px 0 var(--gold-dark),0 10px 18px rgba(0,0,0,.3); transition:transform .08s ease, box-shadow .08s ease; }
.wood-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--gold-dark); } .wood-btn:disabled{ filter:grayscale(.5) brightness(.95); cursor:default; }
#select{ background:linear-gradient(160deg,#bfe9e4,#8fd3cc); }
#select h2{ font-size:clamp(24px,6vw,34px); color:var(--teal-dark); margin:0; text-shadow:0 2px 0 #fff; }
.cards{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.pcard{ width:clamp(96px,26vw,140px); background:#fff; border:4px solid #fff; border-radius:20px; padding:10px 8px 12px; cursor:pointer; box-shadow:0 6px 0 rgba(0,0,0,.12); transition:transform .1s ease, border-color .1s ease; }
.pcard img{ width:100%; height:120px; object-fit:contain; } .pcard .nm{ font-weight:800; margin-top:4px; font-size:16px; color:var(--ink); }
.pcard.sel{ border-color:var(--pink); transform:translateY(-6px) scale(1.04); box-shadow:0 10px 0 rgba(255,139,182,.4); }
#over{ background:rgba(12,40,55,.62); color:#fff; }
#over h2{ font-size:clamp(28px,8vw,46px); margin:0; text-shadow:0 3px 0 rgba(0,0,0,.3); }
#over .big{ font-size:clamp(44px,14vw,72px); font-weight:800; color:var(--gold); text-shadow:0 3px 0 var(--gold-dark); }
#over .sub{ font-size:18px; opacity:.95; }
#toast{ position:absolute; left:50%; top:34%; transform:translate(-50%,-50%); z-index:60; pointer-events:none; font-size:clamp(34px,10vw,64px);
  font-weight:800; color:#fff; opacity:0; text-shadow:0 3px 0 var(--teal-dark),0 0 24px rgba(255,220,120,.8); }
#toast.show{ animation:pop 1.1s ease-out forwards; }
@keyframes pop{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.4);} 20%{opacity:1;transform:translate(-50%,-50%) scale(1.1);} 80%{opacity:1;} 100%{opacity:0;transform:translate(-50%,-65%) scale(1);} }
.hint{ position:absolute; left:50%; top:96px; transform:translateX(-50%); z-index:45; background:rgba(255,255,255,.92); color:var(--teal-dark);
  font-weight:800; border-radius:999px; padding:7px 16px; font-size:14px; box-shadow:0 3px 0 var(--teal-dark); text-align:center; max-width:90%; }
.hint[hidden]{ display:none; }
.game-version{ position:fixed; bottom:2px; right:4px; font-size:10px; opacity:.5; color:#fff; pointer-events:none; z-index:99999; text-shadow:0 1px 1px rgba(0,0,0,.5); }

/* Controls panel - mockup-specific UI sits inside #controls */
#controls{ position:absolute; left:0; right:0; bottom:0; z-index:40; padding:14px 12px calc(14px + env(safe-area-inset-bottom));
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; pointer-events:none; }
#controls > *{ pointer-events:auto; }
.jump-btn{ font-family:inherit; font-weight:800; font-size:24px; color:#5b3a17; padding:0; border:none; cursor:pointer;
  width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff6cf 0%, #ffd86a 45%, #d99b22 100%);
  box-shadow:0 8px 0 #a07212, 0 12px 22px rgba(0,0,0,0.35), inset 0 -6px 0 rgba(0,0,0,0.1);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.jump-btn:active{ transform:translateY(6px); box-shadow:0 2px 0 #a07212, 0 6px 14px rgba(0,0,0,0.3); }
.jump-btn .lbl{ font-size:22px; letter-spacing:1px; }
.jump-btn .ico{ font-size:34px; margin-bottom:2px; }