:root{--paper:#f3ead7;--sumi:#1d1a16;--shu:#c0392b;--night:#151210;--mute:#6b604f}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#2b241d}
.shell-stage{background:var(--paper);color:var(--sumi);font-family:"Shippori Mincho",serif}
#app{position:absolute;inset:0;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.screen{position:absolute;inset:0}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
p{margin:0}
.onl{margin-top:10px}
.onl .online{flex:1;margin-top:0;font-size:19px;padding-left:6px;padding-right:6px}
.cnt{margin:6px 0 0;font-size:15px;color:var(--mute);min-height:1.2em}
.cnt b{color:var(--sumi);font-weight:700}
h1,h2,.big,.mid,.who,.go,.open,#cd,.stamp{font-family:"Yuji Syuku",serif;font-weight:400}

.btn{border:2px solid var(--sumi);background:transparent;padding:8px 18px;font-size:19px;line-height:1.3}
.btn:hover{background:rgba(29,26,22,.08)}
.btn.main{background:var(--sumi);color:var(--paper)}
.btn.shu{background:var(--shu);border-color:var(--shu);color:var(--paper)}
.btn.light{border-color:var(--paper);color:var(--paper)}
.btn.wide{width:100%}
.btn:focus-visible,.card:focus-visible,#board:focus-visible{outline:3px solid var(--shu);outline-offset:2px}

/* はじめの画面 */
#t-face{position:absolute;border:4px solid var(--sumi);background:var(--night);cursor:pointer}
.t-side{position:absolute}
.land #t-face{left:44px;top:56px;width:608px;height:608px}
.land .t-side{left:690px;top:40px;width:360px}
.port #t-face{left:150px;top:28px;width:420px;height:420px}
.port .t-side{left:60px;top:468px;width:600px}
h1{margin:0;font-size:96px;letter-spacing:.12em;line-height:1.1}
h1 em{font-style:normal;color:var(--shu)}
.land h1{font-size:84px}
.port h1{font-size:76px;display:inline-block}
.land .how{font-size:14px;line-height:1.5}
.lead{font-size:19px;margin:4px 0 14px}
.row{display:flex;align-items:center;gap:8px;margin:8px 0}
.lab{width:64px;flex:none;font-size:18px}
.pm{width:42px;height:42px;border:2px solid var(--sumi);background:transparent;font-size:24px;line-height:1;padding:0}
#pn{font-size:30px;min-width:32px;text-align:center;font-family:"Yuji Syuku",serif;font-weight:400}
.unit{font-size:18px}
.seg{display:flex;flex-wrap:wrap}
.seg button{border:2px solid var(--sumi);background:transparent;padding:5px 10px;font-size:17px;margin:0 -2px -2px 0}
.seg button[aria-pressed="true"]{background:var(--sumi);color:var(--paper)}
.go{width:100%;font-size:34px;padding:10px;margin-top:12px;letter-spacing:.3em}
.subrow{display:flex;gap:10px;margin-top:10px}
.online{margin-top:10px;font-size:20px}
.subrow .btn{font-size:16px;padding:5px 14px}
.how{margin:14px 0 0;padding-left:1.4em;font-size:15px;color:var(--mute);line-height:1.6}
.port .how{margin-top:10px}

/* 顔をつくる画面 */
.who{position:absolute;font-size:30px;white-space:nowrap}
.who b{font-weight:400;color:var(--shu)}
#p-theme{font-size:22px;font-family:"Shippori Mincho",serif}
.board-wrap{position:absolute;border:4px solid var(--sumi);background:var(--night)}
#board{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#cd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:200px;color:var(--paper);opacity:.85;pointer-events:none}
.panel{position:absolute}
.ph{display:flex;flex-direction:column;gap:14px}
.big{font-size:34px;line-height:1.25}
.big b{font-weight:400;color:var(--shu)}
.mid{font-size:26px;line-height:1.3}
.small{font-size:16px;color:var(--mute);line-height:1.6}
.note{font-size:26px;color:var(--shu);font-weight:700;line-height:1.35}
.msg{min-height:1.6em}
.hand-row{display:flex;gap:16px;align-items:center}
#hand{width:180px;height:180px;flex:none;border:2px solid var(--sumi);background:#fbf3e6;cursor:grab;touch-action:none}
#hand:active{cursor:grabbing}
.pips{font-size:20px;letter-spacing:.15em;color:var(--sumi)}
.open{font-size:52px;padding:14px;letter-spacing:.3em}
.row2{display:flex;gap:10px;flex-wrap:wrap}
.quit{position:absolute;font-size:15px;padding:4px 12px}
#ghost{position:absolute;left:0;top:0;width:240px;height:240px;margin:-120px 0 0 -120px;pointer-events:none;opacity:.75;z-index:5}
#ghost canvas{width:100%;height:100%}

.land .who{left:716px;top:40px}
.land .board-wrap{left:40px;top:36px;width:648px;height:648px}
.land .panel{left:716px;top:110px;width:330px}
.land .quit{left:716px;bottom:36px}
.port .who{left:40px;top:26px}
.port .board-wrap{left:36px;top:80px;width:648px;height:648px}
.port .panel{left:40px;top:752px;width:640px}
.port .quit{right:40px;top:26px}
.port #hand{width:150px;height:150px}
.port .ph{gap:10px}

/* 見比べ・帖 */
.head{position:absolute;left:40px;top:22px;margin:0;font-size:36px;white-space:nowrap}
.head b{font-weight:400;color:var(--shu)}
.sub{position:absolute;left:40px;top:78px;font-size:18px}
.sub b{color:var(--shu)}
.grid{position:absolute;left:40px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-content:flex-start}
.land .grid{top:122px;width:1000px;height:480px}
.port .grid{top:130px;width:640px;height:720px}
.foot{position:absolute;left:40px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.land .foot{top:620px;width:1000px}
.port .foot{top:872px;width:640px}
.card{position:relative;padding:0;border:2px solid var(--sumi);background:var(--paper);text-align:left;display:flex;flex-direction:column}
.card canvas{display:block;width:100%;aspect-ratio:1}
.card .cap{padding:3px 6px;height:50px;overflow:hidden;line-height:1.35;font-size:14px}
.card .cap span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .cap i{font-style:normal;color:var(--shu);font-weight:700}
.card:disabled{opacity:.35}
.card.win{border-color:var(--shu);box-shadow:0 0 0 4px var(--shu)}
.stamp{position:absolute;top:6px;right:6px;background:var(--shu);color:var(--paper);font-size:22px;padding:0 8px;transform:rotate(-8deg)}
.vcount{position:absolute;top:6px;left:6px;background:var(--sumi);color:var(--paper);font-size:15px;padding:0 6px}
.empty{font-size:20px;color:var(--mute);margin-top:40px}
#zoom{position:absolute;inset:0;background:rgba(21,18,16,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--paper);z-index:6}
#z-face{width:520px;height:520px;border:4px solid var(--paper)}
.port #z-face{width:600px;height:600px}
.z-cap{font-size:20px;text-align:center}
#zoom .msg{color:var(--paper)}

/* 部屋（オンライン） */
.net{position:absolute;right:40px;top:6px;margin:0;font-size:15px;color:var(--shu)}
.r-body{position:absolute;left:40px;top:130px;width:620px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.port .r-body{top:150px;width:640px}
#r-entry,#r-in,#r-find{width:100%;display:flex;flex-direction:column;gap:12px}
#r-code{font:inherit;font-size:24px;width:220px;padding:6px 10px;border:2px solid var(--sumi);background:var(--paper);color:var(--sumi);border-radius:0;letter-spacing:.1em;text-transform:uppercase}
#r-code:focus{outline:3px solid var(--shu);outline-offset:2px}
#r-show{letter-spacing:.15em}
.mem{margin:0;padding-left:1.6em;columns:2;column-gap:30px;font-size:19px;line-height:1.7}
.mem b{color:var(--shu);font-weight:700}
#r-in .go{margin-top:4px}
#o-share .shell-share button{font-size:15px;padding:4px 10px}

/* とどいた顔 */
#vw-face{position:absolute;border:4px solid var(--sumi);background:var(--night)}
.vw-side{position:absolute;display:flex;flex-direction:column;gap:14px}
.vw-side h2{margin:0}
.land #vw-face{left:44px;top:56px;width:608px;height:608px}
.land .vw-side{left:690px;top:56px;width:350px}
.port #vw-face{left:60px;top:40px;width:600px;height:600px}
.port .vw-side{left:60px;top:664px;width:600px;gap:10px}

/* 共有ボタン（中の仕組みは共通、見た目はこの作品） */
.shell-share{gap:10px}
.shell-share button{border:2px solid var(--sumi);border-radius:0;font-family:"Shippori Mincho",serif;font-size:17px;padding:6px 14px;background:transparent;color:var(--sumi)}
.shell-share button:hover{background:rgba(29,26,22,.08)}
.shell-share .shell-done{font-size:15px;color:var(--mute)}