/* 門松の松葉の地・墨・藍。地は中間の緑（HSL 93°/39%/72%）、藍（目隠しの手ぬぐい）はボタン・強調の字・小さな印。紅は顔の部品だけ。目隠しの盤は濃藍、木（--wood）は盤の額縁 */
/* --shu は名前だけ前のまま（強調の色。中身は藍） */
:root{--bg:#b4d39a;--card:#cbe0b8;--ink:#1b2614;--shu:#23356b;--night:#222f4e;--mute:#33461f;--line:#6f8f55;--wood:#6e5238}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
.shell-stage{background:var(--bg);color:var(--ink)}
#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}
p{margin:0}
#cd,.stamp{font-family:"Yuji Syuku",serif;font-weight:400}

/* ホーム（shell.home）。絵は CPU 同士のデモ（見せるだけで押せない） */
/* 題字: お多福の頬に筆で書いた字（SVG。76px の高さいっぱい） */
.fw-logo{display:block;height:76px;width:auto}
/* 帯は和紙の地に細い罫（ボタンの見た目は共通のまま） */
.sh-bar{background:var(--bg);border-bottom:2px solid var(--line)}
.fw-bd{position:absolute;inset:0;width:100%;height:100%}
/* デモの盤と顔を置く盤は木の額縁（outline なので盤の大きさは変わらない） */
.fw-home .sh-art{background:var(--night);outline:4px solid var(--wood);outline-offset:-4px;pointer-events:none}
.fw-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.fw-home .sh-info{overflow-y:auto}
.fw-home .sh-foot{flex-wrap:wrap}
/* 小さなウィンドウ（shell.panel）で開く中身。札が多いときは折り返す */
.sh-tabs{flex-wrap:wrap}
.fw-book{display:flex;flex-direction:column;gap:10px}
.fw-rank{display:flex;flex-direction:column;gap:10px}
.fw-rank .lab{width:auto;margin:6px 0 0}
.fw-rank>.sub{margin:0;font-size:16px;color:var(--ui-sub)}
.fw-me{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fw-me div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px}
.fw-me div+div{border-left:2px solid var(--line)}
.fw-me b{font-family:"Yuji Syuku",serif;font-weight:400;font-size:36px;line-height:1.1;color:var(--shu)}
.fw-me span{font-size:15px;color:var(--mute);text-align:center}
.fw-wk{margin:0;padding:0;list-style:none;font-size:18px}
.fw-wk li{display:flex;justify-content:space-between;gap:16px;padding:3px 10px;border-radius:6px}
.fw-wk li.me{background:var(--ui-chip);font-weight:700}
.fw-book .sub{margin:0;font-size:16px;color:var(--ui-sub)}
.land .fw-book .grid,.port .fw-book .grid{position:static;width:auto;height:auto;justify-content:flex-start}
.fw-opts{display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.fw-opts .chip canvas{width:48px;height:48px}
.fw-opts .chip{font-size:16px}
.fw-theme .lab{width:auto;margin-bottom:6px}
.hint{font-size:16px;color:var(--mute);margin:-6px 0 0 84px;line-height:1.4}
.fw-more{display:flex;flex-direction:column;gap:10px}
.fw-zoom{display:flex;flex-direction:column;align-items:center;gap:10px}
#z-face{width:340px;height:340px;border-radius:6px}
.z-cap{font-size:20px;text-align:center}
/* 結果（shell.result）に並べる顔 */
.fw-res-faces{display:flex;gap:16px;justify-content:center}
.fw-res-faces .card{width:170px;cursor:default}
.sh-port .fw-res-faces .card{width:260px}
.vkey{font-size:22px;color:var(--ink);font-weight:700}
.row{display:flex;align-items:center;gap:8px}
.lab{width:76px;flex:none;font-size:20px;font-weight:700}
.t-theme .lab{width:auto;margin-bottom:6px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
/* お題: 顔の絵＋名前 */
.themes{flex-wrap:nowrap;gap:8px}
.chip{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 8px;border:2px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font:inherit;font-size:19px;font-weight:700;cursor:pointer}
.chip canvas{width:64px;height:64px;border-radius:4px}
.chip[aria-pressed="true"]{border-color:var(--shu);color:var(--shu);background:#e2eed6}
.chip:focus-visible{outline:3px solid var(--shu);outline-offset:2px}

/* 顔をつくる画面（上 64px は shell.bar、右下（縦は下）は主な操作の置き場） */
.board-wrap{position:absolute;border-radius:6px;overflow:hidden;background:var(--night);outline:4px solid var(--wood)}
#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:#f4f2ed;opacity:.85;pointer-events:none}
.panel{position:absolute}
.ph{display:flex;flex-direction:column;gap:12px}
.big{font-size:32px;font-weight:700;line-height:1.25}
.big b{color:var(--shu)}
.mid{font-size:26px;font-weight:700;line-height:1.3}
.small{font-size:18px;color:var(--mute);line-height:1.5}
.note{font-size:24px;color:var(--shu);font-weight:700;line-height:1.35}
.msg{min-height:1.5em}
.hand-row{display:flex;gap:16px;align-items:center}
#hand{width:160px;height:160px;flex:none;border:2px solid var(--wood);border-radius:6px;background:#fff;cursor:grab;touch-action:none}
#hand:active{cursor:grabbing}
.pips{font-size:20px;letter-spacing:.15em}
.row2{display:flex;gap:10px;flex-wrap:wrap}
#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%}
#board:focus-visible,.card:focus-visible{outline:3px solid var(--shu);outline-offset:2px}

.land .board-wrap{left:40px;top:76px;width:620px;height:620px}
.land .panel{left:690px;top:84px;width:360px;max-height:516px;overflow-y:auto}
.port .board-wrap{left:60px;top:76px;width:600px;height:600px}
.port .panel{left:36px;top:692px;width:648px;max-height:278px;overflow-y:auto}
.port #hand{width:130px;height:130px}
.port .ph{gap:8px}

/* 見比べ・帖 */
.head{position:absolute;left:40px;top:20px;right:40px}
#s-vote .head{top:76px}
.head b{color:var(--shu)}
/* 見比べ・帖の見出しは和紙に引いた罫で区切る */
.head{padding-bottom:6px;border-bottom:2px solid var(--line)}
.sub{font-size:18px;color:var(--mute);margin-top:4px}
.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}
.land #s-vote .grid{top:176px;height:440px}
.port #s-vote .grid{top:186px;height:760px}
.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:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card);text-align:left;display:flex;flex-direction:column;font:inherit;color:inherit;cursor:pointer}
.card canvas{display:block;width:100%;aspect-ratio:1}
.card .cap{padding:4px 8px;min-height:56px;line-height:1.3;font-size:15px}
.card .cap span{display:block;overflow-wrap:anywhere}
.card .cap i{font-style:normal;color:var(--shu);font-weight:700}
.card:disabled{opacity:.35;cursor:default}
.card.win{border:3px solid var(--shu)}
.stamp{position:absolute;top:6px;right:6px;background:var(--shu);color:#fff;font-size:22px;padding:0 8px;border-radius:6px;transform:rotate(-8deg)}
.vcount{position:absolute;top:6px;left:6px;background:var(--card);color:var(--ink);font-size:16px;font-weight:700;padding:0 8px;border-radius:4px}
.empty{font-size:20px;color:var(--mute);margin-top:40px}

/* とどいた顔 */
#vw-face{position:absolute;border-radius:6px;background:var(--night);outline:4px solid var(--wood)}
.vw-side{position:absolute;display:flex;flex-direction:column;gap:12px}
.land #vw-face{left:40px;top:56px;width:608px;height:608px}
.land .vw-side{left:676px;top:56px;width:364px}
.port #vw-face{left:60px;top:40px;width:600px;height:600px}
.port .vw-side{left:40px;top:664px;width:640px;gap:8px}