:root{--bg:#0b0b08;--ink:#e8e2c8;--dim:#6d6a55;--amber:#ffb000;--red:#ff3b2f;--line:#2a281e}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:'DotGothic16',monospace;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.shell-stage{background:var(--bg)}
.cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block}

/* 枠の中の画面（座標は 1080×720 / 720×1080 のまま） */
.ui{position:absolute;inset:0;pointer-events:none}
.ui section,.ui button,.ui input,.ui label{pointer-events:auto}
.ui h1,.ui h2,.ui p{margin:0;font-weight:normal}
.ui button{font:inherit;color:var(--ink);background:transparent;border:2px solid var(--ink);border-radius:0;padding:8px 18px;font-size:22px;cursor:pointer}
.ui button:hover{border-color:var(--amber);color:var(--amber)}
.ui button:active{transform:translateY(2px)}
.ui button.go{background:var(--amber);border-color:var(--amber);color:var(--bg);font-size:36px;padding:14px 0;width:100%}
.ui button.go:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ui input{font:inherit;font-size:24px;background:#000;color:var(--amber);border:2px solid var(--dim);border-radius:0;padding:8px 12px;width:100%;user-select:text;-webkit-user-select:text}
.ui input:focus{outline:none;border-color:var(--amber)}
.ui input::placeholder{color:var(--dim);font-size:18px}
.ui nav{display:flex;gap:12px}
.ui nav button{flex:1;font-size:20px}
.ui .lbl{font-size:18px;color:var(--dim);margin-top:6px}
.ui .sub{font-size:17px;color:var(--dim);line-height:1.6}
.blink{animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

/* 左右の柱（横の枠）／上下の帯（縦の枠） */
.col{position:absolute;display:flex;flex-direction:column;gap:14px;padding:40px 32px;background:rgba(11,11,8,.9)}
.col.a{left:0;top:0;bottom:0;width:337px;border-right:2px solid var(--line)}
.col.b{right:0;top:0;bottom:0;width:337px;border-left:2px solid var(--line)}
.pt .col{padding:24px 32px;gap:10px}
.pt .col.a{left:0;right:0;bottom:auto;width:auto;border:0;border-bottom:2px solid var(--line)}
.pt .col.b{left:0;right:0;top:auto;width:auto;border:0;border-top:2px solid var(--line)}

/* タイトル */
.s-title h1{font-size:34px;line-height:1.15;color:var(--ink)}
.s-title h1 b{display:block;font-weight:normal;font-size:52px;color:var(--amber)}
.s-title .lead{font-size:20px;line-height:1.6}
.s-title .best{font-size:18px;color:var(--dim)}
.s-title .best b{color:var(--amber);font-weight:normal;font-size:24px}
.s-title h2{font-size:24px;color:var(--amber)}
.s-title .code{display:flex;gap:8px}
.s-title .code button{flex:none}
.s-title .code input{flex:1;min-width:0}
.s-title .wide{width:100%}
.s-title .cnt{font-size:17px;color:var(--ink);border-top:1px solid var(--line);padding-top:10px}
.s-title .col.b nav{margin-top:auto}
.pt.s-title .col.a,.pt .s-title .col.a{display:grid;grid-template-columns:1fr 1fr;align-items:end;column-gap:24px}
.pt .s-title .col.a h1{grid-column:1;grid-row:1/3}
.pt .s-title .col.a .lead{grid-column:2;grid-row:1}
.pt .s-title .col.a .go{grid-column:1/3}
.pt .s-title .col.a .sub{grid-column:1}
.pt .s-title .col.a .best{grid-column:2}
.pt .s-title .col.b nav{margin-top:4px}

/* 遊んでいる最中 */
.ui .quit,.ui .skip{position:absolute;font-size:18px;padding:6px 14px;border-color:var(--dim);color:var(--dim);background:rgba(0,0,0,.6)}
.ui .quit{left:20px;bottom:20px}
.ui .skip{left:20px;bottom:70px}
.pt .quit{left:auto;right:4px;bottom:8px;padding:6px 8px}
.pt .skip{left:4px;bottom:8px;padding:6px 8px}
.ui .skip[hidden]{display:none}

/* 結果 */
.s-result .k{font-size:22px;color:var(--dim)}
.s-result .rk{font-size:30px}
.s-result .rk b{font-size:110px;font-weight:normal;color:var(--amber);line-height:1}
.s-result .rk small,.s-result .tm small{font-size:24px;color:var(--dim)}
.s-result .tm{font-size:56px;color:var(--ink);line-height:1}
.s-result .nb{font-size:18px;color:var(--amber)}
.s-result .nr{font-size:17px;color:var(--dim)}
.s-result h2{font-size:22px;color:var(--dim)}
.order,.rank{list-style:none;margin:0;padding:0;font-size:22px}
.order li,.rank li{display:flex;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line)}
.order li i{width:14px;height:14px;flex:none}
.order li span:last-child,.rank li span:last-child{margin-left:auto}
.order li.me,.rank li.me{color:var(--amber)}
.s-result .col.b .go{margin-top:auto}
.pt .s-result .col.a{display:grid;grid-template-columns:auto 1fr;column-gap:24px;row-gap:6px;align-items:end}
.pt .s-result .col.a .k{grid-column:1/3}
.pt .s-result .col.a .rk b{font-size:88px}
.pt .s-result .col.a .nb,.pt .s-result .col.a .nr,.pt .s-result .col.a #share{grid-column:1/3}
.pt .s-result .order{font-size:20px}
.pt .s-result .order li{padding:3px 0}

/* 共有ボタン（作品の見た目に合わせる） */
.ui .shell-share{gap:8px;margin-top:4px}
.ui .shell-share button{font-family:inherit;font-size:17px;padding:6px 12px;border:2px solid var(--dim);border-radius:0;color:var(--ink);background:transparent}
.ui .shell-share button:hover{border-color:var(--amber);color:var(--amber)}
.ui .shell-share .shell-done{color:var(--amber);font-size:15px}

/* 真ん中の箱（だれかと遊ぶ・ランキング・設定） */
.s-match,.s-rank,.s-set{background:rgba(0,0,0,.72);pointer-events:auto}
.box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:600px;max-width:92%;max-height:92%;overflow:auto;display:flex;flex-direction:column;gap:16px;padding:32px 40px;background:var(--bg);border:2px solid var(--amber)}
.box h2{font-size:30px;color:var(--amber)}
.box p{font-size:20px;line-height:1.6}
.box p b{color:var(--amber);font-weight:normal}
.box .big{font-size:30px}
.box > button{align-self:center;min-width:240px}
.rank{max-height:440px;overflow:auto}
.rank li span:first-child{width:3.2em;color:var(--dim)}
.tg{display:flex;gap:14px;align-items:center;font-size:22px;cursor:pointer}
.tg input{appearance:none;-webkit-appearance:none;width:30px;height:30px;padding:0;border:2px solid var(--ink);background:#000;flex:none;cursor:pointer}
.tg input:checked{background:var(--amber);border-color:var(--amber);box-shadow:inset 0 0 0 5px #000}