/* 見た目は blockmancala（同じ作者のゲーム）に合わせている。宝石・マス・丸ボタン・王冠のピル・結果画面はそこからの流用。
   フォント: 欧文・数字 = Nunito、数字の「1」だけ足のない字形（Round One）、和文 = M PLUS Rounded 1c。いずれも SIL Open Font License */
@font-face{font-family:"Nunito";font-weight:800 900;font-display:swap;src:url(./fonts/nunito-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Round One";font-weight:800;src:url(./fonts/one-800.woff2) format("woff2");unicode-range:U+31;}
@font-face{font-family:"Round One";font-weight:900;src:url(./fonts/one-900.woff2) format("woff2");unicode-range:U+31;}

:root{
  --cell:48px;
  --bg:#487af0; --bg-hi:#558aff;
  --line:rgba(150,192,255,.78);
  --text:#fff; --dim:rgba(255,255,255,.62);
  --gold:#ffd54a;
  --plate:#335ed0; --well:#3750a5; --well-s1:rgba(4,12,60,.7); --well-s2:rgba(4,12,60,.45);
  --well-rim:rgba(96,140,245,.8); --well-hi:rgba(150,186,255,.95);
  --plate-edge:rgba(80,130,255,.9); --plate-shade:rgba(0,8,50,.35);
  /* 文字の影はすべてこれ（光源は宝石と同じ上から。ふち取りや光のにじみは付けない） */
  --ts:0 3px 3px rgba(0,0,0,.18); --ts-s:0 2px 2px rgba(0,0,0,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;}
html{background-color:var(--bg);}
body{
  color:var(--text);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  font-family:"Round One","Nunito","M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Arial Rounded MT Bold",-apple-system,system-ui,sans-serif;
  background:var(--bg) radial-gradient(90% 55% at 50% 30%,var(--bg-hi),var(--bg) 75%);
  display:flex;justify-content:center;
}
button{font-family:inherit;cursor:pointer;}
#app{position:relative;width:100%;max-width:560px;height:100%;display:flex;flex-direction:column;align-items:center;
  padding:max(15px,env(safe-area-inset-top)) 8px max(14px,env(safe-area-inset-bottom));}
@supports (height:100dvh){#app{height:100dvh;}}

/* ---- 上のバー ---- */
.top{position:relative;width:100%;height:36px;flex-shrink:0;padding:0 4px;
  display:grid;grid-template-columns:1fr auto 1fr;column-gap:6px;align-items:start;}
.top-left{grid-column:1;justify-self:start;display:flex;gap:8px;}
.top-btns{grid-column:3;justify-self:end;display:flex;gap:8px;}
.best-pill{grid-column:2;height:33px;min-width:120px;display:flex;align-items:center;gap:8px;padding:0 12px 0 14px;border-radius:17px;
  border:1.5px solid var(--line);}
.crown{width:23px;height:20px;flex-shrink:0;margin-top:-1px;filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.25));}
.best-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1;padding-left:2px;}
.best-label{font-family:"M PLUS Rounded 1c",sans-serif;font-size:8px;font-weight:800;letter-spacing:.02em;margin-bottom:2px;}
#best{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;}
.round-btn{width:36px;height:36px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);background:rgba(120,160,255,.13);color:#fff;}
.round-btn:active{background:rgba(120,160,255,.22);}
.round-btn svg{width:21px;height:21px;fill:#fff;}
#btn-sound svg{width:25px;height:25px;margin-left:1.5px;}
.round-btn.off{opacity:.45;}

/* ---- スコア ---- */
.score-wrap{display:flex;flex-direction:column;align-items:center;margin-top:min(22px,2.6vh);flex-shrink:0;}
.score{font-size:min(64px,7.6vh);font-weight:900;line-height:1;height:min(66px,7.85vh);text-shadow:var(--ts);font-variant-numeric:tabular-nums;}
.score.bump{animation:bump 260ms cubic-bezier(.3,1.6,.5,1);}
@keyframes bump{40%{scale:1.12}}
.sub-stats{display:flex;gap:16px;margin-top:4px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:13px;font-weight:800;color:var(--dim);}
.sub-stats .chip{display:inline-block;min-width:26px;margin-left:4px;padding:1px 7px;border-radius:9px;text-align:center;
  font-family:"Round One","Nunito",sans-serif;font-size:15px;font-weight:900;box-shadow:0 2px 0 rgba(0,0,0,.18);}
.sub-stats b{font-family:"Round One","Nunito",sans-serif;font-size:16px;font-weight:900;color:#fff;text-shadow:var(--ts-s);}

/* ---- 盤面 ---- */
.stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;}
.board-frame{position:relative;width:min(100%,calc(100dvh - 300px),520px);min-width:240px;padding:28px 6px;}
.board{position:relative;width:100%;aspect-ratio:1;touch-action:none;cursor:pointer;
  filter:drop-shadow(0 0 1px var(--plate-edge)) drop-shadow(0 0 5px var(--plate-shade));}

.cell{position:absolute;width:calc(100% / 7);height:calc(100% / 7);
  left:calc(var(--c) * 100% / 7);top:calc(var(--r) * 100% / 7);}
/* 土台（マス同士の継ぎ目が見えないよう、少しだけはみ出させる）。十字の外側の角だけ丸める */
.cell::before{content:'';position:absolute;inset:-.6px;background:var(--plate);border-radius:inherit;}
.cell.tl{border-top-left-radius:22%;} .cell.tr{border-top-right-radius:22%;}
.cell.bl{border-bottom-left-radius:22%;} .cell.br{border-bottom-right-radius:22%;}
/* くぼみ。光は上から当たるので、上側の内側に影、下のふちに明るい線 */
.cell::after{content:'';position:absolute;inset:6%;border-radius:14%;background:var(--well);
  box-shadow:inset 0 4px 7px 1px var(--well-s1),inset 0 -1px 0 var(--well-s2),
             0 0 0 .7px var(--well-rim),0 1.3px 0 .2px var(--well-hi);}

/* 移動先の目印: 白い枠 + 中にペグの色の小さな面。大きさだけで脈打つ */
.mark{position:absolute;inset:6%;border-radius:20%;z-index:1;display:none;}
.cell.dest .mark{display:block;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.95);animation:hintPulse 900ms ease-in-out infinite alternate;}
.cell.dest .mark::after{content:'';position:absolute;inset:27%;border-radius:22%;background:var(--dest,#fff);
  box-shadow:inset -1.5px -1.5px 3px rgba(4,12,60,.35),inset 1px 1px 0 rgba(255,255,255,.35);}
@keyframes hintPulse{from{scale:.88}to{scale:1}}

/* ---- 玉（ビー玉） ----
   光源は左上。本体 = 球のグラデーション、中に転がると流れる模様（.m-tex）、いちばん上に動かない映り込み（::after）。
   位置・高さ・影は game.js が毎フレーム書く（高さは「少し大きく・少し上に・影が離れて薄く」で見せる） */
.marble{position:absolute;left:0;top:0;width:calc(100% / 7);height:calc(100% / 7);z-index:3;pointer-events:none;will-change:transform;}
.m-shadow{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle,rgba(4,12,60,.55) 0,rgba(4,12,60,.35) 45%,rgba(4,12,60,0) 72%);
  will-change:transform,opacity;}
.m-body{position:absolute;inset:11%;border-radius:50%;overflow:hidden;will-change:transform;
  background:radial-gradient(circle at 36% 30%,var(--hi) 0,var(--col) 40%,var(--lo) 86%,color-mix(in srgb,var(--lo),#0a0630 35%) 100%);
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--lo),#000 30%);}
/* 中の模様（ガラス玉の中のすじ）。大きめの面を転がった分だけずらして、回っているように見せる */
.m-tex{position:absolute;left:-100%;top:-100%;width:300%;height:300%;opacity:.55;mix-blend-mode:soft-light;
  background:
    repeating-linear-gradient(118deg,rgba(255,255,255,0) 0 7%,rgba(255,255,255,.9) 9% 11%,rgba(255,255,255,0) 13% 16.66%),
    repeating-linear-gradient(28deg,rgba(0,0,40,0) 0 10%,rgba(0,0,40,.5) 12% 13%,rgba(0,0,40,0) 15% 16.66%);}
/* 映り込み（光は左上からなので、球の左上に強い点、下側に回り込んだ淡い光）と、球のふちの陰 */
.m-body::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 33% 27%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,0) 15%),
    radial-gradient(ellipse 22% 12% at 54% 18%,rgba(255,255,255,.45),rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 42% 20% at 58% 86%,rgba(255,255,255,.3),rgba(255,255,255,0) 100%);
  box-shadow:inset -3px -4px 7px rgba(10,6,48,.3),inset 2px 2px 3px rgba(255,255,255,.25);}

/* 数字（玉の上面に印刷されたように見せる。転がっても読めるよう向きは固定。映り込みはその上に乗る） */
.m-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Round One","Nunito",sans-serif;font-weight:900;font-size:calc(var(--cell) * var(--k,.5));line-height:1;
  color:var(--ink,#fff);text-shadow:0 1.5px 1.5px rgba(0,0,0,.22);letter-spacing:-.02em;}

/* 数字ごとの色（data-c = log2(数字)。2〜128 は blockmancala と同じ値、その先を足し、11 からは巡回）。--ink は数字の色 */
.marble[data-c='1']{--col:#ff3f5c;--hi:#ffa9c1;--lo:#c80a3a;--ink:#fff;}      /* 2 */
.marble[data-c='2']{--col:#ff8c06;--hi:#ffca7c;--lo:#dc5500;--ink:#fff;}      /* 4 */
.marble[data-c='3']{--col:#ffe214;--hi:#fff5a0;--lo:#efae00;--ink:#7a4a00;}   /* 8 */
.marble[data-c='4']{--col:#22e545;--hi:#8ef8a6;--lo:#0ca42c;--ink:#fff;}      /* 16 */
.marble[data-c='5']{--col:#12e0ff;--hi:#7af3ff;--lo:#0590e2;--ink:#06306e;}   /* 32 */
.marble[data-c='6']{--col:#3f6dff;--hi:#a8bfff;--lo:#1c38cc;--ink:#fff;}      /* 64 */
.marble[data-c='7']{--col:#a849fe;--hi:#ddbcfe;--lo:#600cf0;--ink:#fff;}      /* 128 */
.marble[data-c='8']{--col:#ff4fd8;--hi:#ffb3ef;--lo:#c4129e;--ink:#fff;}      /* 256 */
.marble[data-c='9']{--col:#e8edff;--hi:#ffffff;--lo:#8f9cc4;--ink:#2b3a7a;}   /* 512 */
.marble[data-c='10']{--col:#ffc93c;--hi:#fff0a0;--lo:#c77700;--ink:#5a3000;}  /* 1024 */

/* 得点などの文字: ベタ塗り + 真下への薄い影だけ（ふち取り・光のにじみは使わない） */
.popup{position:absolute;width:calc(100% / 7);left:calc(var(--c) * 100% / 7);top:calc(var(--r) * 100% / 7);z-index:8;
  text-align:center;font-weight:900;font-size:calc(var(--cell) * .5);line-height:1;color:#fff;text-shadow:var(--ts);
  pointer-events:none;white-space:nowrap;animation:float 800ms ease-out forwards;}
.popup.wide{width:auto;left:calc((var(--c) + .5) * 100% / 7);translate:-50% 0;font-family:"M PLUS Rounded 1c",sans-serif;
  font-size:calc(var(--cell) * .55);color:var(--gold);}
@keyframes float{0%{opacity:0;transform:translateY(20%) scale(.6)}20%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:translateY(-90%)}}

/* 腕の残り数: 白い数字の後ろに、その腕の色の丸（白いふち） */
.arm-label{position:absolute;isolation:isolate;translate:-50% -50%;font-size:15px;font-weight:900;line-height:1;color:#fff;
  text-shadow:var(--ts-s);transition:scale 160ms cubic-bezier(.3,1.6,.5,1);}
.arm-label::before{content:'';position:absolute;left:50%;top:50%;width:1.65em;height:1.65em;translate:-50% -50%;z-index:-1;border-radius:50%;
  background:var(--col);box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 2px 2px rgba(0,0,0,.18);}
.arm-label{--col:#2b4bbf;}
.arm-label.low{scale:1.25;--col:#ff3f5c;}
.arm-label[data-arm='top']{left:50%;top:13px;}
.arm-label[data-arm='bottom']{left:50%;top:calc(100% - 13px);}
.arm-label[data-arm='left']{left:calc(6px + (100% - 12px) / 7);top:calc(28px + (100% - 56px) * 5 / 7 + 16px);}
.arm-label[data-arm='right']{left:calc(6px + (100% - 12px) * 6 / 7);top:calc(28px + (100% - 56px) * 5 / 7 + 16px);}

/* ---- 下の操作・ゲーム名 ---- */
.primary{border:1.5px solid var(--line);border-radius:24px;padding:12px 40px;font-family:"M PLUS Rounded 1c",sans-serif;
  font-size:18px;font-weight:900;color:#fff;background:rgba(120,160,255,.16);}
.primary:active{background:rgba(120,160,255,.3);}
.primary:disabled{opacity:.4;}
.primary.gold{border-color:var(--gold);background:rgba(255,213,74,.18);color:var(--gold);}
.brand{flex-shrink:0;max-width:100%;height:18px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:min(11px,2.9vw);font-weight:800;line-height:1;color:#c4d6ff;text-shadow:var(--ts-s);white-space:nowrap;pointer-events:none;}
.brand-logo{width:15px;height:15px;flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));}
.brand-name{font-weight:900;color:#fff;}
.brand-url{overflow:hidden;text-overflow:ellipsis;}

/* ---- 結果・あそびかた（盤面の上に青いすりガラス） ---- */
.overlay{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:#fff;}
.overlay[open]{display:flex;align-items:center;justify-content:center;}
.overlay::backdrop{background:rgba(20,45,140,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.overlay-box{width:min(calc(100% - 40px),380px);text-align:center;animation:boxIn 360ms cubic-bezier(.3,1.4,.5,1) both;}
@keyframes boxIn{from{opacity:0;translate:0 24px;scale:.94}}
.over-title{margin:0 0 20px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:26px;font-weight:900;text-shadow:var(--ts);}
.over-label{margin:0;font-size:14px;color:var(--dim);letter-spacing:.2em;}
.over-score{margin:0;font-size:64px;font-weight:900;line-height:1.1;text-shadow:var(--ts);}
.over-best{margin:4px 0 0;font-family:"M PLUS Rounded 1c",sans-serif;color:var(--gold);font-weight:800;}
.over-stats{display:flex;justify-content:center;gap:22px;margin:20px 0 26px;}
.stat{min-width:70px;display:flex;flex-direction:column;align-items:center;}
.stat-label{font-family:"M PLUS Rounded 1c",sans-serif;font-size:11px;font-weight:800;color:var(--dim);}
.stat-val{font-size:28px;font-weight:900;line-height:1.15;text-shadow:var(--ts);}
.over-actions{display:flex;justify-content:center;gap:10px;}
.over-actions .primary{padding:12px 22px;font-size:16px;}
.rules{margin:0 0 22px;padding-left:1.4em;text-align:left;font-family:"M PLUS Rounded 1c",sans-serif;font-size:14px;font-weight:800;
  line-height:1.65;text-shadow:var(--ts-s);}
.rules li+li{margin-top:8px;}
.rules b{color:var(--gold);font-weight:900;}
button:focus:not(:focus-visible){outline:none;}
button:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.overlay-box:focus{outline:none;}