:root { --ui:#0E1B2C; --panel:rgba(10,20,34,.86); --accent:#F5B83A; --cyan:#5FE3F2; --text:#fff; --danger:#FF5A4E; --font:"Trebuchet MS",Verdana,sans-serif; --s:1; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:#05080f; color:var(--text); font-family:var(--font); overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
#wrap { position:fixed; inset:0; display:grid; place-items:center; }
#game { display:block; background:#0a1422; image-rendering:auto; }
#ui { position:absolute; display:none; overflow:auto; touch-action:pan-y; font-size:calc(17px * var(--s)); }
#ui.on { display:flex; align-items:center; justify-content:center; padding:calc(22px * var(--s)); }
#ui.titlebg { background:linear-gradient(180deg,rgba(5,10,20,.15),rgba(5,10,20,.75) 60%,rgba(5,10,20,.92)); align-items:flex-end; }
.panel { width:100%; max-height:100%; overflow:auto; background:var(--panel); border:2px solid rgba(95,227,242,.35); border-radius:calc(20px * var(--s)); padding:calc(20px * var(--s)); box-shadow:0 12px 40px rgba(0,0,0,.5); }
.panel.small { max-width:92%; }
h2 { margin:0 0 .5em; font-size:1.6em; color:var(--accent); text-align:center; letter-spacing:.02em; }
h2.good { color:var(--cyan); } h2.bad { color:var(--danger); }
button { font:inherit; color:#fff; background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.25); border-radius:999px; padding:.6em 1.1em; margin:.3em; cursor:pointer; touch-action:manipulation; }
button:hover:not([disabled]) { border-color:var(--cyan); }
button[disabled] { opacity:.45; cursor:default; }
button.big { background:linear-gradient(180deg,#ffd35c,#f0a019); color:#2a1600; border:none; font-weight:bold; font-size:1.35em; padding:.6em 1.6em; box-shadow:0 6px 0 #a96a07,0 10px 24px rgba(0,0,0,.4); }
button.link { background:none; border:none; color:var(--cyan); text-decoration:underline; }
.row { display:flex; flex-wrap:wrap; justify-content:center; margin:.4em 0; }
.fine { opacity:.8; font-size:.82em; text-align:center; }
a { color:var(--cyan); }
.title { width:100%; text-align:center; padding-bottom:calc(10px * var(--s)); }
.title .logo { width:62%; border-radius:calc(22px * var(--s)); box-shadow:0 10px 40px rgba(0,0,0,.6); margin-bottom:.6em; }
.pickdog { display:flex; justify-content:center; gap:.6em; margin:.4em 0 .8em; }
.dog { background:rgba(10,20,34,.85); border:2px solid rgba(255,255,255,.2); border-radius:14px; padding:.4em .9em; display:flex; flex-direction:column; }
.dog.sel { border-color:var(--accent); } .dog.lock { opacity:.55; } .dog small { opacity:.75; font-size:.75em; }
.lvl { width:100%; display:flex; align-items:center; gap:.8em; text-align:left; border-radius:16px; background-size:cover; background-position:center; padding:.7em .9em; margin:.35em 0; }
.lvl .n { font-size:1.8em; font-weight:bold; color:var(--accent); width:1.2em; text-align:center; }
.lvl .t { flex:1; display:flex; flex-direction:column; gap:.2em; } .lvl small { opacity:.8; font-size:.78em; }
.lvl.locked { filter:grayscale(.7); }
.bar { display:block; height:.5em; background:rgba(255,255,255,.15); border-radius:9px; overflow:hidden; } .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--accent)); }
.upg { display:flex; align-items:center; justify-content:space-between; gap:.6em; padding:.5em .2em; border-bottom:1px solid rgba(255,255,255,.1); }
.upg small { display:block; opacity:.75; font-size:.8em; } .pips { color:var(--accent); letter-spacing:.15em; }
.results { text-align:center; } .big2 { font-size:1.25em; margin:.2em 0 .6em; }
.ores { display:flex; flex-wrap:wrap; justify-content:center; gap:.5em; margin:.4em 0 .8em; }
.ore { display:flex; align-items:center; gap:.3em; background:rgba(255,255,255,.07); border-radius:10px; padding:.25em .6em; } .ore img { height:1.8em; }
.badge { display:inline-block; background:var(--accent); color:#2a1600; font-weight:bold; border-radius:8px; padding:.1em .5em; } .badge.big { font-size:1.1em; padding:.4em .8em; }
.quota { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6em; margin:.6em 0; font-size:.85em; }
label { display:block; text-align:left; margin:.5em 0; font-size:.9em; }
label input:not([type=checkbox]) { display:block; width:100%; font:inherit; padding:.5em .7em; margin-top:.25em; border-radius:10px; border:2px solid rgba(255,255,255,.25); background:rgba(0,0,0,.35); color:#fff; user-select:text; -webkit-user-select:text; }
label.chk { display:flex; align-items:center; gap:.5em; } .chk input { width:1.2em; height:1.2em; }
.notice { text-align:left; }
.board { text-align:left; padding-left:1.4em; } .board li { margin:.3em 0; } .board span { opacity:.75; margin-left:.5em; font-size:.85em; }
#toast { position:fixed; left:50%; top:12%; transform:translate(-50%,-20px); background:rgba(8,16,28,.9); border:2px solid var(--accent); color:#fff; padding:.6em 1em; border-radius:14px; font-weight:bold; opacity:0; transition:.25s; pointer-events:none; max-width:88vw; text-align:center; z-index:9; }
#toast.on { opacity:1; transform:translate(-50%,0); }
#loading { position:fixed; inset:0; display:grid; place-items:center; background:#05080f; color:#fff; font-weight:bold; z-index:10; }
#loading .box { width:60vw; max-width:360px; text-align:center; } #loadbar { height:10px; background:rgba(255,255,255,.15); border-radius:9px; overflow:hidden; margin-top:12px; } #loadbar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#5FE3F2,#F5B83A); }
#game, #ui { grid-area:1 / 1; }
.ver { margin:.2em 0 0; font-size:.7em; color:#c9ced6; opacity:.7; letter-spacing:.04em; }
.roles { display:grid; grid-template-columns:auto auto; justify-content:center; gap:.3em 1em; margin:.2em 0 1em; } .roles span { opacity:.7; text-align:right; } .roles b { color:var(--accent); text-align:left; }
.modes { display:flex; flex-direction:column; gap:.45em; margin:.3em auto .6em; width:88%; }
.mode { display:flex; flex-direction:column; align-items:flex-start; text-align:left; border-radius:16px; padding:.7em 1em; margin:0; background:linear-gradient(90deg,rgba(255,211,92,.95),rgba(240,160,25,.95)); color:#2a1600; border:none; box-shadow:0 5px 0 #a96a07; }
.mode b { font-size:1.25em; letter-spacing:.03em; } .mode small { opacity:.8; font-size:.78em; }
.mode.zr { background:linear-gradient(90deg,#5FE3F2,#7a6bff); color:#06122a; box-shadow:0 5px 0 #3b3a9a; }
.mode.soon { background:rgba(255,255,255,.08); color:#fff; box-shadow:none; border:2px dashed rgba(255,255,255,.25); }
.zrlvl { width:100%; display:flex; align-items:center; gap:.8em; text-align:left; border-radius:14px; background-size:cover; background-position:center; padding:.6em .9em; margin:.3em 0; }
.zrlvl .n { font-size:1.6em; font-weight:bold; color:var(--cyan); width:1.2em; text-align:center; }
.zrlvl small { display:block; opacity:.8; font-size:.78em; } .zrlvl.locked { filter:grayscale(.8); }
.rot { background:rgba(95,227,242,.15); border:1px solid rgba(95,227,242,.5); border-radius:10px; padding:.4em .6em; font-size:.8em; text-align:center; margin:.3em 0; }
.toggle { display:flex; align-items:center; justify-content:center; gap:.5em; font-size:.9em; }
.mode.pm { background:linear-gradient(90deg,#ff7ac6,#ffd35c); color:#2a0b1e; box-shadow:0 5px 0 #a3366e; }
.breedrow { display:flex; justify-content:center; gap:.3em; margin:.2em 0 .4em; } .breedrow img { height:3.2em; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.pmgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:.4em; margin:.6em 0; }
.pmlvl { margin:0; padding:.5em .2em; border-radius:12px; display:flex; flex-direction:column; align-items:center; background:rgba(255,122,198,.18); border-color:rgba(255,122,198,.5); }
.pmlvl b { font-size:1.3em; } .pmlvl span { color:#F5B83A; font-size:.8em; letter-spacing:.05em; } .pmlvl.locked { opacity:.45; }
.stars { font-size:2em; color:#F5B83A; margin:.1em 0; letter-spacing:.1em; }
.sharecard { display:flex; align-items:center; gap:.6em; justify-content:center; background:rgba(255,255,255,.07); border-radius:14px; padding:.5em .8em; margin:.5em 0; } .sharecard img { height:3.4em; }
.panel > .mode { width:100%; margin:.4em 0; }
/* floating music on/off button (v2.0) */
#musicbtn, #sharebtn { position:fixed; z-index:20; box-sizing:border-box; padding:0; margin:0; min-width:0; min-height:0; display:grid; place-items:center; border-radius:50%; border:2px solid rgba(95,227,242,.55); background:rgba(8,16,28,.7); color:#5FE3F2; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.45); line-height:0; }
#musicbtn.off { color:#9aa3b5; border-color:rgba(255,90,78,.6); }
#musicbtn:active, #sharebtn:active { transform:scale(.92); }
.title .copy { margin:.2em 0 0; font-size:.68em; color:rgba(255,255,255,.55); text-align:center; }
#musicbtn svg, #sharebtn svg { width:62%; height:62%; display:block; }
/* win: congrats + movie trailer (v2.1) */
.congrats { margin:.5em 0 .3em; text-align:center; }
.congrats .cg { margin:.1em 0 .4em; font-size:1.25em; font-weight:bold; color:#F5B83A; text-shadow:0 2px 8px rgba(245,184,58,.35); }
.congrats .trailer { display:inline-block; padding:.6em 1.3em; border-radius:999px; background:linear-gradient(180deg,#ff6b5b,#d93a2b); color:#fff; font-weight:bold; text-decoration:none; box-shadow:0 4px 0 #8f2218, 0 6px 18px rgba(255,90,78,.4); }
.congrats .trailer:active { transform:translateY(2px); box-shadow:0 2px 0 #8f2218; }