:root{
  --bg:#101216; --panel:#181b21; --ink:#eceef2; --sub:#9aa0ac; --line:#282d36;
  --accent:#4d8dff; --accent2:#2b6ae0;
  --oni:#ff5f56; --run:#3ecf8e; --warn:#e8b53c;
  --r:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;
  font-size:15px; line-height:1.6; -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
}
.sc{min-height:100dvh; display:flex; flex-direction:column}
.hidden{display:none !important}
.pad{padding:16px 16px 40px; max-width:560px; width:100%; margin:0 auto}
.center{text-align:center}

.hero{padding:46px 20px 22px; text-align:center; max-width:560px; margin:0 auto}
h1{font-size:26px; margin:0 0 10px; letter-spacing:.02em}
h2{font-size:14px; color:var(--sub); margin:20px 0 8px; font-weight:600}
.lead{color:var(--sub); font-size:14px; margin:0}
.note{color:var(--sub); font-size:12.5px; margin:12px 0 0; line-height:1.7}
.err{color:var(--oni); font-size:13px; margin-top:12px; min-height:20px}

.bar{display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--line); font-weight:600; position:sticky; top:0; background:var(--bg); z-index:5}
.back{background:none; border:0; color:var(--accent); font:inherit; padding:0; cursor:pointer}

button{font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); padding:11px 16px}
button:active{opacity:.75}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
button.big{display:block; width:100%; padding:15px; font-size:16px; margin-bottom:11px}

label{display:block; color:var(--sub); font-size:12.5px; margin:16px 0 0}
input,select{
  display:block; width:100%; margin-top:6px; font:inherit; font-size:16px;
  padding:12px 13px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); color:var(--ink);
}
input:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px}
input.code{text-transform:uppercase; letter-spacing:.34em; text-align:center; font-size:24px; font-weight:600}
.row{display:flex; gap:10px}
.grow{flex:1; min-width:0}

.fields{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:7px}
.fields button{padding:10px; font-size:13px; text-align:left; line-height:1.4}
.fields button[aria-pressed="true"]{border-color:var(--accent); background:#1b2536; color:var(--accent)}
.fields button small{display:block; color:var(--sub); font-size:11px; margin-top:2px}
.fields button[aria-pressed="true"] small{color:var(--accent)}

.map{height:220px; border-radius:var(--r); overflow:hidden; margin-top:10px; border:1px solid var(--line)}
.map.full{flex:1; min-height:240px; border-radius:0; border:0; margin:0}
.leaflet-container{background:#0c0e12}

.codebox{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px; text-align:center}
.big-code{font-size:38px; font-weight:700; letter-spacing:.22em; margin:4px 0 12px}
.k{color:var(--sub); font-size:12px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; margin-top:11px}

.p{display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; margin-bottom:7px}
.p .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dot{width:8px; height:8px; border-radius:99px; background:#4a505c; flex:none}
.dot.on{background:var(--run)}
.tag{font-size:11px; padding:2px 9px; border-radius:99px; border:1px solid var(--line); color:var(--sub); flex:none}
.tag.oni{background:#3a1e1d; border-color:transparent; color:var(--oni)}
.tag.run{background:#16301f; border-color:transparent; color:var(--run)}
.tag.out{background:#332a12; border-color:transparent; color:var(--warn)}

.gamebar{display:flex; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--bg)}
.gamebar > div{flex:1; min-width:0}
.gamebar .v{font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2}
.gamefoot{padding:12px 14px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg)}
.rolerow{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.role{font-weight:700; font-size:17px}
.role.oni{color:var(--oni)}
.role.run{color:var(--run)}
.log{max-height:78px; overflow-y:auto; font-size:12px; color:var(--sub); line-height:1.7}

.reveal{position:absolute; left:0; right:0; top:0; z-index:600; text-align:center;
  background:var(--oni); color:#fff; font-weight:700; font-size:13.5px; padding:7px}

dialog{border:1px solid var(--line); border-radius:14px; padding:0; background:var(--panel); color:var(--ink);
  width:calc(100% - 34px); max-width:420px}
dialog::backdrop{background:rgba(0,0,0,.6)}
.dlg{padding:20px}
.dlg h3{margin:0 0 8px; font-size:18px}
.dlg p{color:var(--sub); font-size:13.5px; margin:0 0 16px}
.dlg .pick{margin-bottom:8px}

.pin{border-radius:99px; border:2px solid #fff; box-shadow:0 0 0 2px rgba(0,0,0,.4)}