/*
  見た目の決まり: 置いてある物はすべて「濃い緑のインク枠＋ベタ塗り＋下にずれた影」。
  大きさの序列は 3 段: ① 今やること（72px前後・黄色のベタ）② 状況（22〜56px）③ 補足（11〜13px・灰緑）。
  グラデーション、ぼかし、色つきの上線、つや出しは使わない。絵文字は絵の代わりに使わない。
*/
:root {
  --ink: #2d3b2e; --ink-soft: #66756a; --paper: #fff4d6; --paper-line: #e6d6a6;
  --grass: #8fd16a; --grass-deep: #4f9e45; --wood: #e8b66b; --yellow: #ffd23f; --orange: #ff7a35; --red: #e2452b; --sky: #d6f1ff;
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='8' cy='8' r='3' fill='%23fff' fill-opacity='.22'/%3E%3Ccircle cx='32' cy='32' r='3' fill='%23fff' fill-opacity='.14'/%3E%3C/svg%3E");
  --pop: cubic-bezier(.3, 1.6, .5, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; font-family: var(--font); font-weight: 500; color: var(--ink); background: var(--grass) var(--dots); -webkit-tap-highlight-color: transparent; }
#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; overflow-x: clip; }
.scr { padding: 0 16px calc(48px + env(safe-area-inset-bottom)); min-height: 100dvh; }
button, input, select { font: inherit; color: inherit; }
button, label, summary, a { touch-action: manipulation; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
[hidden] { display: none !important; }
[data-haptic-trigger] { position: absolute; inset: 0; z-index: 1; touch-action: manipulation; }
:disabled > [data-haptic-trigger] { pointer-events: none; }
em, i, u { font-style: normal; text-decoration: none; }

@keyframes in-fwd { from { opacity: 0; transform: translateX(34px) } to { opacity: 1; transform: none } }
@keyframes in-back { from { opacity: 0; transform: translateX(-34px) } to { opacity: 1; transform: none } }
@keyframes rise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes pop-in { 0% { transform: scale(.5); opacity: 0 } 60% { transform: scale(1.08); opacity: 1 } 100% { transform: scale(1) } }
@keyframes bump { 0% { transform: scale(1) } 35% { transform: scale(1.35); color: var(--orange) } 100% { transform: scale(1) } }
@keyframes drop { 0% { transform: scale(1) } 35% { transform: scale(.7); color: var(--red) } 100% { transform: scale(1) } }
@keyframes swap { 0% { transform: translateX(40px) rotate(1.5deg); opacity: 0 } 60% { transform: translateX(-6px) } 100% { transform: none; opacity: 1 } }
@keyframes shake { 0%, 100% { transform: translateX(0) } 20% { transform: translateX(-9px) } 40% { transform: translateX(8px) } 60% { transform: translateX(-5px) } 80% { transform: translateX(3px) } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheet-up { from { transform: translateY(100%) } to { transform: none } }
@keyframes flash { 0%, 40% { background: var(--yellow) } 100% { background: transparent } }
@keyframes fall { 0% { transform: translate(0, -30px) rotate(0); opacity: 1 } 85% { opacity: 1 } 100% { transform: translate(var(--dx), 105vh) rotate(var(--r)); opacity: 0 } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes bar-in { from { width: 0 } }
@keyframes stamp { 0% { transform: scale(3) rotate(-30deg); opacity: 0 } 100% { transform: scale(1) rotate(-9deg); opacity: 1 } }
.scr.in-fwd { animation: in-fwd .32s cubic-bezier(.2, .8, .2, 1) both; }
.scr.in-back { animation: in-back .3s cubic-bezier(.2, .8, .2, 1) both; }

/* ---- 上部 ---- */
.hero { display: flex; align-items: center; gap: 14px; margin: 0 -16px; padding: calc(26px + env(safe-area-inset-top)) 20px 22px; background: var(--sky); border-bottom: 4px solid var(--ink); }
.logo { flex: none; width: 56px; height: 56px; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); background: var(--grass); display: block; }
.hero h1 { font-size: 34px; font-weight: 800; letter-spacing: .05em; line-height: 1; text-shadow: 3px 3px 0 var(--yellow); }
.hero p { margin-top: 8px; font-size: 12px; font-weight: 800; }
.grow { flex: 1; min-width: 0; }
.bar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 8px; margin: 0 -16px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: var(--sky); border-bottom: 4px solid var(--ink); }
.bar h1 { flex: 1; min-width: 0; font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { position: relative; flex: none; min-width: 40px; height: 40px; padding: 0 12px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; font-size: 14px; line-height: 1; font-weight: 800; box-shadow: 0 3px 0 var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .15s var(--pop), box-shadow .15s; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.code-chip { letter-spacing: .12em; background: var(--yellow); font-size: 15px; }
.page { display: grid; gap: 22px; padding-top: 24px; align-content: start; }

/* ---- ボタン類 ---- */
.pop-btn { position: relative; display: block; width: 100%; padding: 15px 20px; border: 4px solid var(--ink); border-radius: 20px; background: var(--yellow); color: var(--ink); text-align: center; box-shadow: 0 7px 0 var(--ink); transition: transform .22s var(--pop), box-shadow .22s var(--pop); }
.pop-btn b { display: block; font-size: 22px; font-weight: 800; line-height: 1.3; }
.pop-btn small { display: block; margin-top: 2px; font-size: 12px; font-weight: 800; }
.pop-btn:active { transform: translateY(5px) scale(.98); box-shadow: 0 2px 0 var(--ink); transition-duration: .04s; }
.pop-btn.orange { background: var(--orange); color: #fff; }
.pop-btn.white { background: #fff; }
.pop-btn.green { background: var(--grass-deep); color: #fff; }
.pop-btn.dim { opacity: .55; }
.mini-btn { position: relative; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 var(--ink); transition: transform .15s var(--pop), box-shadow .15s; }
.mini-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.mini-btn.on { background: var(--yellow); }
.mini-btn.red { color: var(--red); }
.mini-btn.small { padding: 4px 10px; font-size: 12px; border-width: 2.5px; box-shadow: 0 2px 0 var(--ink); }
.mini-btn.dim { opacity: .6; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- ホームの2枚 ---- */
.home { gap: 26px; padding-top: 30px; }
.mode-card { position: relative; display: block; width: 100%; min-height: 188px; padding: 20px 20px 18px; border: 4px solid var(--ink); border-radius: 26px; text-align: left; box-shadow: 0 9px 0 var(--ink); overflow: hidden; transition: transform .25s var(--pop), box-shadow .25s var(--pop); }
.mode-card:active { transform: translateY(7px); box-shadow: 0 2px 0 var(--ink); transition-duration: .05s; }
.mode-card.group { background: var(--yellow); }
.mode-card.solo { background: #fff; min-height: 150px; }
.mc-label { display: block; font-size: 50px; font-weight: 800; line-height: 1.1; letter-spacing: .02em; }
.mc-sub { display: block; margin-top: 6px; font-size: 14px; font-weight: 800; }
.pins-art { position: absolute; right: 8px; bottom: 8px; width: 62%; max-width: 250px; transform: rotate(-4deg); }
.mc-num { position: absolute; right: 16px; bottom: -14px; font-size: 112px; font-weight: 800; line-height: 1; color: var(--grass); -webkit-text-stroke: 4px var(--ink); }
.resume { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; width: 100%; padding: 14px 16px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; text-align: left; box-shadow: 0 5px 0 var(--ink); animation: pop-in .4s var(--pop) both; }
.resume b { font-size: 18px; font-weight: 800; }
.resume small { grid-column: 2; font-size: 12px; color: var(--ink-soft); }
.resume .seal { grid-row: span 2; margin: 0; }
.choice { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; width: 100%; padding: 20px 18px; border: 4px solid var(--ink); border-radius: 22px; background: #fff; text-align: left; box-shadow: 0 7px 0 var(--ink); transition: transform .22s var(--pop), box-shadow .22s var(--pop); }
.choice:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); transition-duration: .04s; }
.choice b { font-size: 24px; font-weight: 800; line-height: 1.3; }
.choice small { grid-column: 1; font-size: 13px; color: var(--ink-soft); font-weight: 800; }
.choice .chev { grid-row: 1 / span 2; grid-column: 2; font-size: 32px; }
.choice.tour { background: var(--ink); color: #fff; box-shadow: 0 7px 0 var(--orange); }
.choice.tour small { color: #cfe3d2; }
.tag { grid-column: 1 / span 2; justify-self: start; margin-bottom: 4px; padding: 2px 10px; border-radius: 6px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; }

/* ---- 札・入力部品 ---- */
.panel { position: relative; padding: 28px 16px 16px; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 6px 0 var(--grass-deep); animation: rise .35s both; }
.panel.plain { background: #fff; }
.ribbon { position: absolute; top: -17px; left: 14px; padding: 3px 14px 3px 26px; font-size: 14px; font-weight: 800; background: #fff; border: 3px solid var(--ink); border-radius: 6px; transform: rotate(-1.5deg); }
.ribbon::before { content: ""; position: absolute; left: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 2.5px solid var(--ink); border-radius: 50%; }
.note { font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
.note.warn { color: var(--red); font-weight: 800; }
.sec { margin: 6px 0 -8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--ink); }
.stack { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 800; }
input[type=text], input[type=time], input[type=date], select { width: 100%; padding: 11px 12px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; font-weight: 800; font-size: 16px; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; }
.row > input { flex: 1; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rule-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; font-weight: 800; }
.rule-row + .rule-row { border-top: 2px solid var(--paper-line); }
.stepper { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.stepper button { position: relative; width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 3px 0 var(--ink); transition: transform .12s var(--pop), box-shadow .12s; }
.stepper button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.stepper b { min-width: 3.4em; text-align: center; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-top: 2px solid var(--paper-line); background: none; text-align: left; font-size: 14px; font-weight: 800; line-height: 1.5; }
.switch i { flex: none; min-width: 52px; padding: 5px 0; border: 3px solid var(--ink); border-radius: 999px; background: #fff; text-align: center; font-size: 12px; font-weight: 800; transition: background .2s, color .2s; }
.switch.on i { background: var(--grass-deep); color: #fff; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.seg button { position: relative; padding: 11px 6px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font-size: 15px; font-weight: 800; line-height: 1.3; transition: background .15s, transform .15s var(--pop); }
.seg button small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.seg button.on { background: var(--yellow); box-shadow: 0 4px 0 var(--ink); transform: translateY(-2px); }
.chip { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 10px 0; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font-weight: 800; font-size: 15px; transition: transform .15s var(--pop), background .15s; }
.chip.on { background: var(--yellow); box-shadow: 0 3px 0 var(--ink); transform: translateY(-2px); }
.dot { flex: none; width: 16px; height: 16px; border: 2.5px solid var(--ink); border-radius: 50%; display: inline-block; }
.tbadge { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; border: 2.5px solid var(--ink); border-radius: 8px; color: #fff; font-size: 13px; font-weight: 800; vertical-align: middle; }
.seal { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 2px solid currentColor; border-radius: 5px; color: var(--ink); font-size: 11px; font-weight: 800; white-space: nowrap; vertical-align: middle; }
.seal.red { color: var(--red); transform: rotate(-3deg); }
.seal-btn { position: relative; padding: 4px 9px; border: 2.5px solid var(--ink); border-radius: 7px; background: #fff; font-size: 12px; font-weight: 800; opacity: .45; }
.seal-btn.on { opacity: 1; background: var(--yellow); box-shadow: 0 2px 0 var(--ink); }
.list li + li { border-top: 2px solid var(--paper-line); }
.list .item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 2px; border: 0; background: none; text-align: left; }
.list .item b { display: block; font-size: 16px; font-weight: 800; }
.list .item small { display: block; font-size: 12px; color: var(--ink-soft); }
.list .item .no { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 50%; font-size: 12px; background: var(--yellow); }
.chev { font-size: 24px; font-weight: 800; }
.acct { display: grid; gap: 8px; }
.acct .mini-btn { display: flex; justify-content: space-between; align-items: center; }
.pl { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.pl + .pl { border-top: 2px solid var(--paper-line); }
.pl .nm { flex: 1; min-width: 0; font-weight: 800; }
.bdgs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.team { margin-top: 12px; padding: 10px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; }
.team.settle { animation: pop-in .35s var(--pop) both; }
.team b { display: block; margin-bottom: 6px; font-size: 14px; }
.legend { display: grid; gap: 4px; margin: 10px 0 6px; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.legend b { color: var(--ink); }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.quick .chip { margin: 0; }
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.swatches button { position: relative; height: 60px; border: 3px solid var(--ink); border-radius: 12px; font-weight: 800; font-size: 14px; }
.swatches button.on { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 5.5px var(--ink); }
.article h2 { font-size: 22px; line-height: 1.5; font-weight: 800; }
.article p { margin-top: 14px; font-size: 16px; line-height: 2; }
.join-box { display: grid; gap: 14px; padding: 22px 18px; background: #fff; border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 7px 0 var(--ink); }
.join-box label { font-size: 13px; font-weight: 800; }
.code-input { text-align: center; font-size: 40px !important; letter-spacing: .24em; padding: 14px 6px !important; text-transform: uppercase; }
.code-big { margin: 6px 0 10px; text-align: center; font-size: 54px; font-weight: 800; letter-spacing: .18em; }
.qr { width: 190px; height: 190px; margin: 14px auto; padding: 10px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; }
.qr svg { display: block; width: 100%; height: 100%; }
.waiting { display: grid; justify-items: center; gap: 18px; padding: 60px 0; font-weight: 800; }
.spin { width: 40px; height: 40px; border: 5px solid var(--ink); border-top-color: var(--yellow); border-radius: 50%; animation: spin .8s linear infinite; }

/* ---- 大会のウィザード ---- */
.stepper-bar { display: flex; justify-content: space-between; margin: 0 -16px; padding: 12px 16px; background: var(--paper); border-bottom: 3px solid var(--ink); }
.stepper-bar span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.stepper-bar i { display: grid; place-items: center; width: 24px; height: 24px; border: 2.5px solid var(--ink-soft); border-radius: 50%; font-size: 12px; transition: transform .3s var(--pop); }
.stepper-bar .on { color: var(--ink); } .stepper-bar .on i { background: var(--yellow); border-color: var(--ink); transform: scale(1.15); }
.stepper-bar .done i { background: var(--grass-deep); border-color: var(--ink); color: #fff; }
.wiz { gap: 26px; padding-bottom: 110px; }
.wiz-body { display: grid; gap: 26px; }
.wiz-body.step-fwd { animation: in-fwd .3s cubic-bezier(.2, .8, .2, 1) both; }
.wiz-body.step-back { animation: in-back .3s cubic-bezier(.2, .8, .2, 1) both; }
.dock { position: fixed; left: 50%; bottom: 0; z-index: 6; width: min(100%, 480px); transform: translateX(-50%); padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 4px solid var(--ink); }
.fmt-list { display: grid; gap: 14px; }
.fmt { position: relative; display: grid; gap: 4px; padding: 14px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; text-align: left; transition: transform .2s var(--pop), background .15s; }
.fmt b { font-size: 17px; font-weight: 800; padding-right: 76px; }
.fmt small { font-size: 12px; color: var(--ink-soft); font-weight: 800; }
.fmt .seal { position: absolute; top: 12px; right: 10px; }
.fmt-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 13px; font-weight: 800; }
.fmt.on { background: var(--yellow); box-shadow: 0 5px 0 var(--ink); transform: translateY(-3px); }
.est { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px; border: 3px dashed var(--ink); border-radius: 12px; background: #fff; }
.est b { font-size: 26px; font-weight: 800; } .est span { font-size: 13px; font-weight: 800; }
.sum { display: grid; }
.sum li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 14px; }
.sum li + li { border-top: 2px solid var(--paper-line); }
.sum span { flex: none; color: var(--ink-soft); font-weight: 800; font-size: 12px; padding-top: 2px; }
.sum b { text-align: right; font-weight: 800; }
.preset-list { display: flex; flex-wrap: wrap; }

/* ---- 大会ホーム ---- */
.t-head { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; padding: 16px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink); }
.t-num { display: block; font-size: 52px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.t-num small { font-size: 22px; color: var(--ink-soft); }
.t-prog > span { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.track { position: relative; height: 12px; margin-top: 6px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.track i { display: block; height: 100%; background: var(--grass-deep); transition: width .5s cubic-bezier(.2, .8, .2, 1); animation: bar-in .6s both; }
.track u { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); }
.track.big { height: 16px; margin-top: 10px; }
.t-end { text-align: right; } .t-end span { display: block; font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.t-end b { display: block; font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.t-end.done b { font-size: 20px; color: var(--red); }
.tabs { display: flex; align-items: flex-end; gap: 6px; margin: 4px 0 0; padding: 0 8px; border-bottom: 3px solid var(--ink); }
.tabs button { position: relative; flex: 1; padding: 8px 4px 7px; border: 3px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; background: #bfe5a4; font-size: 14px; font-weight: 800; }
.tabs button.on { margin-bottom: -3px; padding: 11px 4px 10px; background: var(--grass); font-size: 15px; }
.tab-body { display: grid; gap: 16px; animation: rise .3s both; }
.mcard { padding: 14px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink); }
.mcard.live { background: var(--yellow); }
.mc-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.court { padding: 2px 10px; border-radius: 6px; background: var(--ink); color: #fff; }
.mc-head em { flex: 1; color: var(--ink-soft); }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 12px 0 14px; text-align: center; }
.vs b { font-size: 22px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; } .vs span { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.mc-acts { display: grid; gap: 10px; justify-items: stretch; }
.mc-acts .mini-btn { justify-self: center; }
.plain-list { background: #fff; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; }
.plain-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px; font-size: 14px; font-weight: 800; }
.plain-list li + li { border-top: 2px solid var(--paper-line); }
.plain-list em { flex: none; margin-right: 4px; padding: 1px 8px; border: 2px solid var(--ink-soft); border-radius: 5px; color: var(--ink-soft); font-size: 11px; }
.plain-list span { color: var(--ink-soft); font-size: 12px; }
.plain-list .score { margin: 0 auto; padding: 1px 8px; border-radius: 6px; background: var(--paper); color: var(--ink); font-size: 14px; }
.plain-list .w { color: var(--grass-deep); }
.plain-list .mini-btn { margin-left: auto; }
.plain-list.dim { opacity: .6; }
.plain-list li.flash { animation: flash 2.4s both; }
.stand { padding-top: 22px; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tbl th { padding: 4px 6px; font-size: 11px; color: var(--ink-soft); text-align: center; white-space: nowrap; }
.tbl td { padding: 10px 6px; text-align: center; border-top: 2px solid var(--paper-line); white-space: nowrap; }
.tbl .l { text-align: left; white-space: normal; }
.tbl .rk { font-size: 20px; font-weight: 800; }
.tbl tr.adv td { background: #e4f5d4; }
.tbl td b { font-weight: 800; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.pod { display: grid; justify-items: center; gap: 6px; padding: 14px 6px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); text-align: center; animation: pop-in .5s var(--pop) both; }
.pod i { display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid var(--red); border-radius: 50%; color: var(--red); font-size: 20px; font-weight: 800; transform: rotate(-8deg); }
.pod b { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.pod.p1 { padding-top: 26px; background: var(--yellow); } .pod.p2 { animation-delay: .1s } .pod.p3 { animation-delay: .2s }
.bracket { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 12px; }
.bracket .col { flex: none; width: 180px; display: grid; gap: 14px; align-content: space-around; }
.bracket h4 { font-size: 12px; font-weight: 800; color: var(--ink-soft); letter-spacing: .08em; }
.bm { background: #fff; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; }
.bm > div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 13px; font-weight: 800; }
.bm > div + div { border-top: 2px solid var(--paper-line); }
.bm .w { background: var(--yellow); }
.bm.wait > div { color: var(--ink-soft); font-weight: 500; }
.bm small { display: block; padding: 2px 10px; background: var(--ink); color: #fff; font-size: 10px; }
.man { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 10px 0; text-align: center; font-size: 18px; }

/* ---- スコアボード ---- */
.board { --bg-board: var(--grass); display: flex; flex-direction: column; gap: 14px; margin: 0 -16px; min-height: 100dvh; padding: 0 16px calc(32px + env(safe-area-inset-bottom)); background: var(--bg-board) var(--dots); background-size: cover; background-position: center; }
.board.wood { --bg-board: #e0b678; } .board.chalk { --bg-board: #35523f; } .board.sky { --bg-board: #bfe5f7; }
.board > .bar { margin: 0 -16px; }
.ctx { display: flex; justify-content: space-between; margin-top: 12px; padding: 0 2px; font-size: 13px; font-weight: 800; }
.board.chalk .ctx, .board.photo .ctx { color: #fff; }
.turn-card { position: relative; padding: 16px 16px 14px; background: var(--yellow); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 8px 0 var(--ink); }
.turn-card.swap { animation: swap .45s cubic-bezier(.2, .9, .3, 1) both; }
.tc-top { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; }
.tc-top em { margin-left: auto; font-size: 12px; color: var(--ink-soft); }
.tc-name { margin: 8px 0 4px; font-size: clamp(44px, 15vw, 70px); font-weight: 800; line-height: 1.05; letter-spacing: .01em; overflow-wrap: anywhere; }
.tc-name small { margin-left: 4px; font-size: .32em; font-weight: 800; }
.tc-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; }
.tc-remain { font-size: 15px; font-weight: 800; } .tc-remain b { margin: 0 3px; font-size: 34px; font-variant-numeric: tabular-nums; }
.tc-miss { display: flex; align-items: center; gap: 6px; } .tc-miss small { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.pip { width: 16px; height: 16px; border: 2.5px solid var(--ink); border-radius: 50%; background: #fff; transition: background .2s, transform .3s var(--pop); }
.pip.on { background: var(--red); transform: scale(1.2); }
.tc-aim, .tc-warn { margin-top: 10px; padding: 7px 10px; border: 2.5px dashed var(--ink); border-radius: 10px; font-size: 13px; font-weight: 800; text-align: center; }
.tc-warn { background: #ffe1d8; border-color: var(--red); color: var(--red); }
.tc-next { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 12px; font-size: 12px; font-weight: 800; }
.tc-next > span { margin-right: 4px; color: var(--ink-soft); } .tc-next u { color: var(--ink-soft); } .tc-next i { display: inline-flex; align-items: center; }
.tc-next .tbadge { width: 20px; height: 20px; margin-right: 3px; border-radius: 6px; font-size: 10px; border-width: 2px; }
.prompt { padding: 10px 12px; background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; font-size: 14px; font-weight: 800; text-align: center; animation: pop-in .4s var(--pop) both; }
.scores { display: grid; gap: 12px; }
.srow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink); }
.srow.cur { outline: 4px solid var(--orange); outline-offset: 1px; }
.srow.out { opacity: .45; }
.srow .tbadge { margin: 0; width: 30px; height: 30px; font-size: 15px; }
.s-main { min-width: 0; }
.s-name { display: block; font-size: 15px; font-weight: 800; }
.s-main small { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.s-score { font-size: 62px; font-weight: 800; line-height: 1; min-width: 1.9ch; text-align: right; font-variant-numeric: tabular-nums; }
.s-score.bump { animation: bump .5s both; } .s-score.drop { animation: drop .5s both; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.th { position: relative; min-width: 26px; padding: 1px 6px; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper); font-size: 13px; font-weight: 800; text-align: center; }
.th.miss { background: #fff; color: var(--ink-soft); border-style: dashed; }
.th.over { background: var(--red); border-color: var(--ink); color: #fff; }
.th.over u { margin-left: 2px; font-size: 10px; }
.th.ghost { border-style: dashed; color: var(--ink-soft); background: transparent; }
.input-box { display: grid; gap: 12px; margin-top: 4px; padding: 14px 12px; background: var(--paper); border: 4px solid var(--ink); border-radius: 22px; }
.inmode.seg button { padding: 9px 4px; font-size: 16px; }
.pins { display: grid; gap: 8px; justify-items: center; padding: 6px 0; }
.pin-row { display: flex; gap: 8px; justify-content: center; }
.pin { position: relative; width: 70px; height: 58px; border: 3px solid var(--ink); border-radius: 16px; background: var(--wood); font-size: 26px; font-weight: 800; box-shadow: 0 5px 0 var(--ink); transition: transform .2s var(--pop), box-shadow .2s var(--pop); }
.pin:active { transform: translateY(4px) scale(.96); box-shadow: 0 1px 0 var(--ink); transition-duration: .04s; }
.pin.risk { background: #f1dcb8; color: #8a6f3e; border-style: dashed; }
.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.counts button { position: relative; height: 58px; border: 3px solid var(--ink); border-radius: 14px; background: var(--wood); box-shadow: 0 5px 0 var(--ink); transition: transform .2s var(--pop), box-shadow .2s var(--pop); }
.counts button b { font-size: 24px; font-weight: 800; } .counts button small { font-size: 11px; font-weight: 800; }
.counts button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); transition-duration: .04s; }
.counts button.risk { background: #f1dcb8; color: #8a6f3e; border-style: dashed; }
.acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.acts button { position: relative; padding: 9px 4px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 5px 0 var(--ink); transition: transform .2s var(--pop), box-shadow .2s var(--pop); }
.acts button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); transition-duration: .04s; }
.acts b { display: block; font-size: 17px; font-weight: 800; } .acts small { display: block; font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.acts .miss { background: #fff; color: var(--red); } .acts .miss small { color: var(--red); }
.acts .fault { background: #ffe1d8; } .acts .undo { background: var(--sky); }
.acts .hit { background: var(--grass); }
.acts.two { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .acts.two button { padding: 18px 6px; } .acts.two b { font-size: 24px; }
.timer { padding: 4px 10px; border: 3px solid var(--ink); border-radius: 8px; background: #fff; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.timer.low { background: var(--orange); color: #fff; } .timer.zero { background: var(--red); color: #fff; animation: shake .6s infinite; }
.board.land > .bar { padding-top: 6px; padding-bottom: 6px; }
.board.land .scores { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); flex: 1; }
.board.land .srow { grid-template-columns: 1fr; justify-items: center; text-align: center; align-content: center; }
.board.land .s-score { font-size: min(30vh, 24vw); text-align: center; }
.board.land .chips { justify-content: center; }
.board.land .input-box, .board.land .prompt { display: none; }
.board.land .tc-name { font-size: min(14vh, 11vw); margin: 0; }
.board.land .tc-info, .board.land .tc-next, .board.land .tc-aim, .board.land .tc-warn { display: none; }
.board.land .turn-card { padding: 8px 16px; }
.board.land .tc-top { font-size: 13px; }
#app:has(.board.land) { max-width: none; }
.board.ro { min-height: 0; }
.page .ctx, .page .turn-card, .page .scores { margin-left: 0; margin-right: 0; }
.set-result { display: grid; gap: 10px; margin: 12px 0; }
.sr { display: flex; align-items: center; gap: 8px; padding: 12px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; font-weight: 800; }
.sr b { flex: 1; font-size: 17px; } .sr em { font-size: 28px; font-variant-numeric: tabular-nums; } .sr .sw { font-size: 12px; color: var(--ink-soft); min-width: 3em; text-align: right; }
.sr.win { background: var(--yellow); }
.solo-big { display: grid; justify-items: center; padding: 16px; background: #fff; border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 7px 0 var(--ink); }
.solo-big span { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.solo-big b { font-size: 108px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.solo-big small { font-size: 14px; font-weight: 800; }

/* ---- シート・演出 ---- */
.sheet-bg { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(45, 59, 46, .6); animation: fade .2s both; }
.sheet { width: min(100%, 480px); max-height: 92dvh; overflow-y: auto; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); background: var(--paper); border: 4px solid var(--ink); border-bottom: 0; border-radius: 26px 26px 0 0; animation: sheet-up .32s cubic-bezier(.2, .9, .3, 1) both; }
.sheet-bg.center { align-items: center; padding: 20px; }
.sheet.small { border: 4px solid var(--ink); border-radius: 22px; padding: 20px 16px; animation: pop-in .3s var(--pop) both; }
.sheet-title { margin-bottom: 8px; text-align: center; font-size: 26px; font-weight: 800; line-height: 1.35; }
.sheet-text { margin-bottom: 16px; text-align: center; font-size: 16px; font-weight: 800; line-height: 1.7; }
.stamp-wrap { display: grid; place-items: center; padding: 6px 0 12px; }
.stamp { display: grid; place-items: center; width: 92px; height: 92px; border: 5px solid var(--red); border-radius: 50%; outline: 2px solid var(--red); outline-offset: -10px; color: var(--red); font-size: 42px; font-weight: 800; animation: stamp .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.banner { position: fixed; left: 50%; top: 32%; z-index: 55; display: grid; gap: 2px; padding: 16px 30px; transform: translateX(-50%); background: var(--ink); color: #fff; border: 4px solid var(--ink); border-radius: 20px; box-shadow: 0 8px 0 rgba(0, 0, 0, .25); text-align: center; pointer-events: none; animation: pop-in .35s var(--pop) both; white-space: nowrap; }
.banner b { font-size: 34px; font-weight: 800; } .banner small { font-size: 14px; font-weight: 800; }
.banner.danger { background: var(--red); }
.confetti { position: fixed; inset: 0; z-index: 65; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: 0; width: 10px; height: 16px; border: 2px solid var(--ink); border-radius: 3px; animation: fall 2s cubic-bezier(.3, .5, .5, 1) both; }
.cardimg { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: rgba(45, 59, 46, .92); }
.cardimg img { max-width: 100%; max-height: 78dvh; border: 4px solid var(--ink); border-radius: 12px; }
.cardimg p { color: #fff; font-weight: 800; text-align: center; }
#toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 70; transform: translate(-50%, 10px); padding: 10px 18px; background: var(--ink); color: #fff; border-radius: 12px; font-weight: 800; font-size: 14px; opacity: 0; pointer-events: none; transition: .2s; max-width: 90vw; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ===== スマホで押しやすく: 戻る・次へは画面の下（dock）。親指の届く範囲に置く ===== */
.scr:has(.dock) { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
.dock { position: fixed; left: 50%; bottom: 0; z-index: 8; display: flex; align-items: stretch; gap: 10px; width: min(100%, 480px); transform: translateX(-50%); padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 4px solid var(--ink); }
.back-btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 104px; min-height: 58px; padding: 0 16px; border: 4px solid var(--ink); border-radius: 18px; background: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 5px 0 var(--ink); transition: transform .2s var(--pop), box-shadow .2s var(--pop); }
.back-btn span { font-size: 26px; line-height: 1; margin-top: -3px; }
.back-btn svg { width: 22px; height: 22px; }
.back-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); transition-duration: .04s; }
.back-btn.wide { flex: 1; }
.dock .dock-main { flex: 1; min-width: 0; padding: 8px 12px; min-height: 58px; border-radius: 18px; box-shadow: 0 5px 0 var(--ink); border-width: 4px; }
.dock .dock-main b { font-size: 19px; }
.dock .pop-btn:active { transform: translateY(4px) scale(.98); box-shadow: 0 1px 0 var(--ink); }
.wiz { padding-bottom: 24px; }
.dock.legacy { display: none; }

/* 盤面の下の操作 */
.board-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.foot-btn { position: relative; flex: 1 1 0; min-width: 0; min-height: 52px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 4px 0 var(--ink); transition: transform .2s var(--pop), box-shadow .2s var(--pop); }
.foot-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); transition-duration: .04s; }
.board.land .board-foot { margin-top: 0; }
.board.land .foot-btn { min-height: 40px; }

/* 小さい画面で崩れないよう、幅は割り当てで決める */
.pin-row { width: 100%; gap: 8px; }
.pin { flex: 1 1 0; min-width: 0; max-width: 78px; width: auto; height: 60px; }
.input-box { padding: 12px 10px; }
.pins { gap: 8px; }
.acts button { min-height: 56px; }
.bar { min-height: 56px; }
.bar h1 { font-size: 17px; }
.code-chip { padding: 0 10px; letter-spacing: .1em; }
.timer { padding: 4px 8px; font-size: 15px; }
.me-chip { padding: 4px 10px; border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: 13px; font-weight: 800; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 募集の札・参加画面 */
.switch.big { padding: 12px 0; border-top: 0; }
.switch.big b { display: block; font-size: 17px; }
.switch.big small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.invite { display: grid; gap: 4px; padding-top: 10px; border-top: 2px solid var(--paper-line); animation: rise .3s both; }
.invite .code-big { font-size: 46px; margin: 4px 0; }
.invite .row2 { margin-top: 4px; }
.invite-card { display: grid; gap: 4px; padding: 20px 18px; background: var(--ink); color: #fff; border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 7px 0 var(--orange); }
.invite-card b { font-size: 26px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.invite-card small { font-size: 13px; color: #cfe3d2; font-weight: 800; letter-spacing: .1em; }
.tag2 { justify-self: start; padding: 2px 10px; border-radius: 6px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.hero .grow p { line-height: 1.5; }
.mc-label { font-size: clamp(40px, 13vw, 50px); }
.pins-art { width: 56%; }
@media (max-width: 380px) {
  .scr { padding-left: 12px; padding-right: 12px; }
  .bar, .hero, .stepper-bar { margin-left: -12px; margin-right: -12px; }
  .board { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .board > .bar { margin-left: -12px; margin-right: -12px; }
  .back-btn { min-width: 88px; padding: 0 10px; font-size: 15px; }
  .stepper-bar { padding-left: 12px; padding-right: 12px; }
  .stepper-bar span { font-size: 11px; gap: 4px; }
  .rule-row { font-size: 13px; }
  .stepper b { min-width: 3em; }
  .tc-name { font-size: clamp(40px, 14vw, 60px); }
  .s-score { font-size: 54px; }
}
.mc-label { font-size: clamp(34px, 11vw, 46px); }
.mode-card { min-height: 168px; }
.mode-card.solo { min-height: 132px; }
.pins-art { width: 46%; right: 6px; bottom: 6px; }
.mc-num { font-size: clamp(76px, 24vw, 104px); right: 12px; bottom: -10px; }

/* ===== 第3版: アイコン・追従する入力・招待・崩れ直し ===== */
.av { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border: 3px solid var(--ink); border-radius: 11px; overflow: hidden; vertical-align: middle; background: #fff; }
.av b { font-size: 55%; font-weight: 800; color: var(--ink); line-height: 1; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.xs { width: 24px; height: 24px; border-width: 2px; border-radius: 8px; margin-right: 4px; }
.av.sm { width: 36px; height: 36px; }
.av.md { width: 46px; height: 46px; box-shadow: 0 3px 0 var(--ink); }
.av.lg { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 5px 0 var(--ink); }
.av.xl { width: 68px; height: 68px; border-radius: 18px; border-width: 4px; box-shadow: 0 4px 0 var(--ink); }
.chip .av.xs { margin-right: 0; }
.hero .av.md { margin-left: auto; }
.me-av { display: flex; align-items: center; gap: 12px; }
.av-pick { display: grid; gap: 10px; }
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.av-opt { position: relative; display: grid; place-items: center; padding: 6px; border: 3px solid transparent; border-radius: 14px; background: none; }
.av-opt.on { border-color: var(--ink); background: var(--yellow); }
.av-opt .av { width: 100%; max-width: 54px; height: auto; aspect-ratio: 1; }
.pcard { padding: 12px 0; display: grid; gap: 10px; }
.pcard + .pcard { border-top: 2px solid var(--paper-line); }
.pc-top { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.pc-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.seal-btn { min-height: 38px; padding: 6px 14px; border-radius: 10px; font-size: 14px; }
.pc-hand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 3px dashed var(--ink); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 800; }
.plist { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.pl-i { display: inline-flex; align-items: center; white-space: nowrap; }
.tc-who { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.tc-who .tc-name { margin: 0; min-width: 0; }

/* 点数の入力は画面の下に追従 */
.scr:has(.dock), .scr:has(.pad-dock) { padding-bottom: calc(var(--dockh, 118px) + 26px + env(safe-area-inset-bottom)); }
.scr[data-screen="board"] { padding-bottom: 0; }
.board { padding-bottom: calc(var(--dockh, 340px) + 26px + env(safe-area-inset-bottom)); min-height: 100dvh; }
.pad-dock { position: fixed; left: 50%; bottom: 0; z-index: 8; display: grid; gap: 8px; width: min(100%, 480px); transform: translateX(-50%); padding: 10px 10px calc(12px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 4px solid var(--ink); }
.pad-dock.pending { opacity: .55; pointer-events: none; }
.pd-top { display: flex; align-items: stretch; gap: 8px; }
.pd-top .seg { flex: 1; min-width: 0; }
.pd-top .seg button { padding: 8px 4px; font-size: 14px; border-radius: 12px; }
.back-btn.mini { min-width: 0; min-height: 44px; padding: 0 12px; border-width: 3px; border-radius: 14px; font-size: 14px; box-shadow: 0 4px 0 var(--ink); white-space: nowrap; }
.back-btn.mini span { font-size: 22px; }
.back-btn.grow { flex: 1; }
.menu-btn { position: relative; flex: none; width: 48px; min-height: 44px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; font-size: 24px; font-weight: 800; line-height: 1; box-shadow: 0 4px 0 var(--ink); }
.menu-btn:active, .back-btn.mini:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pad-dock .pins { gap: 6px; padding: 0; }
.pad-dock .pin-row { gap: 6px; }
.pad-dock .pin { height: 46px; font-size: 22px; border-radius: 13px; box-shadow: 0 4px 0 var(--ink); max-width: 76px; }
.pad-dock .counts { gap: 6px; }
.pad-dock .counts button { height: 46px; border-radius: 13px; box-shadow: 0 4px 0 var(--ink); display: flex; align-items: baseline; justify-content: center; gap: 2px; padding-top: 6px; }
.pad-dock .counts button b { font-size: 21px; }
.pad-dock .acts { gap: 6px; }
.pad-dock .acts button { min-height: 48px; padding: 4px; border-radius: 13px; box-shadow: 0 4px 0 var(--ink); }
.pad-dock .acts b { font-size: 16px; }
.pad-dock .acts.two button { padding: 12px 6px; } .pad-dock .acts.two b { font-size: 22px; }
.land-dock { gap: 8px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.land-dock .back-btn { flex: 1; }
.board.land { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
.board.ro { min-height: 0; }
.gnote { margin-top: 8px; padding: 10px 12px; border: 3px dashed var(--ink); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 800; text-align: center; }
.gnote.ok { background: var(--yellow); border-style: solid; animation: pop-in .35s var(--pop) both; }

/* 招待ボタン・自分の札 */
.invite-btn { background: var(--yellow); padding: 0 12px; }
.invite-btn svg { width: 20px; height: 20px; }
.me-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px 3px 4px; }
.me-chip .av.xs { margin: 0; }

/* ポップアップ（オーバー・失格）: 中央寄せの枠は動かさず、中の箱だけが弾む */
.banner-wrap { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 0 20px; pointer-events: none; }
.banner { position: static; left: auto; top: auto; transform: none; max-width: min(100%, 360px); white-space: normal; padding: 18px 28px; }
.banner b { display: block; font-size: clamp(26px, 8vw, 34px); line-height: 1.25; }
.banner small { display: block; margin-top: 4px; line-height: 1.5; }

/* 確認の枠: ボタンは1行に収める */
.sheet.small .row2 { gap: 10px; }
.sheet.small .pop-btn { padding: 12px 6px; border-radius: 16px; box-shadow: 0 5px 0 var(--ink); }
.sheet.small .pop-btn b { font-size: 17px; white-space: nowrap; }
.sheet-text { padding: 0 4px; }
.back-btn, .mini-btn, .foot-btn, .seal-btn, .switch i, .stepper b, .tabs button, .seg button { white-space: nowrap; }
.seg button { overflow: hidden; text-overflow: ellipsis; }
.sheet .pop-btn small { white-space: normal; }
@media (max-width: 380px) {
  .pad-dock { padding-left: 8px; padding-right: 8px; }
  .pad-dock .pin { max-width: 70px; }
  .tc-who .av.xl { width: 56px; height: 56px; }
  .back-btn.mini { padding: 0 9px; font-size: 13px; }
}