:root{
  /* 昔ながらのボウリング場: 青緑のじゅうたんの地（彩度 40%・明度 74〜85%）、楓のレーン。--red は名前のまま中身は球の藍（印・今の人・掛け声）。
     主なボタンは球の藍（theme.accent）。山吹はガードと幕の細い線だけ。煉瓦色はピンの帯とスパットだけ。強い色は小さな面だけ */
  --ink:#0f2a2c; --sub:#2c4a4d; --bg:#a2d7d5; --card:#c9e8e7; --line:#529896; --red:#24508f; --soft:#f5e3b8; --mark:#f1d79a;
  --wash:#b5dedd; --lane:#1a5052; --grid:#88bfbd; --cream:#fff8ef;
  --ui:"Zen Kaku Gothic New",sans-serif; --head:"RocknRoll One","Zen Kaku Gothic New",sans-serif;
}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{color:var(--ink);font-family:var(--ui);-webkit-tap-highlight-color:transparent}
#app{position:absolute;inset:0;background:var(--bg);font-family:var(--ui);color:var(--ink);user-select:none;-webkit-user-select:none;overflow:hidden}
#app *{box-sizing:border-box}
/* 画面いっぱいの画面は、出している間だけ（.on）置く */
.k3-scr{position:absolute;inset:0;display:none}
.k3-scr.on{display:block}

.k3-muted{color:var(--sub);font-size:20px;line-height:1.6}
/* 小さなウィンドウ（shell.panel）に出す中身 */
.k3-det,.k3-rank,.k3-rec,.k3-set,.k3-calc{display:flex;flex-direction:column;gap:12px;color:var(--ink);overflow-wrap:anywhere}
.k3-det *,.k3-rank *,.k3-rec *,.k3-set *{box-sizing:border-box}
.k3-calc p{margin:0;font-size:20px}
.k3-calc p.calc{font:700 24px var(--ui);color:var(--red)}

/* ---- ホーム（共通の shell.home）に足す物 ---- */
.k3-art{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.k3-home .sh-art{background:var(--lane);pointer-events:none}
/* デモ（CPU 同士）の点の札。絵の中の上に置き、操作は受けない */
.k3-demo{position:absolute;left:12px;right:12px;top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
.k3-dsc{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;background:rgba(201,232,231,.95);border-radius:4px;padding:6px 12px;font:700 17px var(--ui);color:var(--ink);max-width:100%}
.k3-dsc span{color:var(--sub);white-space:nowrap}
.k3-dsc span.on{color:var(--ink)}
.k3-dsc b{font:400 22px var(--head);margin-left:4px}
.k3-dsc span.on b{color:var(--red)}
.k3-dsc small{font:700 15px var(--ui);color:var(--sub)}
.k3-dcall{background:var(--red);color:var(--cream);border-radius:4px;padding:4px 14px;font:400 26px/1.3 var(--head);max-width:100%}
.k3-dl{font:700 18px var(--ui);color:var(--sub);letter-spacing:.08em}
.k3-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.k3-set .k3-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 6px;line-height:1.25;text-align:center;min-height:64px}
.k3-opt b{font:400 22px var(--head)}
.k3-opt small{font:700 14px/1.35 var(--ui);color:var(--sub)}
.k3-opt.on{border-color:var(--red);background:var(--soft);outline:2px solid var(--red);outline-offset:-2px}
.k3-recl b{font:400 26px var(--head);color:var(--ink);margin:0 2px}
.k3-recl.hot{color:var(--ink);background:var(--mark);border-radius:4px;padding:4px 12px;display:inline-block;animation:k3-stamp .35s ease-out}
.k3-recl.hot b{color:var(--red);font-size:32px}

/* ---- 遊ぶ画面（上 64px は共通の帯） ---- */
#board{position:absolute;left:0;top:64px;width:100%;background:var(--card);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#board table{width:100%;height:100%;border-collapse:collapse;table-layout:fixed}
#board th{height:30px;font:700 15px var(--ui);background:var(--wash);color:var(--sub);border-left:1px solid var(--line)}
#board th.nm{width:62px}
#board th.tot{width:86px}
#board th.f10{width:96px}
.k3-port #board th.nm{width:52px}
.k3-port #board th.tot{width:68px}
.k3-port #board th.f10{width:84px}
#board td{border:1px solid var(--line);text-align:center;padding:0;font-weight:700;vertical-align:top}
#board td.nm{font:700 16px var(--ui);vertical-align:middle;white-space:nowrap;overflow:hidden}
#board tr.cur td.nm{background:var(--red);color:var(--cream)}
#board td.tot{font:400 26px var(--head);vertical-align:middle}
#board td.fr{cursor:pointer}
#board td.fr:active{background:var(--wash)}
#board td.on{background:var(--mark)}
#board .mk{display:flex;height:calc(var(--rowH) * .45);border-bottom:1px solid var(--grid)}
#board .mk span{flex:1;font:700 19px/calc(var(--rowH) * .45) var(--ui)}
#board .mk span+span{border-left:1px solid var(--grid)}
#board .mk i{font-style:normal;display:inline-block;min-width:1.35em;line-height:1.2;border:2px solid var(--red);border-radius:50%;color:var(--red)}
#board .sc{font:700 21px/calc(var(--rowH) * .55 - 2px) var(--ui)}
.k3-port #board .mk span{font-size:17px}
.k3-port #board .sc{font-size:19px}

#lane{position:absolute;left:0;width:100%;overflow:hidden;background:var(--lane)}
#cv{position:absolute;left:0;top:0;touch-action:none;display:block}
.k3-tag{background:rgba(201,232,231,.95);border-radius:4px;color:var(--ink)}
#spd{position:absolute;left:14px;top:14px;padding:4px 12px;font:700 20px var(--ui);display:none;pointer-events:none}
#spd.on{display:block}
#hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:8px 16px;font:700 20px var(--ui);pointer-events:none;display:none;text-align:center;line-height:1.4}
/* 青緑の地の上の控えめなボタン（オンラインで相手をさがす・下の段・帯）: 地より明るい面と濃い青緑の線 */
.k3-home .ui-btn.sub,.k3-home .sh-foot .ui-btn,.k3-bar .ui-btn.sub,.shell-stage .sh-acts .ui-btn.sub{background:var(--card);color:var(--ink);border:2px solid var(--ink);box-shadow:none}
/* 主なボタン（球の藍）: 控えめなボタンとそろえて濃い青緑 2px の線で形を区切る（影は使わない） */
.k3-home .ui-btn:not(.sub),.shell-stage .sh-acts .ui-btn:not(.sub),.shell-stage .sh-result .ui-btn:not(.sub){border:2px solid var(--ink);box-shadow:none}
/* 帯: スコア表の見出しと同じ明るい青緑。下はスコア表と同じ細い線で区切るだけ */
.k3-bar{background:var(--wash);border-bottom:1px solid var(--line)}
/* 共通の帯：ゲーム名は1行（小さくして収める）、回の文は2行まで */
.k3-bar b{white-space:nowrap;flex:none}
.k3-bar .sh-info2{min-width:0;line-height:1.25}
.k3-bar .sh-r{flex:none}
#hint.on{display:block}
#hint small{display:block;font-size:17px;color:var(--sub);font-weight:400}

#call{position:absolute;left:0;right:0;top:40%;transform:translateY(-50%);padding:0 16px;text-align:center;pointer-events:none;opacity:0;z-index:6}
#call .band{padding:8px 0}
/* 掛け声: 影ではなく白い縁取りで読ませる */
#call b{display:block;font:400 64px/1.15 var(--head);color:var(--red);-webkit-text-stroke:10px var(--cream);paint-order:stroke fill}
#call small{display:block;font:700 22px var(--ui);color:var(--ink);margin-top:6px;-webkit-text-stroke:6px var(--cream);paint-order:stroke fill}
#call.show{opacity:1;animation:k3-pop .22s ease-out}
#call.big b{font-size:88px}
#call.huge .band{background:var(--ink);padding:22px 0;animation:k3-band .3s ease-out}
#call.huge b{font-size:96px;color:var(--cream);-webkit-text-stroke:0}
#call.huge small{font-size:26px;color:var(--cream);-webkit-text-stroke:0}
.k3-port #call b{font-size:56px}
.k3-port #call.big b{font-size:66px}
.k3-port #call.huge b{font-size:78px}
@keyframes k3-pop{from{transform:translateY(-50%) scale(.6)}to{transform:translateY(-50%) scale(1)}}
@keyframes k3-band{from{transform:scaleY(0)}to{transform:scaleY(1)}}
#lane.shake{animation:k3-shake .5s linear}
@keyframes k3-shake{0%,100%{transform:none}15%{transform:translate(-10px,4px)}30%{transform:translate(9px,-5px)}45%{transform:translate(-7px,3px)}60%{transform:translate(6px,-2px)}80%{transform:translate(-3px,1px)}}

/* ---- 結果（共通の shell.result）に足す物 ---- */
.k3-res{gap:12px}
.k3-res h2{font-family:var(--head);font-size:96px;line-height:1}
.k3-rmode{font:700 20px var(--ui);color:var(--sub);letter-spacing:.08em}
.k3-rx{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.k3-stamp{font:400 34px var(--head);color:var(--cream);background:var(--red);border-radius:4px;padding:4px 18px;transform:rotate(-3deg);animation:k3-stamp .35s ease-out}
.k3-stamp:empty{display:none}
@keyframes k3-stamp{from{transform:rotate(-3deg) scale(2.4);opacity:0}to{transform:rotate(-3deg) scale(1);opacity:1}}
.k3-rbest{font:400 40px/1.2 var(--head);color:var(--ink)}
.k3-rbest b{color:var(--red);margin:0 4px}
.k3-rbest.hot{color:var(--red)}
.k3-rbest small{font:700 24px var(--ui);margin-left:10px}
.k3-rsub{font:700 20px/1.5 var(--ui);color:var(--sub)}
.k3-rrank{font:700 19px/1.5 var(--ui);color:var(--sub);min-height:30px}
.k3-rrank.hit{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink);background:var(--mark);border:3px solid var(--red);border-radius:4px;padding:6px 22px;animation:k3-stamp .35s ease-out;transform:rotate(-2deg)}
.k3-rrank .rk-n{font:700 18px var(--ui);color:var(--sub)}
.k3-rrank .rk-ps{display:flex;gap:22px;align-items:baseline}
.k3-rrank .rk-p{font:700 22px var(--ui);white-space:nowrap}
.k3-rrank .rk-p b{font:400 40px/1 var(--head);color:var(--red);margin:0 2px 0 8px}
.k3-rrank .rk-p small{font:700 17px var(--ui);color:var(--sub)}


/* ---- ランキング・記録・設定 ---- */
.k3-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.k3-tabs [aria-pressed="true"]{outline:3px solid var(--red);outline-offset:2px}
.rk{list-style:none;margin:8px 0;padding:0;max-width:720px}
.rk li{display:grid;grid-template-columns:64px 1fr 100px;align-items:center;font:700 22px var(--ui);border-bottom:1px solid var(--line);padding:6px 4px}
.rk li .n{font:400 24px var(--head);color:var(--sub)}
.rk li .s{font:400 26px var(--head);text-align:right}
.rk li.me{background:var(--soft)}
.rk li.me .n{color:var(--red)}
.mine{font:700 21px var(--ui);margin:12px 0}
.k3-rec{gap:18px}
.k3-bests{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.k3-bests li{display:flex;flex-direction:column;align-items:center;border-top:1px solid var(--line);padding:8px 6px 10px;min-width:0}
.k3-bests span{font:700 18px var(--ui);color:var(--sub);white-space:nowrap}
.k3-bests b{font:400 44px/1.15 var(--head);color:var(--ink)}
.k3-bests small{font:700 16px var(--ui);color:var(--sub);white-space:nowrap}
.k3-rec table{border-collapse:collapse;width:100%;font-size:20px}
.k3-rec th,.k3-rec td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:right}
.k3-rec th{color:var(--sub)}
.k3-rec th:first-child,.k3-rec td:first-child{text-align:left}
.k3-rec td b{font:400 26px var(--head)}
.k3-rec h3{margin:0 0 6px;font:400 24px var(--head)}
.k3-bars{list-style:none;margin:0;padding:0}
.k3-bars li{display:grid;grid-template-columns:110px 1fr 56px;align-items:center;gap:10px;font-size:17px;padding:3px 0}
.k3-bars li i{display:block;height:18px;background:var(--grid);border-radius:4px}
.k3-bars li.best i{background:var(--red)}
.k3-bars li span:last-child{font:700 20px var(--ui);text-align:right}
.k3-set .it{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:14px}
.k3-set .it p{margin:0;font:700 22px var(--ui)}
.k3-set .it p small{display:block;font:400 17px/1.5 var(--ui);color:var(--sub);margin-top:4px}
.k3-set .it > :last-child{min-width:120px}
#stName{width:220px}