/* 餅投げゲーム。盤面だけ夜色にして、ページの枠はサイト共通のまま。 */
.mochi-page{max-width:640px}
.mochi-game{margin:0 auto}
.mochi-hud{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;border-bottom:1px solid var(--line-strong);padding-bottom:10px}
.mochi-stat{display:flex;flex-direction:column;gap:0}
.mochi-stat span{font-size:13px;color:var(--sub);line-height:1.4;white-space:nowrap}
.mochi-stat strong{font:700 28px/1.2 var(--gothic);font-variant-numeric:tabular-nums}
.mochi-sound{justify-self:end;border:1px solid var(--line-strong);background:#fff;color:var(--sub);font:500 14px/1.4 var(--gothic);padding:7px 10px;border-radius:2px;cursor:pointer;margin-bottom:4px}
.mochi-sound:hover{border-color:var(--accent);color:var(--accent)}
.mochi-quit{display:none;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:500 14px/1.4 var(--gothic);padding:7px 10px;border-radius:2px;cursor:pointer;margin-bottom:4px}
.mochi-stage{position:relative;margin-top:12px;background:#0b1a2b;border:1px solid var(--line-strong);overflow:hidden}
.mochi-stage canvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab}
.mochi-stage canvas:active{cursor:grabbing}
.mochi-combo{position:absolute;top:12px;left:12px;z-index:2;background:#f6c945;color:#222629;font:700 14px/1.4 var(--gothic);padding:4px 10px;border-radius:2px;font-variant-numeric:tabular-nums}
.mochi-combo[hidden]{display:none}
.mochi-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:rgba(8,18,32,.84);color:#fff;text-align:center}
.mochi-overlay[hidden]{display:none}
.mochi-overlay h2{margin:0;font:600 26px/1.5 var(--mincho)}
.mochi-overlay p{margin:0;font-size:15px;line-height:1.8;color:#dbe6f2}
.mochi-kicker{margin:0!important;font:700 12px/1.4 var(--gothic)!important;letter-spacing:.16em;color:#f6c945!important;text-transform:uppercase}
.mochi-btn{border:0;background:#fff;color:var(--accent);font:700 17px/1.3 var(--gothic);padding:12px 26px;border-radius:2px;cursor:pointer;margin-top:6px}
.mochi-btn:hover{background:#eef3f8;color:var(--accent-dark)}
.mochi-btn.line{background:transparent;border:1px solid #fff;color:#fff;margin-top:0}
.mochi-btn.line:hover{background:rgba(255,255,255,.12);color:#fff}
.mochi-best{font-size:14px!important;color:#cfdcec!important}
.mochi-final{margin:0!important;color:#fff!important;font-variant-numeric:tabular-nums}
.mochi-final strong{font:700 56px/1.1 var(--gothic)}
.mochi-final span{font-size:20px;margin-left:4px}
.mochi-rank{font-weight:700;color:#f6c945!important}
.mochi-new{font-weight:700;color:#f6c945!important}
.mochi-new[hidden]{display:none}
.mochi-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:4px}
.mochi-how{font-size:15px!important;line-height:1.7!important;color:#fff!important}
.mochi-help{font-size:14px;line-height:1.8;color:var(--sub);margin:12px 0 0}

/* プレイ中は盤面を画面いっぱいに出す（スマホで下が見切れないように） */
body.mochi-playing{overflow:hidden}
body.mochi-playing .mochi-game{position:fixed;inset:0;z-index:100;background:#0b1a2b;margin:0;max-width:none;display:flex;flex-direction:column}
body.mochi-playing .mochi-hud{grid-template-columns:1fr 1fr auto auto;gap:8px;background:#071322;color:#fff;border-bottom:1px solid rgba(255,255,255,.2);padding:calc(8px + env(safe-area-inset-top)) 16px 8px;margin:0;align-items:center}
body.mochi-playing .mochi-stat span{color:#cfdcec}
body.mochi-playing .mochi-stat strong{color:#fff}
body.mochi-playing .mochi-sound{border-color:rgba(255,255,255,.4);background:transparent;color:#fff;margin:0}
body.mochi-playing .mochi-quit{display:inline-block}
body.mochi-playing .mochi-stage{flex:1;min-height:0;margin:0;border:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(#071322,#0a1826)}
body.mochi-playing .mochi-stage canvas{width:auto;height:auto;max-width:100%;max-height:100%}
body.mochi-playing .mochi-help{display:none}
@media(max-width:700px){
  .mochi-page{max-width:none}
  .mochi-stat strong{font-size:24px}
  .mochi-overlay h2{font-size:23px}
  .mochi-final strong{font-size:48px}
  .mochi-overlay{padding:18px}
}

/* ランキング */
.mochi-name{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px;color:#cfdcec}
.mochi-name input{width:130px;font:500 16px/1.4 var(--gothic);padding:8px 10px;border:1px solid rgba(255,255,255,.45);border-radius:2px;background:#fff;color:var(--ink);text-align:center}
.mochi-rank-result{font-size:18px;font-weight:700;color:#f6c945!important;min-height:1.4em}
.mochi-ranking{margin:32px 0 0;border-top:3px solid var(--ink);padding-top:16px}
.mochi-ranking-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mochi-ranking-head h2{margin:0;font:600 24px/1.4 var(--mincho)}
.mochi-ranking-head span{font-size:14px;color:var(--sub)}
.mochi-ranking-list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line-strong)}
.mochi-ranking-list>li{display:grid;grid-template-columns:2.5em 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.6}
.mochi-ranking-list .rank-no{color:var(--sub);font-variant-numeric:tabular-nums}
.mochi-ranking-list .rank-name{font-weight:700;overflow-wrap:anywhere}
.mochi-ranking-list .rank-score{font-variant-numeric:tabular-nums;white-space:nowrap}
.mochi-ranking-empty{display:block!important;color:var(--sub);font-size:15px}
.mochi-ranking-note{font-size:13px;color:var(--sub);line-height:1.7;margin:10px 0 0}

/* むずかしさ */
.mochi-levels{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mochi-level{min-height:40px;border:1px solid rgba(255,255,255,.45);background:transparent;color:#dbe6f2;font:600 14px/1.2 var(--gothic);padding:8px 12px;border-radius:2px;cursor:pointer}
.mochi-level:hover{border-color:#fff;color:#fff}
.mochi-level[aria-pressed="true"]{background:#f6c945;border-color:#f6c945;color:#222629}
.mochi-level[aria-pressed="true"]:hover{color:#222629}
.mochi-level-note{font-size:13px!important;color:#cfdcec!important;margin:0!important}
.mochi-level-badge{display:none;position:absolute;top:12px;right:12px;z-index:2;background:rgba(255,255,255,.95);color:var(--accent);font:700 12px/1.4 var(--gothic);padding:4px 8px;border-radius:2px}
body.mochi-playing .mochi-level-badge{display:block}
.mochi-ranking-list .rank-level{font-size:11px;font-weight:400;color:var(--sub);border:1px solid var(--line);padding:0 4px;margin-left:4px;white-space:nowrap}

@media(max-width:700px){
  .mochi-page .g-title{padding:18px 0 12px;margin-bottom:16px}
  .mochi-page .g-title h1{font-size:30px}
  .mochi-page .g-title p{display:none}
}

.mochi-prices{font-size:13px!important;color:#cfdcec!important;margin:0!important}

.mochi-retry-send{font-size:15px;padding:9px 18px}
.mochi-retry-send[hidden]{display:none}