html,body{margin:0;height:100%;background:#1d2412}
.hebi{--bg:#1d2412;--lcd:#b7c46a;--ink:#24301a;--dim:#7d8c45;--hot:#d0561b;--pale:#e9e6b8;--line:#3a4a20;
  background:var(--bg);color:var(--lcd);font-family:"DotGothic16",monospace;font-size:24px;line-height:1.45;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.hebi *{box-sizing:border-box;margin:0;padding:0}
.hebi .scr{position:absolute;inset:0;padding:30px;display:grid;column-gap:30px;row-gap:14px}
.hebi .scr.P{padding:20px;font-size:28px}

/* ボタン・入力 */
.hebi button{font:inherit;color:var(--ink);background:var(--lcd);border:0;padding:10px 20px;cursor:pointer;box-shadow:0 4px 0 var(--line);border-radius:0}
.hebi button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.hebi button.sub{background:transparent;color:var(--lcd);border:3px solid var(--line);box-shadow:none;padding:7px 16px}
.hebi button.sub:active{background:var(--line)}
.hebi button.sm{font-size:.8em;padding:4px 12px}
.hebi button.big{font-size:1.4em;padding:14px 26px;width:100%}
.hebi button.sel{background:var(--lcd);color:var(--ink)}
.hebi input{font:inherit;background:var(--ink);color:var(--pale);border:3px solid var(--line);padding:6px 12px;border-radius:0;outline:none;min-width:0}
.hebi input:focus{border-color:var(--lcd)}
.hebi .shell-share button{font:inherit;font-size:.8em;border:3px solid var(--line);border-radius:0;background:transparent;color:var(--lcd);box-shadow:none;padding:4px 12px}
.hebi .shell-share .shell-done{font-size:.7em;color:var(--dim)}
.hebi .hot{color:var(--hot)}
.hebi .dim{color:var(--dim)}
.hebi kbd{font:inherit;font-size:.7em;color:var(--dim);border:2px solid var(--line);padding:0 6px;margin-left:6px}

/* 盤と上にかぶせる案内 */
.hebi .bw{grid-area:b;position:relative;align-self:start;border:6px solid var(--line);line-height:0}
.hebi canvas.board{display:block;touch-action:none}
.hebi .ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(29,36,18,.84);text-align:center;padding:30px;line-height:1.45}
.hebi .ov[hidden]{display:none}
.hebi .ov .num{font-size:200px;line-height:1;color:var(--pale)}
.hebi .ov h2{font-size:1.5em;font-weight:normal;color:var(--pale)}
.hebi .ov p{color:var(--lcd)}
.hebi .hint{position:absolute;left:0;right:0;bottom:24px;text-align:center;line-height:1.3;pointer-events:none}
.hebi .hint span{background:var(--ink);color:var(--pale);padding:6px 14px;font-size:1.05em;animation:hb 1.1s steps(2) infinite}
@keyframes hb{50%{opacity:.35}}

/* 競走の画面 */
.hebi .race{grid-template-columns:652px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"b h" "b s"}
.hebi .race.P{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;grid-template-areas:"h" "b" "s";justify-items:center}
.hebi .hud{grid-area:h;display:flex;justify-content:space-between;align-items:baseline;width:100%}
.hebi .time{font-size:76px;line-height:1;color:var(--pale)}
.hebi .time.hot{color:var(--hot)}
.hebi .score{font-size:56px;line-height:1}
.hebi .score small{font-size:.45em}
.hebi .side{grid-area:s;display:flex;flex-direction:column;gap:10px;min-height:0;width:100%}
.hebi .race.P .side{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;column-gap:20px}
.hebi .race.P .msg{grid-column:1/3}
.hebi .msg{min-height:1.5em;color:var(--pale)}
.hebi .msg.hot{color:var(--hot)}
.hebi ol.stand{list-style:none;display:flex;flex-direction:column;gap:2px;font-size:.85em;min-height:0;overflow:hidden}
.hebi ol.stand li{display:flex;align-items:center;gap:10px;padding:2px 6px}
.hebi ol.stand li.me{background:var(--lcd);color:var(--ink)}
.hebi ol.stand i{width:18px;height:18px;flex:none;outline:2px solid var(--bg)}
.hebi ol.stand b{font-weight:normal;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hebi ol.stand .rk{width:1.2em;text-align:right}
.hebi ol.stand .tg{color:var(--dim);font-size:.85em}
.hebi ol.stand li.me .tg{color:var(--line)}
.hebi ol.stand .pt{min-width:2.2em;text-align:right}
.hebi .pad{display:grid;grid-template-columns:repeat(3,92px);grid-template-rows:repeat(2,80px);gap:8px;margin-top:auto;align-self:center}
.hebi .race.P .pad{margin:0;grid-row:2;grid-column:2;align-self:end}
.hebi .pad button.padb{background:var(--ink);color:var(--lcd);border:3px solid var(--line);box-shadow:none;font-size:30px;padding:0;touch-action:none}
.hebi .pad button.padb:active{background:var(--line)}

/* 結果とリプレイ */
.hebi .result{grid-template-columns:612px 1fr;grid-template-areas:"l p"}
.hebi .result.P{grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-template-areas:"l" "p";justify-items:center}
.hebi .rleft{grid-area:l;display:flex;flex-direction:column;gap:10px}
.hebi .rctl{display:flex;align-items:center;gap:12px;font-size:.85em}
.hebi .rx{color:var(--hot)}
.hebi .rc{color:var(--pale);flex:1}
.hebi .rpanel{grid-area:p;display:flex;flex-direction:column;gap:12px;min-height:0;width:100%;overflow:hidden}
.hebi .rpanel h2{font-size:1.4em;font-weight:normal;color:var(--pale);line-height:1.2}
.hebi .rpanel .sub2{color:var(--lcd)}
.hebi ol.stand.big{font-size:.9em}
.hebi ol.stand.big li{cursor:pointer}
.hebi ol.stand.big li.on{outline:3px solid var(--hot);outline-offset:-3px}
.hebi ol.stand .fs{font-size:.75em;color:var(--hot)}
.hebi .note{font-size:.7em;color:var(--dim)}
.hebi .rank{font-size:.75em;border-top:3px solid var(--line);padding-top:6px}
.hebi .rank li{display:flex;gap:10px}
.hebi .rank li b{font-weight:normal;flex:1}
.hebi .rank li.me{color:var(--pale)}
.hebi .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hebi .result .row.end{margin-top:auto}

/* タイトル */
.hebi .title{grid-template-columns:612px 1fr;grid-template-areas:"b s"}
.hebi .title.P{grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-template-areas:"b" "s";justify-items:center}
.hebi .title .bw{cursor:pointer}
.hebi .tpanel{grid-area:s;display:flex;flex-direction:column;gap:14px;width:100%;min-height:0}
.hebi .tpanel h1{font-size:50px;font-weight:normal;line-height:1.05;color:var(--pale);letter-spacing:.02em}
.hebi .title.P .tpanel h1{font-size:64px}
.hebi .lead{font-size:.85em}
.hebi .best{font-size:.8em;color:var(--dim)}
.hebi .party{border-top:3px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.hebi .party h3{font-weight:normal;font-size:.8em;color:var(--dim)}
.hebi .party .row label{white-space:nowrap}
.hebi .party input{width:6.5em;letter-spacing:.15em;text-align:center}
.hebi .cnt{font-size:.75em;color:var(--dim)}
.hebi .nav{display:flex;gap:10px;margin-top:auto}
.hebi .title.P .party{flex-direction:row;flex-wrap:wrap;column-gap:20px}
.hebi .title.P .party h3,.hebi .title.P .party .cnt{width:100%}
.hebi .party .invite{font-size:.85em}
.hebi .party .invite[hidden]{display:none}
.hebi .title.P .party .invite{width:100%}

/* 記録・設定・遊び方・相手さがし */
.hebi .page{display:flex;flex-direction:column;gap:18px;padding:50px 70px}
.hebi .page.P{padding:50px 40px}
.hebi .page h2{font-size:1.6em;font-weight:normal;color:var(--pale)}
.hebi .page dl{display:grid;grid-template-columns:auto 1fr;gap:6px 30px}
.hebi .page dt{color:var(--dim)}
.hebi .page dd{color:var(--pale)}
.hebi .page table{border-collapse:collapse;font-size:.85em}
.hebi .page td{padding:2px 24px 2px 0}
.hebi .page ol.rules{padding-left:1.4em;display:flex;flex-direction:column;gap:8px}
.hebi .page ol.rules b{color:var(--pale);font-weight:normal}
.hebi .page .back{margin-top:auto;align-self:flex-start}
.hebi .set{display:grid;grid-template-columns:7em 1fr;gap:16px 20px;align-items:center}
.hebi .set input{width:10em}
.hebi .big2{font-size:2.6em;color:var(--pale);line-height:1.1}
.hebi .wait{display:flex;flex-direction:column;gap:6px;font-size:.85em}
.hebi .wait li{list-style:none}