:root{--paper:#f4efe3;--ink:#1d1a16;--me:#c8361d;--mute:#8a8270;--rule:#d8d0bd;--cell:#fffdf7}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#e6dfcf;color:var(--ink);font-family:"Zen Kaku Gothic New",sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation;overflow:hidden}
.shell-stage{background:var(--paper)}
#app{position:absolute;inset:0;font-size:24px}
button{font:inherit;font-weight:900;background:none;border:2px solid var(--ink);color:var(--ink);padding:8px 18px;cursor:pointer;border-radius:0}
button:hover{background:var(--ink);color:var(--paper)}
button:disabled{opacity:.35;cursor:default;background:none;color:var(--ink)}
button.fill{background:var(--ink);color:var(--paper)}
button.red{background:var(--me);border-color:var(--me);color:#fff}
input{font:inherit;font-weight:900;border:2px solid var(--ink);background:var(--cell);padding:8px 12px;color:var(--ink);border-radius:0;width:100%;-webkit-user-select:text;user-select:text}
.mk{display:inline-block;width:.6em;height:.6em;margin-right:.25em;vertical-align:.05em}
.scr{position:absolute;inset:0}

/* 遊ぶ画面 */
.play{display:grid;--gs:600px}
.land .play{grid-template-columns:600px 1fr;grid-template-rows:auto auto 1fr auto;grid-template-areas:"board head" "board tbar" "board list" "board foot";padding:36px 40px;column-gap:36px}
.port .play{--gs:648px;grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"head" "tbar" "board" "list" "foot";padding:28px 36px 28px}
.board{grid-area:board;position:relative}
.head{grid-area:head;border-bottom:3px double var(--ink);padding-bottom:8px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.head .mode{font-size:22px;letter-spacing:.06em}
.head .odai{font-size:22px}
.head .odai b{font-size:34px;font-weight:900;border-bottom:4px solid var(--me);margin-left:6px}
.tbar{grid-area:tbar;display:flex;justify-content:space-between;align-items:center;margin:10px 0 6px;gap:12px}
.time{font-size:56px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.time.low{color:var(--me)}
.scores{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 16px;font-size:20px}
.scores b{font-weight:900;font-size:26px;margin-left:4px}
.scores .me{font-weight:900}
.list{grid-area:list;list-style:none;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px 20px;font-size:26px;border-top:1px solid var(--ink);padding-top:10px;margin-top:4px;overflow:hidden}
.port .list{font-size:28px}
.list li{font-weight:500;white-space:nowrap}
.list li.mine{text-decoration:line-through;text-decoration-color:var(--me);text-decoration-thickness:4px;color:var(--mute)}
.list li.taken{color:var(--mute)}
.list li.taken::after{content:"";display:inline-block;width:.5em;height:.5em;margin-left:4px;background:var(--c);vertical-align:.1em}
.foot{grid-area:foot;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center;padding-top:10px}
.foot .note{font-size:18px;color:var(--mute);margin-right:auto}
.online{color:var(--ink);font-weight:900;font-variant-numeric:tabular-nums}
.stamps{display:flex;gap:6px;margin-right:auto}
.stamps button{font-size:17px;padding:4px 10px;border-width:1px}

.grid{width:var(--gs);height:var(--gs);display:grid;grid-template-columns:repeat(9,1fr);border:3px solid var(--ink);background:var(--cell);touch-action:none;position:relative}
.c{display:flex;align-items:center;justify-content:center;font-size:calc(var(--gs) / 9 * .56);font-weight:900;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);position:relative;transition:background-color .25s}
.c:nth-child(9n){border-right:0}
.c:nth-child(n+73){border-bottom:0}
.c.tint{background:var(--t)}
.c.mine{background:var(--me);color:#fff}
.c.sel{background:var(--ink);color:var(--paper);transition:none}
.c.cur{outline:4px solid var(--me);outline-offset:-4px;z-index:1}
.c.pend{outline:4px dashed var(--ink);outline-offset:-5px}
.c.pop{animation:pop .45s}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
.hint{height:40px;line-height:40px;font-size:22px;text-align:center;white-space:nowrap;overflow:hidden}
.hint.bad{color:var(--me)}
.cover{position:absolute;left:0;top:0;width:var(--gs);height:var(--gs);display:flex;align-items:center;justify-content:center;flex-direction:column;background:rgba(244,239,227,.72);font-weight:900;pointer-events:none;text-align:center}
.cover .n{font-size:200px;line-height:1}
.cover .s{font-size:30px}
.start-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ink);color:var(--paper);font-weight:900;font-size:30px;padding:14px 26px;pointer-events:none;white-space:nowrap;animation:breath 1.6s ease-in-out infinite}
@keyframes breath{50%{opacity:.75}}

.toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-weight:900;font-size:22px;padding:8px 18px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;z-index:5}
.toast.on{opacity:1}

/* 結果 */
.res{position:absolute;inset:0;background:rgba(29,26,22,.92);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 40px;text-align:center;z-index:4}
.res .big{font-size:150px;font-weight:900;letter-spacing:.08em;line-height:1.05;transform:scale(.3);opacity:0;animation:big .5s cubic-bezier(.2,1.6,.4,1) .05s forwards}
.res .big.win{color:#fff;text-shadow:8px 8px 0 var(--me)}
.res .big.sm{font-size:96px}
@keyframes big{to{transform:scale(1);opacity:1}}
.res .sub{font-size:26px;margin-top:8px}
.res .sub b{font-size:34px}
.res table{margin:14px auto 6px;font-size:22px;border-collapse:collapse;min-width:380px}
.res td{padding:4px 12px;border-bottom:1px solid #5a554b;text-align:left}
.res td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.res tr.me td{color:#fff;font-weight:900;background:rgba(200,54,29,.45)}
.res .rk{font-size:18px;color:#c9c1ad;min-height:26px}
.res .btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.res button{border-color:var(--paper);color:var(--paper)}
.res button:hover,.res button.fill{background:var(--paper);color:var(--ink)}
.res .share{margin-top:12px;display:flex;justify-content:center}
.shell-share{justify-content:center}
.shell-share button{font-family:inherit;font-weight:900;font-size:18px;border-radius:0;border:2px solid currentColor;padding:6px 14px}
.shell-share button:hover{color:var(--me);background:var(--paper)}
.land .head{flex-direction:column;align-items:flex-start;gap:2px}
.head small{font-size:18px;color:var(--mute)}
.land .tbar{flex-wrap:wrap}
.scores{flex:1 1 180px}
.land .scores{justify-content:flex-start}
.foot button{font-size:20px;padding:6px 14px}
.land .themes{grid-template-columns:repeat(7,1fr)}
.prac{display:flex;flex-wrap:wrap;gap:4px 18px}
.prac b{font-weight:900}
.shell-share .shell-done{font-size:16px}

/* 文書の形の画面（部屋・記録・設定） */
.page{padding:44px 56px;display:flex;flex-direction:column;gap:20px;overflow:hidden}
.port .page{padding:44px 40px}
.page h2{font-size:44px;font-weight:900;letter-spacing:.08em;border-bottom:3px double var(--ink);padding-bottom:8px;display:flex;justify-content:space-between;align-items:baseline}
.page h2 small{font-size:22px;font-weight:500}
.page h3{font-size:26px;font-weight:900;margin-bottom:8px}
.page p{font-size:22px;line-height:1.6}
.page .muted{color:var(--mute);font-size:20px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 44px}
.port .cols{grid-template-columns:1fr}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.port .themes{grid-template-columns:repeat(4,1fr)}
.themes button{font-size:20px;padding:8px 4px;border-width:1px}
.themes button.on{background:var(--ink);color:var(--paper)}
.code{font-size:96px;font-weight:900;letter-spacing:.14em;line-height:1;font-variant-numeric:tabular-nums}
.seats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:24px}
.seats li{border-bottom:1px solid var(--rule);padding:4px 0}
.seats li.me{font-weight:900}
.back{position:absolute;right:56px;top:44px}
.port .back{right:40px}
.msg{min-height:30px;font-size:22px;color:var(--me);font-weight:900}
.ask{border:3px solid var(--ink);padding:16px 20px;background:var(--cell)}
.tbl{width:100%;border-collapse:collapse;font-size:22px}
.tbl td{padding:4px 8px;border-bottom:1px solid var(--rule)}
.tbl td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.me td{font-weight:900;color:var(--me)}
.toggle{min-width:110px}