:root { --bg:#16131c; --gold:#f2b84b; --sand:#fff6e4; --ink:#33261d; --lapis:#2f5ea8; --coral:#e0644a;
  --font: "SF Pro Rounded", ui-rounded, "Nunito", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); overflow:hidden; touch-action:none;
  font-family: var(--font); color:var(--ink); -webkit-user-select:none; user-select:none; }
#gl, #screen { position:fixed; inset:0; width:100vw; height:100vh; display:block; }
#gl { background:#bfe3f2; }
.hidden { display:none !important; }
.overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; }
#loading { background:linear-gradient(160deg,#2a2140,#16131c); color:var(--sand); font-size:18px; z-index:20; text-align:center; }
#loading #load-tip { display:block; opacity:.7; font-size:14px; margin-top:10px; max-width:520px; }
#title { background: radial-gradient(ellipse at 50% 35%, rgba(255,220,170,.05), rgba(20,12,30,.45)); z-index:10; }
.title-card { background: rgba(255,251,243,.86); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7); box-shadow: 0 24px 70px rgba(20,10,30,.45), inset 0 1px 0 rgba(255,255,255,.9);
  border-radius:28px; padding:26px 30px; width:min(540px, 100%); max-height:100%; overflow:auto; text-align:center; }
h1 { margin:0; font-size:46px; font-weight:800; letter-spacing:-.5px; color:#2f5ea8; }
h1 span { color:#e0644a; }
.sub { margin:2px 0 20px; opacity:.65; font-weight:600; }
button { font:inherit; font-weight:700; cursor:pointer; border:0; border-radius:16px; background:rgba(255,255,255,.9); color:var(--ink);
  padding:11px 18px; margin:5px; box-shadow: 0 2px 8px rgba(60,40,20,.12), inset 0 0 0 1px rgba(60,40,20,.08); transition: transform .12s, box-shadow .12s, background .12s; }
button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(60,40,20,.18), inset 0 0 0 1px rgba(60,40,20,.08); }
button:active { transform: translateY(1px); }
button.big { font-size:18px; background:linear-gradient(180deg,#ffcf6e,#f2a93b); color:#3a2410; box-shadow: 0 6px 18px rgba(242,169,59,.45); }
#title-main button { display:block; width:82%; margin:9px auto; }
.credits { font-size:10px; opacity:.55; margin:12px 0 0; line-height:1.35; }
.hint { font-size:12px; opacity:.6; margin-top:14px; font-weight:600; }
form label { display:block; text-align:left; margin:9px 0; font-weight:700; font-size:13px; color:#6a5848; }
form input, form select { font:inherit; font-weight:600; width:100%; padding:9px 12px; border:0; border-radius:12px; background:#fff; margin-top:4px; box-shadow: inset 0 0 0 1px rgba(60,40,20,.12); color:var(--ink); }
form input:focus, form select:focus { outline:none; box-shadow: inset 0 0 0 2px #f2b84b; }
form input[type=color] { height:38px; padding:3px; }
.look { display:flex; gap:14px; align-items:center; background:rgba(255,255,255,.55); border-radius:18px; padding:10px; }
#look-preview { width:130px; height:130px; background:radial-gradient(circle at 50% 40%, #fffaf0, #d7ecc2); border-radius:16px; flex:none; box-shadow: inset 0 0 0 1px rgba(60,40,20,.08); }
.look-opts { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; flex:1; }
.look-opts label { margin:4px 0; font-size:11px; }
.row { display:flex; justify-content:space-between; margin-top:12px; }
.slot { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.7); border:0; border-radius:14px; padding:8px 10px; margin:8px 0; text-align:left; }
.slot small { opacity:.75; }
body:not(.touch) #touch, body:not(.ingame) #touch { display:none !important; }
#rotate-hint { display:none; position:fixed; left:0; right:0; top:calc(52vw + 14vh); text-align:center; color:#f3dfb4; font-size:13px; opacity:.75; pointer-events:none; }
body.portrait.ingame #rotate-hint { display:block; }
#touch { position:fixed; inset:0; pointer-events:none; z-index:5; }
#stick { position:absolute; left:calc(18px + env(safe-area-inset-left)); bottom:calc(18px + env(safe-area-inset-bottom)); width:130px; height:130px; border-radius:50%;
  background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.3); pointer-events:auto; }
#stick-knob { position:absolute; left:40px; top:40px; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.75); box-shadow:0 4px 12px rgba(0,0,0,.2); }
#tbtns { position:absolute; right:calc(14px + env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom)); width:190px; display:flex; flex-wrap:wrap; justify-content:flex-end; pointer-events:auto; }
.tb { width:58px; height:58px; border-radius:50%; font-size:24px; padding:0; opacity:.92; margin:4px; background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.tb.a { width:74px; height:74px; background:linear-gradient(180deg,#ffcf6e,#f2a93b); } .tb.b { width:66px; height:66px; background:linear-gradient(180deg,#b6e6b0,#7cc48a); }
.tb.s { width:44px; height:44px; font-size:18px; }
.loader { animation: pulse 1.6s infinite; } @keyframes pulse { 50% { opacity:.6; } }
@media (max-width:600px) { h1 { font-size:32px; } .look { flex-direction:column; } }
@media (max-height:450px) {
  .title-card { padding:14px 20px; width:min(640px, 100%); }
  h1 { font-size:30px; } .sub { margin:0 0 8px; }
  #title-main { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; }
  #title-main button { width:100%; margin:0; padding:9px 12px; font-size:14px; }
  #title-main button.big { font-size:16px; }
  #title-main .credits, #title-main .hint { grid-column:1 / -1; margin-top:4px; }
  #title-main .hint { display:none; }
  #stick { width:110px; height:110px; } #stick-knob { left:31px; top:31px; width:44px; height:44px; }
  #tbtns { width:150px; opacity:.85; } .tb.a { width:58px; height:58px; } .tb.b { width:52px; height:52px; } .tb.s { width:36px; height:36px; font-size:15px; }
}