:root{--bg:#111;--ink:#f2efe6;--hit:#ff3b1f;--reach:#ffd400;--dim:#8a8780;--line:#f2efe6;--fs:14px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
main.shell-doc{padding-block:12px 40px}
[hidden]{display:none!important}
button,select,input,textarea{font:700 14px "Zen Kaku Gothic New",sans-serif;color:var(--ink)}
button{background:transparent;border:2px solid var(--line);padding:6px 11px;cursor:pointer;line-height:1.2;touch-action:manipulation}
button:hover{background:#2a2a2a}
button.on,button.primary{background:var(--ink);color:var(--bg)}
button.warn{border-color:var(--hit);color:var(--hit)}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--reach);outline-offset:1px}
select,input[type=text],textarea{background:#000;border:2px solid var(--line);padding:6px 8px;border-radius:0}
select{padding-right:4px}

/* 上の帯 */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 12px;border-bottom:3px solid var(--line);padding-bottom:8px;margin-bottom:12px}
h1{font-family:"Dela Gothic One",sans-serif;font-weight:400;font-size:24px;letter-spacing:.04em;line-height:1.1}
h1 small{display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-size:12px;color:var(--dim);letter-spacing:0;margin-top:3px}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs .obs-btn{border-color:var(--reach);color:var(--reach)}
.tabs .obs-btn:hover{background:var(--reach);color:var(--bg)}

/* 盤面の画面 */
.bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.seg{display:inline-flex}
.seg button+button{border-left:0}
.status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:32px;margin-bottom:6px;font-size:14px}
.status .clk{font-family:"Dela Gothic One";font-size:18px;letter-spacing:.03em}
.status button{padding:3px 8px;font-size:12px}
.status .dim{color:var(--dim);font-size:12px}

#card{width:min(100%,640px,max(300px,calc(100vh - 230px)));margin-inline:auto}
.tally{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;background:var(--bg);border:3px solid var(--line);border-bottom:0;padding:5px 10px 4px}
.tally .nm{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tally .nm b{color:var(--ink)}
.tally .ct{display:flex;gap:12px;font-family:"Dela Gothic One";font-size:20px;white-space:nowrap}
.tally .r{color:var(--reach)}
.tally .b{color:var(--hit)}
.tally .ct span{display:inline-block}
.tally .ct .pop{animation:tpop .5s ease-out}
@keyframes tpop{0%{transform:scale(1.9)}100%{transform:scale(1)}}
#wrap{position:relative;background:var(--bg)}
#wrap.shake{animation:shake .45s linear}
@keyframes shake{10%,50%,90%{transform:translate(-6px,2px)}30%,70%{transform:translate(6px,-2px)}100%{transform:none}}
#board{display:grid;border:3px solid var(--line);width:100%;aspect-ratio:1;background:var(--bg)}
.c{position:relative;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;font-weight:700;font-size:var(--fs);line-height:1.25;cursor:pointer;overflow:hidden;word-break:break-all;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.c .t{position:relative;z-index:2}
.c .st{position:absolute;inset:11%;border:calc(var(--fs)*.35) solid var(--hit);border-radius:50%;opacity:0;transform:scale(1.7) rotate(-20deg);transition:transform .13s ease-in,opacity .08s;z-index:1;pointer-events:none}
.c .tm{position:absolute;right:4px;bottom:2px;font-size:max(9px,calc(var(--fs)*.62));font-family:"Dela Gothic One";color:var(--hit);z-index:2;opacity:0}
.c.open .st{opacity:.85;transform:scale(1) rotate(-8deg)}
.c.open .tm{opacity:1}
.c.open{color:var(--hit)}
.c.free{color:var(--dim);cursor:default}
.c.empty .t{color:#444}
.c.reach{animation:blink .6s steps(2) infinite}
@keyframes blink{50%{background:var(--reach);color:var(--bg)}}
.c.line{background:var(--hit);color:var(--bg)}
.c.line .st{border-color:var(--bg)}
.c.line .tm{color:var(--bg)}
#flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5}
#flash.f1{animation:fl1 .5s ease-out}
#flash.f3{animation:fl3 1s linear}
@keyframes fl1{0%{opacity:.9;background:#fff}100%{opacity:0;background:var(--hit)}}
@keyframes fl3{0%,33%,66%{opacity:.95;background:#fff}16%,50%,83%{opacity:.6;background:var(--hit)}100%{opacity:0}}
#banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;font-family:"Dela Gothic One";font-size:var(--bn,90px);line-height:1;letter-spacing:.05em;opacity:0;z-index:6}
#banner small{font-size:.45em;margin-top:.1em}
#banner.show{animation:pop 1.7s ease-out forwards}
#banner.r{color:var(--reach);-webkit-text-stroke:.05em var(--bg)}
#banner.b{color:var(--ink);-webkit-text-stroke:.05em var(--hit)}
@keyframes pop{0%{opacity:0;transform:scale(1.7)}10%{opacity:1;transform:scale(1)}16%{transform:scale(1.06)}22%{transform:scale(1)}78%{opacity:1}100%{opacity:0}}
.hint{font-size:13px;color:var(--dim);margin:8px auto 0;width:min(100%,640px);line-height:1.6}
.hint kbd{font:700 12px "Zen Kaku Gothic New";border:1px solid var(--dim);padding:0 4px}

/* 説明 */
.howto{margin-top:28px;border-top:3px solid var(--line);padding-top:12px;font-size:14px;line-height:1.75}
.howto h2,.panel h2{font-family:"Dela Gothic One";font-weight:400;font-size:18px;margin-bottom:6px}
.howto ol{padding-left:1.4em}
.howto p{color:var(--dim);margin-top:6px}

/* お題・演出・記録 */
.panel{display:grid;gap:14px}
.panel .note{font-size:13px;color:var(--dim);line-height:1.6}
.panel label.f{display:grid;gap:4px;font-size:13px}
.sets{display:grid;grid-template-columns:200px 1fr;gap:16px}
.setlist{display:flex;flex-direction:column;gap:6px}
.setlist button{text-align:left}
.seted{display:grid;gap:10px}
.seted textarea{width:100%;min-height:300px;line-height:1.6;resize:vertical;font-weight:500}
.seted input[type=text]{width:100%;max-width:280px}
.cnt{font-size:13px}
.cnt.bad{color:var(--reach)}
.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chk{display:flex;gap:6px;align-items:center;font-size:14px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--hit)}
.opt{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;align-items:center}
.opt>span{font-size:14px;font-weight:700}
.opt input[type=range]{width:min(240px,100%);accent-color:var(--hit)}
#swatch{height:36px;border:2px solid var(--line);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:"Dela Gothic One";font-size:18px}
#swatch .fl{position:absolute;inset:0;opacity:0}
#swatch .fl.f1{animation:fl1 .5s ease-out}
#swatch .fl.f3{animation:fl3 1s linear}
.urlbox{display:flex;gap:6px;flex-wrap:wrap}
.urlbox input{flex:1;min-width:0;font-size:12px}

.logsum{font-size:14px;line-height:1.6}
.logsum b{font-family:"Dela Gothic One";font-weight:400;font-size:20px}
table.tl{width:100%;border-collapse:collapse;font-size:14px}
table.tl td{border-bottom:1px solid #333;padding:5px 6px;vertical-align:top}
table.tl td.t{font-family:"Dela Gothic One";white-space:nowrap;width:1%;color:var(--hit)}
table.tl td.k{white-space:nowrap;width:1%;font-family:"Dela Gothic One";text-align:right}
table.tl .kr{color:var(--reach)}
table.tl .kb{color:var(--hit)}
.empty-msg{color:var(--dim);font-size:14px;padding:12px 0}
#shot{max-width:100%;border:2px solid var(--line);display:block}
.hist{display:flex;flex-direction:column;gap:6px}
.hist .it{display:flex;gap:6px}
.hist .it button:first-child{flex:1;text-align:left;font-weight:500}
.shell-share button{border-radius:0;border:2px solid var(--ink);font:700 13px "Zen Kaku Gothic New",sans-serif;padding:6px 11px;color:var(--ink)}
.shell-share button:hover{background:var(--ink);color:var(--bg)}

/* 書き換え */
#edit{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
#edit .box{background:var(--bg);border:3px solid var(--line);padding:14px;width:min(380px,100%);display:grid;gap:8px}
#edit input{font-size:18px;width:100%}
#edit p{font-size:12px;color:var(--dim)}

/* OBS に重ねる表示 */
#obsExit{position:fixed;top:6px;right:6px;z-index:30;opacity:0;background:var(--bg);font-size:12px}
#obsExit:hover,#obsExit:focus-visible{opacity:1}
body.obs main.shell-doc{max-width:none;padding:8px}
body.obs .chrome{display:none!important}
body.obs #card{width:min(calc(100vw - 16px),calc(100vh - 60px))}
body.obs.bg-green,html.bg-green{background:#00b140}
body.obs.bg-clear,html.bg-clear{background:transparent}

@media (max-width:640px){
  .sets{grid-template-columns:1fr}
  .setlist{flex-direction:row;flex-wrap:wrap}
  .opt{grid-template-columns:1fr}
  h1{font-size:21px}
  .tally .ct{font-size:17px;gap:8px}
}