/* 同じ盤 60 秒 — 墨の黒・蛍光の黄・朱。角は立てる。座標は枠（1080×720 / 720×1080）の px */
:root{--bg:#161512;--panel:#22201b;--line:#3a362d;--ink:#efe9da;--dim:#8d8676;--hi:#f2c230;--red:#d9412f;--me:#2e2a20}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"DotGothic16",monospace;overscroll-behavior:none}
body{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.shell-stage{background:var(--bg)}
.scr{position:absolute;inset:0;box-sizing:border-box;font-family:"DotGothic16",monospace;color:var(--ink);background:var(--bg);overflow:hidden}
.scr *{box-sizing:border-box}
.scr h2,.scr h3,.scr p{margin:0;font-weight:normal}
.scr button{font-family:inherit;cursor:pointer;border-radius:0}
.scr button:focus-visible,.scr input:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.big{background:var(--hi);color:var(--bg);border:0;font-size:26px;padding:14px 30px}
.big:active{transform:translateY(2px)}
.sub{background:transparent;color:var(--ink);border:2px solid var(--line);font-size:19px;padding:10px 18px}
.sub:hover{border-color:var(--dim)}
.dim{color:var(--dim)}
.scr input{font-family:inherit;font-size:24px;background:var(--panel);color:var(--ink);border:2px solid var(--line);border-radius:0;padding:8px 12px;width:170px;letter-spacing:.15em;user-select:text;-webkit-user-select:text}
.scr input::placeholder{color:var(--dim);letter-spacing:0;font-size:18px}

/* 駒（形でも見分けられる） */
.g{position:absolute;inset:14%;pointer-events:none}
.k-1{visibility:hidden}
.k0{background:#d9412f;border-radius:50%}
.k1{background:#f2c230}
.k2{background:#3fae5a;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.k3{background:#ee8a2a;clip-path:polygon(50% 4%,100% 96%,0 96%)}
.k4{background:#e8e2d0;clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}

/* 盤 */
.bd{position:relative;background:var(--panel);outline:4px solid var(--line);touch-action:none;cursor:pointer}
.bd .c{position:absolute;box-shadow:inset 0 0 0 1.5px var(--line)}
.bd .c.sel{background:#4a4334}
.bd .c.cur{box-shadow:inset 0 0 0 4px var(--dim)}
.bd .c.sel.cur{box-shadow:inset 0 0 0 4px var(--hi)}
.bd .c.hint{animation:hint .8s steps(2) infinite}
@keyframes hint{50%{background:#5a5030}}
.bd.shuf{animation:shuf .26s steps(3)}
@keyframes shuf{50%{opacity:.3}}

/* 対戦 */
.play .hud{position:absolute;display:flex;justify-content:space-between;align-items:baseline}
.play .time{font-size:56px;color:var(--hi);min-width:150px}
.play.hurry .time{color:var(--red)}
.play .no{color:var(--dim);font-size:18px}
.play .sc{font-size:46px;min-width:150px;text-align:right}
.play .bdwrap{position:absolute}
.play .side{position:absolute}
.play .side h3{color:var(--dim);font-size:18px;margin-bottom:6px}
.play .hint{color:var(--dim);font-size:15px;line-height:1.6;margin-top:14px}
.play.L .hud{left:40px;top:12px;width:610px;height:70px}
.play.L .bdwrap{left:40px;top:92px;width:610px;height:610px}
.play.L .side{left:692px;top:30px;width:348px;bottom:24px}
.play.P .hud{left:30px;top:28px;width:660px;height:80px}
.play.P .bdwrap{left:30px;top:124px;width:660px;height:660px}
.play.P .side{left:30px;top:806px;width:660px;bottom:16px}
.play.P .side .hint{display:none}
.play.P .row{height:27px;font-size:17px}
.play.P .row .s{font-size:19px}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(22,21,18,.72);pointer-events:none}
.ov.hide{display:none}
.ov .cd{font-size:170px;line-height:1;color:var(--hi)}
.ov .sub{border:0;font-size:22px;color:var(--ink);padding:0;background:none}
.combo{position:absolute;right:10px;top:-2px;transform:translateY(-100%);color:var(--hi);font-size:28px;pointer-events:none}
.pts{position:absolute;transform:translate(-50%,-50%);font-size:34px;color:var(--hi);pointer-events:none;text-shadow:3px 3px 0 var(--bg);animation:rise .7s ease-out forwards}
@keyframes rise{to{transform:translate(-50%,-140%);opacity:0}}

/* 順位 */
.row{display:grid;grid-template-columns:34px 1fr 96px;align-items:center;height:40px;border-bottom:2px solid var(--line);position:relative;font-size:20px;padding:0 6px}
.row.me{background:var(--me)}
.row b{color:var(--dim);font-weight:normal}
.row .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .nm i{font-style:normal;color:var(--dim);font-size:13px;border:1px solid var(--line);padding:0 3px;margin-left:6px;vertical-align:2px}
.row .s{text-align:right;font-size:23px}
.row .bar{position:absolute;left:0;bottom:-2px;height:3px;background:var(--hi)}
.row.me .bar{background:var(--ink)}
.hanko{display:inline-block;font-style:normal;border:2px solid var(--red);color:var(--red);font-size:13px;line-height:1.2;padding:1px 4px;margin-left:8px;transform:rotate(-7deg);animation:hanko .25s ease-out}
@keyframes hanko{from{transform:rotate(-7deg) scale(2.2);opacity:0}}

/* 結果 */
.res .gap{font-size:38px;line-height:1.2}
.res .gap b{color:var(--hi);font-weight:normal;font-size:50px}
.res .meta{color:var(--dim);font-size:17px}
.res .panels{display:flex;gap:8px;align-items:flex-start;justify-content:center}
.res .panel{display:flex;flex-direction:column;gap:6px}
.res .cap{font-size:17px;min-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res .cap span{color:var(--hi);margin-left:4px}
.res .note{color:var(--hi);font-size:18px;min-height:24px}
.res .vs{align-self:center;color:var(--dim);font-size:20px}
.res .tools{display:flex;flex-direction:column;gap:10px}
.res .stamps{display:flex;gap:8px;flex-wrap:wrap}
.stp{background:transparent;border:2px solid var(--red);color:var(--red);font-size:17px;padding:5px 10px;transform:rotate(-3deg)}
.stp:disabled{opacity:.3;cursor:default}
.res .world{font-size:16px;color:var(--dim);line-height:1.5;min-height:24px}
.res .world b{color:var(--ink);font-weight:normal}
.res .btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.res.L .rl{position:absolute;left:36px;top:26px;width:420px;bottom:24px;display:flex;flex-direction:column;gap:10px}
.res.L .rr{position:absolute;left:480px;top:26px;width:570px;bottom:24px;display:flex;flex-direction:column;justify-content:space-between}
.res.L .rr .btns{justify-content:flex-end}
.res.P{display:flex;flex-direction:column;gap:16px;padding:26px 30px}
.res.P .rl{display:flex;flex-direction:column;gap:8px}
.res.P .row{height:32px;font-size:18px}
.res.P .btns{justify-content:center;margin-top:auto}
.mini{position:relative;background:var(--panel);outline:3px solid var(--line)}
.mini .c{position:absolute;box-shadow:inset 0 0 0 1px var(--line)}
.mini .c.on{background:#4a4334;box-shadow:inset 0 0 0 3px var(--hi)}
.mini.none{display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:18px}
.mini .arw{position:absolute;transform:translate(-50%,-50%);background:var(--hi);box-shadow:0 0 0 2px var(--bg)}
.mini .arw::before,.mini .arw::after{content:"";position:absolute;width:0;height:0;border:9px solid transparent}
.mini .arw.h::before{right:100%;top:50%;margin-top:-9px;border-right-color:var(--hi)}
.mini .arw.h::after{left:100%;top:50%;margin-top:-9px;border-left-color:var(--hi)}
.mini .arw.v::before{bottom:100%;left:50%;margin-left:-9px;border-bottom-color:var(--hi)}
.mini .arw.v::after{top:100%;left:50%;margin-left:-9px;border-top-color:var(--hi)}
.mini .tag{position:absolute;background:var(--hi);color:var(--bg);font-size:20px;padding:1px 6px;min-width:68px;text-align:center}

/* 共有ボタン（共通の仕組みに、この作品の見た目を当てる） */
.scr .shell-share{gap:8px}
.scr .shell-share button{font-family:"DotGothic16",monospace;font-size:16px;padding:6px 12px;border-radius:0;border:2px solid var(--line);color:var(--ink);background:var(--panel)}
.scr .shell-share button:hover{border-color:var(--hi)}
.scr .shell-share .shell-done{color:var(--hi);font-size:14px}

/* タイトル */
.ttl{display:flex}
.ttl.L{padding:48px 60px;gap:56px}
.ttl.P{flex-direction:column;align-items:center;padding:44px 50px;gap:22px;text-align:center}
.ttl .tl{display:flex;flex-direction:column;gap:16px;width:470px}
.ttl .tr{display:flex;flex-direction:column;gap:16px;width:420px}
.ttl.P .tl,.ttl.P .tr{width:620px;align-items:center}
.logo{font-size:36px;line-height:1.05;color:var(--dim)}
.logo b{display:block;font-weight:normal;color:var(--ink);font-size:72px}
.ttl.P .logo{font-size:30px}
.ttl.P .logo b{font-size:76px}
.ttl.P .tl,.ttl.P .tr{gap:10px}
.logo b span{color:var(--hi)}
.tagline{font-size:21px;line-height:1.6}
.tagline em{font-style:normal;color:var(--hi)}
.ttl .startb{font-size:40px;padding:20px 0;width:100%;max-width:470px;margin-top:6px}
.ttl .startsub{color:var(--dim);font-size:16px}
.ttl .best{font-size:19px;line-height:1.6}
.ttl .best b{color:var(--hi);font-weight:normal}
.ttl .prev{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ttl.P .prev{align-items:center}
.ttl .prev .cap{color:var(--dim);font-size:16px}
.entry{border-top:2px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px;width:100%}
.entry h3{font-size:20px}
.entry .r{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ttl.P .entry .r{justify-content:center}
.entry .ex{color:var(--dim);font-size:14px}
.counts{color:var(--dim);font-size:16px}
.counts b{color:var(--ink);font-weight:normal}
.ttl .links{display:flex;gap:10px;flex-wrap:wrap}

/* 相手さがし・待機 */
.find,.wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:40px}
.find .n{font-size:150px;color:var(--hi);line-height:1}
.find p{font-size:22px}
.wait h2{font-size:44px}
.wait .num{font-size:26px}
.wait .num b{color:var(--hi);font-size:60px;font-weight:normal}
.wait .who{display:grid;grid-template-columns:repeat(2,300px);gap:8px}
.wait .who div{border:2px solid var(--line);padding:8px 12px;font-size:21px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wait .who div.me{background:var(--me);border-color:var(--dim)}
.wait .who div.empty{border-style:dashed;color:var(--dim)}
.wait .say{color:var(--dim);font-size:18px;line-height:1.6}
.wait.P .who{grid-template-columns:repeat(2,300px)}

/* 記録と設定 */
.rec{padding:36px 50px;display:flex;flex-direction:column;gap:16px;overflow:auto}
.rec h2{font-size:34px}
.rec .stats{display:flex;gap:40px;flex-wrap:wrap}
.rec .stats div{font-size:17px;color:var(--dim)}
.rec .stats b{display:block;font-weight:normal;font-size:40px;color:var(--ink)}
.rec table{border-collapse:collapse;font-size:18px;width:100%;max-width:620px}
.rec td{border-bottom:2px solid var(--line);padding:5px 8px}
.rec td:last-child{text-align:right}
.rec .set{display:flex;gap:14px;align-items:center;font-size:20px;flex-wrap:wrap}
.rec .how{color:var(--dim);font-size:16px;line-height:1.7;max-width:900px}
.rec .how b{color:var(--ink);font-weight:normal}
.rec .on{background:var(--hi);color:var(--bg);border-color:var(--hi)}