:root{
  --navy:#151b2b;--navy2:#24456a;--cream:#f6efe4;--paper:#fffaf2;
  --gold:#d8a14b;--orange:#ff6b2f;--red:#df4b61;--ink:#1d2230;
  --teal:#1f8a84;--muted:#667084;--line:#ded2c1;--shadow:0 18px 55px rgba(15,32,55,.16)
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,"Noto Sans Thai",system-ui,sans-serif;background:#ebe7df;color:var(--ink)}
button,input,select,textarea{font:inherit}.hidden{display:none!important}
.shell{min-height:100vh;display:grid;place-items:center;padding:22px}.phone{width:min(430px,100%);min-height:820px;background:var(--cream);border:1px solid #d8d0c5;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.topbar{height:64px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;background:#fff9f1;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--navy)}.brand img{width:36px;height:36px;object-fit:contain}
.content{padding:24px 22px 100px}.hero{text-align:center}.hero-cat{height:185px;max-width:85%;object-fit:contain}.hero h1{font-size:34px;margin:2px 0 0;color:var(--navy)}.hero p{margin:4px 0;color:var(--muted)}.tagline{font-weight:700;color:var(--orange)!important}
.card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:0 8px 28px rgba(31,43,60,.08);margin:14px 0}
.intro-card h3{margin-top:0}.spark-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0}.spark-meter span{height:8px;border-radius:99px}.spark-meter span:nth-child(1){background:var(--teal)}.spark-meter span:nth-child(2){background:var(--gold)}.spark-meter span:nth-child(3){background:var(--orange)}.spark-meter span:nth-child(4){background:var(--red)}
.btn{border:0;border-radius:8px;padding:13px 18px;font-weight:800;cursor:pointer;transition:.18s}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.58;cursor:not-allowed;transform:none}.btn-primary{background:var(--navy2);color:#fff}.btn-orange{background:var(--orange);color:#fff}.btn-red{background:var(--red);color:#fff}.btn-light{background:#ece7df;color:var(--navy)}.btn-block{width:100%}.row{display:flex;gap:10px}.row>*{flex:1}
.field{margin:12px 0}.field label{display:block;font-weight:800;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;border:1px solid #cfc7bc;border-radius:12px;padding:12px;background:white}.players-list{display:grid;gap:10px}.notice{padding:12px 14px;border-radius:14px;background:#fff2dc;border:1px solid #f0c986;color:#64461d;font-size:14px}
.prep-list{display:grid;gap:8px;margin:14px 0}.prep-list div{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}.prep-list b{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#ffe2c7;color:#7d3714}.prep-list span{font-size:14px;color:#3d4656}
.nav{position:absolute;bottom:0;left:0;right:0;height:76px;background:#f4efe7;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:8px}.nav button{border:0;background:transparent;color:#6f7277;font-size:12px;font-weight:700}.nav img{display:block;width:28px;height:28px;object-fit:contain;margin:0 auto 4px}.nav .active{color:var(--navy)}
.rules h2{color:var(--navy)}.rule{display:flex;gap:12px;padding:14px 0;border-bottom:1px dashed #d7cec1}.rule:last-child{border:0}.paw{font-size:22px}
.board{background:#263f62;min-height:756px;color:#fff;padding:16px}.board .top{display:flex;justify-content:space-between;align-items:center}.pin{font-weight:900;letter-spacing:2px}.players-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.player{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:12px;border-radius:8px}.player.active{outline:3px solid #f8c168}.player strong{display:block}.score{font-size:22px;font-weight:900;color:#ffc061}.fail{font-size:12px;color:#ffd4d4}.fail.hot{color:#ffbd6b;font-weight:900}.deck-status{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#dbe7f5;margin:-4px 0 6px}
.wheel-wrap{text-align:center;margin:10px 0}.wheel{width:215px;max-height:230px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.25))}
.current{text-align:center;margin:8px}.current img{height:95px;object-fit:contain}.board-actions{display:flex;gap:10px}.board-actions button{flex:1}
.modal{position:fixed;inset:0;background:rgba(7,17,31,.74);display:grid;place-items:center;padding:20px;z-index:50}.mission{width:min(390px,100%);background:#f6ead8;border:5px solid #d5aa6d;border-radius:12px;padding:22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35)}.mission h2{color:var(--navy);margin:0}.mission-body{background:#fffdf8;border:2px solid #d8d0c5;border-radius:8px;padding:20px;margin:16px 0}.symbols{font-size:24px}.fires{font-size:28px;font-weight:900;color:var(--orange)}.card-meta{font-size:12px;color:var(--muted);margin-top:6px}.mission-cat{height:110px;object-fit:contain;margin-top:-15px}
.summary{text-align:center}.winner-cat{height:180px;object-fit:contain}.leader{font-size:28px;font-weight:900;color:var(--orange)}
.agegate{position:fixed;inset:0;background:#101c2b;display:grid;place-items:center;padding:20px;z-index:80}.agebox{max-width:420px;background:#fffaf2;border-radius:8px;padding:26px;text-align:center}.agebox img{height:150px}.agebox h2{color:var(--navy)}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#111c2c;color:white;padding:12px 18px;border-radius:8px;z-index:99;box-shadow:var(--shadow)}
@media(max-width:460px){.shell{padding:0}.phone{border-radius:0;min-height:100vh}.content{padding-bottom:110px}.modal{position:absolute}.agegate{position:absolute}}