/* 落として四つ並べ: 生成りの紙・木の盤・朱と墨のコマ。座標は枠の中の px（1080×720 / 720×1080） */
:root{--paper:#efe6d2;--paper2:#e3d6b9;--ink:#2b2118;--shu:#c8361d;--sumi:#2b2118;--wood:#a8743f;--woodD:#7a4f26;--gold:#d9a400}
html,body{margin:0;height:100%}
body{background:#d8cab0;color:var(--ink);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation;overscroll-behavior:none}
.shell-stage{background:var(--paper)}

.k4-view{position:absolute;left:0;top:0;font-family:"Zen Maru Gothic",sans-serif;color:var(--ink);background:var(--paper);overflow:hidden;user-select:none;-webkit-user-select:none}
.k4-view *{box-sizing:border-box}
.k4-head,.k4-foot{position:absolute;display:flex;flex-direction:column;gap:12px}
.k4-dot{display:inline-block;flex:none;width:.9em;height:.9em;border-radius:50%;vertical-align:-.08em;margin-right:.35em;box-shadow:inset 0 -3px 0 rgba(0,0,0,.28)}
.k4-d1{background:var(--shu)}
.k4-d2{background:var(--sumi)}

/* 上の欄 */
.k4-title{margin:0;font-family:"Dela Gothic One","Zen Maru Gothic",sans-serif;font-weight:400;font-size:34px;letter-spacing:.06em;line-height:1.1}
.k4-vs{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;flex-wrap:wrap}
.k4-vs em{font-style:normal;font-size:16px;opacity:.6}
.k4-turn{display:flex;align-items:center;font-size:40px;font-weight:900;line-height:1.15;padding:10px 0;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.k4-turn b{font-weight:900}
.k4-think .k4-dot{animation:k4blink .8s ease-in-out infinite alternate}
@keyframes k4blink{to{opacity:.25}}
.k4-tip{margin:0;font-size:19px;line-height:1.55;font-weight:500;min-height:2.6em}
.k4-count{font-size:16px;font-weight:700;opacity:.7;margin-top:auto}
.k4-res{font-family:"Dela Gothic One","Zen Maru Gothic",sans-serif;font-size:50px;line-height:1.15;padding:8px 0;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.k4-r1{color:var(--shu)}
.k4-sharebox{margin-top:auto}

/* ボタン: 四角・太い墨の線・下に影 */
.k4-btn{font:inherit;font-size:24px;font-weight:900;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:3px;box-shadow:0 5px 0 var(--ink);padding:8px 14px;min-height:60px;cursor:pointer;line-height:1.15;transition:transform .05s}
.k4-btn small{font-size:.66em;font-weight:700}
.k4-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.k4-btn:disabled{opacity:.35;cursor:default}
.k4-btn:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
.k4-main{background:var(--shu);color:var(--paper)}
.k4-sel{background:var(--ink);color:var(--paper)}
.k4-land .k4-foot .k4-btn{flex:1}
.k4-port .k4-foot{flex-direction:row;align-items:stretch;padding-bottom:8px}
.k4-port .k4-foot .k4-btn{flex:1;font-size:26px;min-height:96px}

/* 共有ボタンを作品の形に */
.k4-view .shell-share{gap:10px}
.k4-view .shell-share button{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:18px;padding:8px 14px;border:3px solid var(--ink);border-radius:3px;background:var(--paper);color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.k4-view .shell-share button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.k4-view .shell-share .shell-done{font-size:15px}

/* 縦の上の欄 */
.k4-port .k4-head{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:8px;align-content:start}
.k4-port .k4-title{font-size:28px}
.k4-port .k4-count{grid-column:2;grid-row:1;align-self:center;margin:0;font-size:15px}
.k4-port .k4-vs{grid-column:1/3;font-size:20px}
.k4-port .k4-turn{grid-column:1/3;font-size:36px;padding:6px 0}
.k4-port .k4-tip{grid-column:1/3;font-size:18px;min-height:0}
.k4-port .k4-res{grid-column:1/3;font-size:40px;padding:4px 0}
.k4-port .k4-sharebox{grid-column:1/3;margin:0}

/* 盤 */
.k4-board{position:absolute}
.k4-back{position:absolute;left:0;width:100%;background:var(--paper2)}
.k4-layer{position:absolute;inset:0;overflow:hidden}
.k4-frame{position:absolute;left:0;display:block;pointer-events:none;filter:drop-shadow(0 7px 0 var(--woodD))}
.k4-wood{fill:var(--wood)}
.k4-rim{fill:none;stroke:var(--woodD);stroke-width:3}
.k4-edge{fill:none;stroke:var(--woodD);stroke-width:4}
.k4-p{position:absolute;width:78px;height:78px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.28),inset 0 0 0 9px rgba(0,0,0,.08)}
.k4-p1{background:var(--shu)}
.k4-p2{background:var(--sumi);box-shadow:inset 0 -6px 0 rgba(0,0,0,.5),inset 0 0 0 9px rgba(255,255,255,.07)}
.k4-ghost{opacity:.45}
.k4-bob{animation:k4bob .9s ease-in-out infinite alternate}
@keyframes k4bob{from{transform:translateY(-6px)}to{transform:translateY(8px)}}
.k4-hit{position:absolute;top:0;height:100%;cursor:default}
.k4-on .k4-hit{cursor:pointer}
.k4-on .k4-hit.k4-cur{background:rgba(255,255,255,.18)}
.k4-mark{position:absolute;display:flex;align-items:center;justify-content:center;font-size:62px;font-weight:900;line-height:1;pointer-events:none;color:var(--gold);text-shadow:0 3px 0 var(--ink)}
.k4-mark.k4-bad{color:var(--shu)}
.k4-win{animation:k4win .55s ease-in-out infinite alternate;outline:6px solid var(--gold);outline-offset:3px}
@keyframes k4win{from{transform:scale(1)}to{transform:scale(.84)}}
.k4-done .k4-p:not(.k4-win):not(.k4-ghost){filter:saturate(.55) brightness(1.08)}

/* 決着の判子 */
.k4-stamp{position:absolute;z-index:15;pointer-events:none;font-family:"Dela Gothic One","Zen Maru Gothic",sans-serif;font-size:150px;line-height:1;padding:22px 30px;border:12px solid currentColor;background:rgba(239,230,210,.86);white-space:nowrap;transform:translate(-50%,-50%) rotate(-8deg);animation:k4stamp 1.9s cubic-bezier(.2,.9,.3,1) forwards}
.k4-s1{color:var(--shu)}
.k4-s2{color:var(--sumi)}
@keyframes k4stamp{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.3)}
  16%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
  21%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.06)}
  27%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
  78%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.96)}}

/* 重ねる画面 */
.k4-ov{position:absolute;inset:0;z-index:20;background:rgba(43,33,24,.58);display:flex;align-items:center;justify-content:center}
.k4-panel{background:var(--paper);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:28px 32px;display:flex;flex-direction:column;gap:14px;max-height:96%;overflow:auto}
.k4-panel h2{margin:0;font-family:"Dela Gothic One","Zen Maru Gothic",sans-serif;font-weight:400;font-size:36px;letter-spacing:.04em}
.k4-panel h3{margin:4px 0 0;font-size:18px;font-weight:900;opacity:.7}
.k4-row{display:flex;gap:12px;align-items:stretch}
.k4-row .k4-btn{flex:1}
.k4-wide{width:100%}
.k4-sub{margin-top:6px}
.k4-note{margin:0;font-size:16px;line-height:1.6;opacity:.8}
.k4-in{font:inherit;font-size:24px;font-weight:700;color:var(--ink);background:#fff8ea;border:3px solid var(--ink);border-radius:3px;padding:8px 12px;min-width:0;flex:2;user-select:text;-webkit-user-select:text}
.k4-in:focus{outline:4px solid var(--gold);outline-offset:1px}
.k4-lab{font-size:18px;font-weight:900}
.k4-sec{display:flex;flex-direction:column;gap:12px}
.k4-menu{width:960px}
.k4-land .k4-menu{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
.k4-land .k4-menu h2,.k4-land .k4-menu .k4-sub,.k4-land .k4-menu .k4-note{grid-column:1/3}
.k4-port .k4-menu{width:640px}
.k4-names{width:620px}
.k4-name{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:900}
.k4-name span{flex:none;width:6.2em}
.k4-name .k4-dot{font-size:30px}
.k4-check{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;cursor:pointer}
.k4-check input{width:28px;height:28px;accent-color:var(--shu)}
.k4-find{width:560px;align-items:center;text-align:center}
.k4-find .k4-btn{min-width:240px}
.k4-wait{margin:0;font-size:24px;font-weight:900}
.k4-spin{font-size:48px;display:flex;gap:6px}
.k4-spin .k4-dot{animation:k4bob .5s ease-in-out infinite alternate}
.k4-spin .k4-d2{animation-delay:.25s}
.k4-rec{width:620px}
.k4-rec table{border-collapse:collapse;font-size:22px;width:100%}
.k4-rec th,.k4-rec td{border-bottom:2px solid var(--ink);padding:10px 8px;text-align:center}
.k4-rec thead th{font-size:16px}
.k4-rec tbody th{text-align:left}

/* 手渡しの合図 */
.k4-ovcue{background:none}
.k4-cue{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:var(--paper);text-align:center;padding:40px;cursor:pointer}
.k4-c1 .k4-cue{background:var(--shu)}
.k4-c2 .k4-cue{background:var(--sumi)}
.k4-cue p{margin:0;font-size:30px;font-weight:700}
.k4-cuename{display:flex;align-items:center;justify-content:center;font-family:"Dela Gothic One","Zen Maru Gothic",sans-serif;font-size:84px;line-height:1.2;word-break:break-all}
.k4-cuename b{font-weight:400}
.k4-cuename .k4-dot{box-shadow:0 0 0 6px var(--paper)}
.k4-cue .k4-btn{margin-top:20px;font-size:32px;min-width:320px;min-height:90px;background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.k4-cue{animation:k4in .25s ease-out}
@keyframes k4in{from{opacity:0;transform:translateY(24px)}}

/* 部屋で: 観戦の印 */
.k4-score{font-size:22px;font-weight:900}
/* 部屋で: 相手待ちの合言葉 */
.k4-code{font-size:20px;font-weight:900}
.k4-code b{display:block;font-family:"Dela Gothic One","Zen Maru Gothic",sans-serif;font-weight:400;font-size:44px;letter-spacing:.08em;user-select:text;-webkit-user-select:text}
.k4-port .k4-foot:has(.k4-code){flex-wrap:wrap;align-items:center}
.k4-foot .k4-sharebox{margin-top:0}