/* ===== Mashup Party — responsive party-game UI ===== */
:root{
  --bg1:#7c4dff; --bg2:#ff5fa2; --bg3:#ffd166;
  --ink:#3a2440; --paper:#fffaf3; --soft:#f3e9ff; --line:#e7d8ff;
  --accent:#ff5fa2; --ok:#3ecf8e; --warn:#ffd166;
  --radius:18px; --radius-sm:12px;
  --shadow:0 10px 25px rgba(70,30,90,.18);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; min-height:100%;}
body{
  font-family:"Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg1),var(--bg2) 55%,var(--bg3));
  background-attachment:fixed;
  overscroll-behavior:none;
}
#app{max-width:1100px; margin:0 auto; padding:14px; min-height:100vh;}

/* ---------- screens ---------- */
.screen{display:flex; flex-direction:column; gap:14px; animation:pop .25s ease;}
.screen.hidden{display:none !important;}
@keyframes pop{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ---------- menu ---------- */
.menu-inner{ text-align:center; padding:8vh 10px 20px; color:#fff;}
.logo{ font-size:clamp(2.6rem, 9vw, 4.6rem); margin:.1em 0; letter-spacing:.5px;
  text-shadow:0 4px 0 rgba(0,0,0,.15); animation:bounce 1.6s ease infinite; }
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.eyebrow{ display:inline-block; background:rgba(255,255,255,.22); padding:6px 14px; border-radius:999px; font-weight:700; letter-spacing:1px; font-size:.85rem;}
.tagline{ max-width:520px; margin:10px auto 26px; font-size:1.05rem; color:#fff; }
.menu-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.hint{color:#fff; opacity:.85; font-size:.85rem; text-align:center;}
.hint-sm{text-align:left; margin:8px 0 0;}

/* ---------- buttons ---------- */
.btn{border:none; cursor:pointer; border-radius:var(--radius-sm); font-weight:700; font-size:1rem;
  padding:11px 18px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease; font-family:inherit;}
.btn:active{transform:scale(.96);}
.btn-big{ font-size:1.15rem; padding:14px 26px; background:linear-gradient(135deg,#ff5fa2,#ff9a56); color:#fff; border-radius:999px;}
.btn-soft{ background:rgba(255,255,255,.9); color:var(--ink);}
.btn-mini{padding:8px 12px; font-size:.9rem; box-shadow:none; border:2px solid var(--line); background:var(--paper); border-radius:999px;}
.btn-back{ width:44px; height:44px; border-radius:50%; font-size:1.5rem; padding:0; box-shadow:none;}

/* ---------- headers ---------- */
.screen-head{ display:flex; align-items:center; gap:12px; background:var(--paper); border-radius:var(--radius); padding:10px 16px; box-shadow:var(--shadow);}
.screen-head h2{margin:0; font-size:1.3rem;}
.sub{color:#fff; text-align:center; margin:0; background:rgba(255,255,255,.18); padding:8px 14px; border-radius:var(--radius-sm); font-size:.95rem;}
.dim{font-weight:400; color:#8a7a9c; font-size:.85rem;}

/* ---------- lobby ---------- */
.lobby-controls{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; background:var(--paper); padding:14px; border-radius:var(--radius); box-shadow:var(--shadow);}
.ctrl-row{ display:flex; align-items:center; gap:10px; font-weight:700;}
.stepper{display:flex; align-items:center; gap:6px;}
.stepper button{ width:38px; height:38px; border-radius:50%; border:2px solid var(--line); background:#fff; font-size:1.2rem; cursor:pointer;}
.stepper strong{ min-width:34px; text-align:center; font-size:1.3rem;}

.slots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.slot{ background:var(--paper); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; border:3px solid transparent;}
.slot.active{border-color:var(--accent);}
.slot canvas{ width:92px; height:96px; background:linear-gradient(180deg,#eaf7ff,#fff); border-radius:14px;}
.slot .p-num{ font-weight:800; font-size:.8rem; letter-spacing:1px; color:#fff; background:var(--bg1); padding:3px 10px; border-radius:999px;}
.slot .p-name{ font-weight:700; font-size:.9rem; text-align:center; line-height:1.2;}
.slot .p-species{ font-size:.75rem; color:#8a7a9c;}
.slot .btn{width:100%;}
.lobby-footer{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; padding:4px 0 16px;}

/* ---------- chip & card grids ---------- */
.chip-grid{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.chip{border:none; cursor:pointer; padding:9px 14px; border-radius:999px; font-weight:700; font-size:.95rem;
  background:#fff; box-shadow:var(--shadow); font-family:inherit;}
.chip.on{ background:var(--ink); color:#fff;}
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px;}
.card-grid.small{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); }
.mg-card,.ver-card{ background:#fff; border-radius:14px; padding:10px; text-align:center; box-shadow:var(--shadow); cursor:pointer; border:3px solid transparent;}
.mg-card.on,.ver-card.on{ border-color:var(--accent); background:#fff0f6;}
.mg-card .big{font-size:1.8rem; display:block;}
.mg-card strong{display:block; margin-top:2px;}
.mg-card span{font-size:.72rem; color:#8a7a9c; display:block; margin-top:2px; line-height:1.25;}
.ver-card canvas{ width:100%; height:88px; border-radius:10px; background:linear-gradient(180deg,#eaf7ff,#fff);}
.ver-card strong{font-size:.82rem;}
.ver-card .sw{display:flex; justify-content:center; gap:3px; margin-top:4px;}
.ver-card .sw i{width:14px; height:14px; border-radius:50%; border:1px solid #ddd;}

/* ---------- creator ---------- */
.creator-layout{ display:grid; grid-template-columns:280px 1fr; gap:14px; align-items:start; }
.creator-left{ position:sticky; top:10px; display:flex; flex-direction:column; gap:10px; background:var(--paper); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow);}
.preview-wrap{ position:relative; }
.preview-wrap canvas{ width:100%; aspect-ratio:260/300; border-radius:16px; background:linear-gradient(180deg,#dff3ff,#fff7e8); display:block;}
.char-name{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.45); color:#fff; padding:4px 12px; border-radius:999px; font-size:.85rem; font-weight:700; white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis;}
.creator-right{ display:flex; flex-direction:column; gap:14px; min-width:0;}
.creator-section{ background:var(--paper); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow);}
.creator-section h3{ margin:0 0 10px; font-size:1rem;}
.customize-grid{ display:flex; flex-direction:column; gap:10px;}
.c-block{ display:flex; gap:8px; flex-wrap:wrap;}
.ctab{ display:flex; flex-direction:column; gap:4px;}
.ctab.hidden{display:none;}
.sliders{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px;}
.sliders label{ display:flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600;}
.sliders input[type=range]{ flex:1; min-width:0; accent-color:var(--bg1);}
.sliders em{ font-style:normal; min-width:16px; text-align:right; font-size:.8rem; color:#8a7a9c;}
.label-row{ font-size:.8rem; font-weight:800; color:#8a7a9c; margin-top:8px; letter-spacing:.5px;}
.swatches{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.sw{ width:38px; height:38px; border-radius:12px; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; background:#fff;}
.sw.on{ outline:3px solid var(--accent); outline-offset:1px;}
.sw.wide{ width:auto; padding:0 12px; border-radius:999px; font-weight:700; font-size:.82rem;}

/* ---------- game ---------- */
.screen-game{ padding:0;}
.game-top{ display:flex; justify-content:space-between; align-items:center;}
.game-hud{ display:flex; gap:14px; align-items:center; background:var(--paper); padding:8px 18px; border-radius:999px; box-shadow:var(--shadow);}
.game-hud strong{font-size:1.05rem;}
.game-hud #game-timer{ font-size:1.3rem; font-weight:800; color:var(--accent); min-width:40px; text-align:center;}
.game-wrap{ position:relative; background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
#arena{ width:100%; height:auto; display:block; touch-action:none;}
.countdown{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:clamp(4rem,16vw,8rem); font-weight:900; color:#fff; text-shadow:0 6px 0 rgba(0,0,0,.25); animation:pop .4s ease; pointer-events:none;}
.countdown.hidden,.game-overlay.hidden{display:none;}
.game-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(40,10,60,.55);}
.game-overlay .card{ background:var(--paper); border-radius:20px; padding:20px 30px; text-align:center; box-shadow:var(--shadow); max-width:88%;}
.touch-layer{ position:fixed; top:66px; bottom:0; left:0; right:0; pointer-events:none; z-index:50; display:none;}
.touch-layer canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:auto;}

/* ---------- results ---------- */
.results-list{ display:flex; flex-direction:column; gap:10px;}
.res-card{ display:flex; align-items:center; gap:12px; background:var(--paper); border-radius:14px; padding:10px 16px; box-shadow:var(--shadow);}
.res-card canvas{ width:56px; height:58px; border-radius:10px; background:#eaf7ff;}
.res-card .pos{ font-size:1.3rem; font-weight:900; min-width:34px; text-align:center; color:var(--accent);}
.res-card .info{ flex:1;}
.res-card .info strong{ display:block;}
.res-card .info span{ font-size:.8rem; color:#8a7a9c;}
.res-card .score{ font-weight:800; font-size:1.1rem;}
.res-card.me{ outline:3px solid var(--ok);}

/* ---------- book ---------- */
.book-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px;}
.book-card{ background:var(--paper); border-radius:14px; padding:8px; text-align:center; box-shadow:var(--shadow);}
.book-card canvas{ width:100%; height:92px; border-radius:10px; background:linear-gradient(180deg,#eaf7ff,#fff);}
.book-card strong{ display:block; font-size:.8rem; margin-top:4px;}
.book-card span{ font-size:.7rem; color:#8a7a9c;}

/* ---------- responsive ---------- */
@media (max-width: 820px){
  .creator-layout{ grid-template-columns:1fr; }
  .creator-left{ position:static; flex-direction:row; align-items:center;}
  .preview-wrap{ flex:0 0 150px;}
  .sliders{ grid-template-columns:1fr;}
}
@media (max-width: 480px){
  #app{ padding:8px;}
  .logo{font-size:2.3rem;}
  .slot canvas{ width:76px; height:80px;}
  .btn-big{ padding:12px 18px; font-size:1rem;}
}