/* =========================================================
 * 毎日雀とも麻雀 — ベーススタイル
 * 60代以上向け: 大きい文字 / 大きいボタン / 高コントラスト
 * ========================================================= */
:root {
  --green-deep: #16472f;
  --green-table: #1b5e3f;
  --green-light: #2a7a52;
  --gold: #c9a227;
  --gold-bright: #ffd700;
  --cream: #faf6ec;
  --cream-dark: #efe7d4;
  --sumi: #2b2b27;
  --red: #c0392b;
  --blue: #2c5f9e;
  --shadow: 0 4px 16px rgba(20, 30, 20, .25);
  --radius: 18px;
  --font-base: 19px;
  --serif: 'Yu Mincho', 'Hiragino Mincho ProN', 'MS PMincho', serif;
  --sans: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
}
html[data-font='large']  { --font-base: 21px; }
html[data-font='xlarge'] { --font-base: 24px; }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  font-family: var(--sans);
  font-size: var(--font-base);
  color: var(--sumi);
  background: #0e2018;
  display: flex; justify-content: center;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}

#app {
  position: relative;
  width: 100%; max-width: 480px; height: 100dvh;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 0 60px rgba(0,0,0,.5);
}

/* ===================== 画面共通 ===================== */
.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.screen.active { display: flex; }
.screen.anim-in  { animation: screenIn .42s cubic-bezier(.22,.9,.32,1) both; }
.screen.anim-out { animation: screenOut .3s ease both; }

.scroll-pane { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ===================== ボタン ===================== */
.btn {
  display: block; width: 100%;
  min-height: 64px;
  border: none; border-radius: var(--radius);
  font-family: var(--sans); font-size: 1.12em; font-weight: 700;
  color: #fff; cursor: pointer;
  background: linear-gradient(180deg, var(--green-light), var(--green-deep));
  box-shadow: 0 5px 0 #0d3320, var(--shadow);
  transition: transform .1s, box-shadow .1s, filter .2s;
  padding: 12px 20px;
  letter-spacing: .04em;
  position: relative; overflow: hidden;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #0d3320, 0 2px 8px rgba(0,0,0,.3); }
.btn.primary {
  background: #d9a921 url('../assets/btn_gold.png') center/cover no-repeat;
  border: 2.5px solid #9a7416;
  box-shadow: 0 5px 0 #8a6508, var(--shadow), inset 0 2px 6px rgba(255,255,255,.5);
  color: #3a2c05;
  text-shadow:
    0 0 7px rgba(255, 250, 228, .95),
    0 1px 0 rgba(255, 252, 240, .95), 0 -1px 0 rgba(255, 252, 240, .95),
    1px 0 0 rgba(255, 252, 240, .95), -1px 0 0 rgba(255, 252, 240, .95);
  font-size: 1.3em;
  min-height: 80px;
}
.btn.primary:active { box-shadow: 0 1px 0 #8a6508, 0 2px 8px rgba(0,0,0,.3); }
.btn.sub {
  background: linear-gradient(180deg, #fdfaf2, #e8e0cd);
  color: var(--sumi);
  box-shadow: 0 4px 0 #c5bba2, 0 3px 10px rgba(0,0,0,.12);
  min-height: 58px;
}
.btn.sub:active { box-shadow: 0 1px 0 #c5bba2; }
.btn.danger { background: linear-gradient(180deg, #d9534f, #a33b38); box-shadow: 0 5px 0 #7c2b29, var(--shadow); }
.btn:disabled { filter: grayscale(.7) opacity(.55); pointer-events: none; }

.btn .btn-pulse { animation: btnPulse 2.2s ease-in-out infinite; }
.btn.glow::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: btnSheen 2.8s ease-in-out infinite;
}

/* ===================== タイトル画面 ===================== */
#screen-title { background: #142a20; }
.title-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: kenburns 26s ease-in-out infinite alternate;
}
.title-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,25,18,.18) 0%, rgba(10,25,18,.02) 45%, rgba(10,25,18,.55) 100%); }
.title-content {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 30px 12px;
  width: 100%; overflow: hidden;
}
.title-kicker {
  font-family: var(--serif); color: #fff; font-size: .7em; letter-spacing: .1em;
  white-space: nowrap; max-width: 100%;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  opacity: 0; animation: fadeUp 1s ease .3s both;
}
.title-logo-img {
  width: auto; max-width: 70%;
  max-height: 42dvh;
  filter: drop-shadow(0 10px 34px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(255, 215, 0, .35));
  animation: logoIn 1.5s cubic-bezier(.18, 1.2, .3, 1) .35s both;
}
@keyframes logoIn {
  0%   { opacity: 0; transform: scale(1.45) translateY(-34px); filter: brightness(2.4) blur(6px); }
  55%  { opacity: 1; filter: brightness(1.25) blur(0); }
  78%  { transform: scale(.97) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
}
.title-logo {
  font-family: var(--serif); font-weight: 900;
  font-size: 3.1em; line-height: 1.25; text-align: center;
  color: #fff;
  text-shadow: 0 3px 0 rgba(90, 60, 0, .35), 0 8px 30px rgba(0,0,0,.65);
}
.title-logo .char { display: inline-block; opacity: 0; animation: charDrop .7s cubic-bezier(.18,1.4,.4,1) both; }
.title-logo .accent { color: var(--gold-bright); }
.title-sub {
  color: #ffeebb; font-size: .76em; letter-spacing: .05em;
  white-space: nowrap; max-width: 100%;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  opacity: 0; animation: fadeUp 1s ease 1.6s both;
}
.title-bottom { position: relative; padding: 0 34px calc(46px + env(safe-area-inset-bottom)); }
.title-tap {
  text-align: center; color: #fff; font-size: 1.05em; letter-spacing: .1em;
  animation: softBlink 1.8s ease-in-out infinite;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  padding: 20px; cursor: pointer;
}

/* ===================== ホーム画面 ===================== */
#screen-home { background: var(--cream); }
.home-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
}
.home-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250,246,236,0) 30%, rgba(250,246,236,.88) 62%, rgba(250,246,236,.98) 100%); }
.home-top {
  position: relative; display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(14px + env(safe-area-inset-top)) 16px 0;
}
.home-badge {
  background: rgba(255,253,245,.92); border: 1.5px solid var(--gold);
  border-radius: 14px; padding: 8px 12px;
  font-size: .8em; font-weight: 700; line-height: 1.5;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.home-badge .num { font-size: 1.25em; color: var(--green-deep); }
.home-secretary {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin-top: -6px;
}
.home-secretary img {
  width: auto; max-width: 66%;
  max-height: 38dvh; /* 小さい端末でも頭が切れない */
  filter: drop-shadow(0 14px 24px rgba(40,60,40,.4));
  animation: floaty 4.6s ease-in-out infinite;
}
.sec-bubble {
  position: relative;
  background: #fffdf6 url('../assets/washi.png') center/cover;
  border: 2px solid var(--gold);
  border-radius: 20px; padding: 14px 18px;
  margin: -30px 22px 0; z-index: 2;
  font-size: 1.02em; line-height: 1.75;
  box-shadow: var(--shadow);
  animation: popIn .5s cubic-bezier(.2,1.4,.4,1) both;
}
.sec-bubble::before {
  content: ''; position: absolute; top: -12px; left: 50%;
  width: 20px; height: 20px;
  background: #fffdf6; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold);
  transform: translateX(-50%) rotate(45deg);
}
.sec-bubble .sec-name { font-size: .78em; color: #9a7b16; font-weight: 700; margin-bottom: 2px; }
.home-menu {
  position: relative;
  padding: 18px 22px calc(26px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 13px;
}
.home-menu-row { display: flex; gap: 13px; }
.home-menu-row .btn { flex: 1; font-size: .98em; padding: 12px 6px; white-space: nowrap; }

/* ===================== 対局画面 ===================== */
#screen-match {
  background: radial-gradient(140% 100% at 50% 30%, var(--green-table) 0%, var(--green-deep) 78%);
}
#screen-match .table-texture {
  position: absolute; inset: 0; opacity: .5;
  background-size: cover; background-position: center;
  mix-blend-mode: overlay;
}
.match-top {
  position: relative;
  display: flex; gap: 7px;
  padding: calc(8px + env(safe-area-inset-top)) 8px 4px;
}
.cpu-card {
  flex: 1;
  background: rgba(8, 30, 20, .55);
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 13px;
  padding: 7px 9px;
  color: #e9f5ee;
  font-size: .84em;
  line-height: 1.5;
  transition: box-shadow .3s, border-color .3s;
}
.cpu-card .cpu-name { font-weight: 700; font-size: 1.05em; }
.cpu-card .cpu-score { color: #ffe9a8; font-weight: 700; }
.cpu-card .cpu-state { min-height: 1.3em; font-size: .92em; color: #9fd8b8; }
.cpu-card.riichi {
  border-color: #ff7b6b;
  box-shadow: 0 0 14px rgba(255, 90, 70, .55);
}
.cpu-card.riichi .cpu-state { color: #ffb3a8; font-weight: 700; }
.cpu-card.active-turn { border-color: var(--gold-bright); box-shadow: 0 0 12px rgba(255, 215, 0, .45); }
.cpu-card .cpu-melds { display: flex; gap: 2px; margin-top: 2px; flex-wrap: wrap; }
.cpu-card .cpu-melds .tile { width: 13px; }

.match-info {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 6px 10px;
  color: #d8ecdf; font-size: .95em;
}
.match-info .dora-area { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.match-info .dora-area .tile { width: 30px; }
.match-info .wall-left { background: rgba(8,30,20,.5); border-radius: 11px; padding: 4px 12px; font-weight: 700; }
.match-info .my-score { color: #ffe9a8; font-weight: 800; }

.rivers {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  padding: 2px 10px;
  min-height: 0;
}
.cpu-rivers {
  display: flex; gap: 8px; flex: 1; min-height: 0;
}
.river-block {
  flex: 1;
  background: rgba(8, 30, 20, .32);
  border-radius: 10px;
  padding: 4px;
  display: flex; flex-wrap: wrap; gap: 1.5px;
  align-content: flex-start;
  overflow: hidden;
}
.river-block { cursor: pointer; transition: background .2s; position: relative; }
.river-block:active { background: rgba(8, 30, 20, .5); }
.river-block .tile { width: 23px; }
.river-block::after {
  content: '🔍'; position: absolute; right: 3px; bottom: 2px;
  font-size: 11px; opacity: .5;
}
.my-river-row { display: flex; align-items: stretch; gap: 8px; margin-top: 6px; height: 80px; }
.my-river {
  flex: 1;
  background: rgba(8, 30, 20, .32);
  border-radius: 10px;
  padding: 4px 5px;
  display: flex; flex-wrap: wrap; gap: 2px;
  align-content: flex-start;
}
.my-river .tile { width: 26px; }
.tile.riichi-tile { transform: rotate(90deg) translateY(-2px); transform-origin: center; margin: 0 4px; }
.tile.called-tile { opacity: .35; }

/* ---- 待ち牌バー (リーチ/テンパイ時) ---- */
.waits-bar {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 10px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,.16) 18%, rgba(255,215,0,.16) 82%, transparent);
  border-top: 1px solid rgba(255,215,0,.4);
  border-bottom: 1px solid rgba(255,215,0,.4);
  color: #ffe9a8; font-weight: 800; font-size: 1em;
  animation: fadeIn .4s ease both;
  z-index: 6;
}
.waits-bar .tile { width: 38px; }
.waits-bar .w-label { letter-spacing: .12em; }

/* ---- 直近捨て牌のセンター巨大表示 ---- */
.last-discard-pop {
  position: absolute; left: 50%; top: 36%;
  transform: translate(-50%, -50%);
  z-index: 25;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.last-discard-pop .ldp-tile { width: 78px; line-height: 0; filter: drop-shadow(0 12px 26px rgba(0,0,0,.55)); }
.last-discard-pop .ldp-tile .tile { width: 100%; }
.last-discard-pop .ldp-label {
  background: rgba(8, 30, 20, .88); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: 5px 16px;
  font-size: .92em; font-weight: 800; white-space: nowrap;
}
.last-discard-pop.pop { animation: ldpIn .3s cubic-bezier(.2,1.5,.4,1) both; }
.last-discard-pop.fade { animation: ldpOut .45s ease both; }

/* ---- 自分の手牌 (2段デカ牌) ---- */
.my-area {
  position: relative;
  background: linear-gradient(180deg, rgba(6,24,16,.0), rgba(6,24,16,.6) 26%);
  padding: 6px 6px calc(10px + env(safe-area-inset-bottom));
}
.my-area.tenpai::before {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 44px rgba(255, 215, 0, .3);
  animation: tenpaiPulse 2s ease-in-out infinite;
  pointer-events: none; z-index: 1;
}
.my-melds { display: flex; gap: 6px; justify-content: flex-end; padding: 0 4px 4px; min-height: 10px; }
.my-melds .meld { display: flex; gap: 1px; }
.my-melds .tile { width: 30px; }

.hand-rows {
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 2px 4px;
  position: relative; z-index: 2;
}
.hand-line {
  display: flex; justify-content: center; align-items: flex-end; gap: 5px;
  min-height: 8px;
}
.hand-line .tile {
  width: calc((100% - 44px) / 7.5);
  max-width: 60px;
  cursor: pointer;
  transition: transform .15s ease, filter .2s ease;
  border-radius: 8px;
}
.hand-line .tile.selected {
  transform: translateY(-10px) scale(1.08);
  filter: drop-shadow(0 8px 16px rgba(255, 200, 40, .65));
}
.hand-line .tile.suggest { animation: suggestGlow 1.5s ease-in-out infinite; }
.hand-line .tile:active { transform: translateY(-7px); }
.hand-line .tile.drawn {
  margin-left: 16px; position: relative;
  outline: 3px solid var(--gold-bright); outline-offset: -1px;
  border-radius: 8px;
}
.hand-line .tile.drawn::after {
  content: '引いた牌'; position: absolute; bottom: -17px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold-bright); color: #4a3500;
  font-size: 10.5px; font-weight: 900; line-height: 1.2;
  border-radius: 7px; padding: 1px 6px;
  white-space: nowrap;
}
.hand-rows { padding-bottom: 18px; }

/* ---- 巨大プレビュー確認バー ---- */
.discard-preview {
  position: absolute; left: 8px; right: 8px; bottom: 100%;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 253, 246, .98);
  border: 3px solid var(--gold);
  border-radius: 22px;
  padding: 13px 50px 13px 14px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
  z-index: 42;
  animation: popIn .22s cubic-bezier(.2,1.4,.4,1) both;
}
.discard-preview .dp-tile { width: 92px; flex-shrink: 0; line-height: 0; filter: drop-shadow(0 6px 14px rgba(80,60,10,.35)); }
.discard-preview .dp-tile .tile { width: 100%; }
.discard-preview .dp-body { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.discard-preview .dp-name { font-size: 1.5em; font-weight: 900; color: var(--sumi); font-family: var(--serif); }
.discard-preview .dp-confirm {
  min-height: 62px;
  border: 2px solid #7c2b1a; border-radius: 15px;
  background: #c93f24 url('../assets/btn_red.png') center/cover no-repeat;
  color: #fff; font-size: 1.18em; font-weight: 900; letter-spacing: .06em;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .6);
  box-shadow: 0 4px 0 #92301c;
  cursor: pointer;
  transition: transform .08s;
}
.discard-preview .dp-confirm:active { transform: translateY(3px); box-shadow: 0 1px 0 #92301c; }
.discard-preview .dp-cancel {
  position: absolute; top: 8px; right: 8px;
  width: 42px; height: 42px;
  border: none; border-radius: 50%;
  background: #efe3c0; color: #6b5a23;
  font-size: 1.25em; font-weight: 900; cursor: pointer;
}

/* ---- アクションボタン (大型) ---- */
.action-row {
  display: flex; gap: 8px; padding: 8px 4px 2px;
  min-height: 74px;
  position: relative; z-index: 2;
}
.action-row .abtn {
  flex: 1;
  min-height: 64px;
  border: none; border-radius: 16px;
  font-size: 1.18em; font-weight: 900; letter-spacing: .06em;
  color: #fff; cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.38);
  transition: transform .08s;
  position: relative; overflow: hidden;
}
.action-row .abtn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.38); }
.abtn.a-riichi {
  background: #d4452a url('../assets/btn_red.png') center/cover no-repeat;
  border: 2px solid #7c2b1a;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .6);
}
.abtn.a-agari  {
  background: #ddb024 url('../assets/btn_gold.png') center/cover no-repeat;
  border: 2px solid #9a7416;
  color: #3a2c05;
  text-shadow:
    0 0 7px rgba(255, 250, 228, .95),
    0 1px 0 rgba(255, 252, 240, .95), 0 -1px 0 rgba(255, 252, 240, .95),
    1px 0 0 rgba(255, 252, 240, .95), -1px 0 0 rgba(255, 252, 240, .95);
  animation: agariBtn 1s ease-in-out infinite; font-size: 1.3em;
}
.abtn.a-call   { background: linear-gradient(180deg, #5b9bd5, #2c5f9e); }
.abtn.a-skip   { background: linear-gradient(180deg, #8a958f, #5d6862); }
.abtn.a-consult{ background: linear-gradient(180deg, #b07cc6, #7d4f93); }

/* ---- 爽快演出レイヤー ---- */
.flash-layer {
  position: absolute; inset: 0; background: #fff;
  z-index: 88; pointer-events: none;
  animation: flashOut .55s ease-out both;
}
.shockwave {
  position: absolute; left: 50%; top: 44%;
  width: 50px; height: 50px;
  border: 6px solid rgba(255, 215, 0, .95);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 87; pointer-events: none;
  animation: shockOut .75s cubic-bezier(.1,.8,.3,1) both;
}
.shockwave.red { border-color: rgba(255, 90, 60, .9); }
#app.shake { animation: appShake .5s ease both; }
.phoenix-rise {
  position: absolute; left: 50%; top: 50%;
  width: 320px; height: 320px;
  transform: translate(-50%, -50%);
  z-index: 59; pointer-events: none;
  animation: phoenixUp 1.6s cubic-bezier(.2,.7,.3,1) both;
}
.phoenix-rise img { width: 100%; height: 100%; object-fit: contain; }

/* 秘書相談 吹き出し (対局中) */
.match-secretary {
  position: absolute; left: 10px; right: 10px; bottom: 100%;
  margin-bottom: 8px;
  background: rgba(255, 253, 246, .97);
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 12px 46px 12px 64px;
  font-size: .92em; line-height: 1.65;
  box-shadow: var(--shadow);
  z-index: 30;
  animation: popIn .35s cubic-bezier(.2,1.4,.4,1) both;
}
.match-secretary .sec-avatar {
  position: absolute; left: 8px; bottom: 6px;
  width: 48px; height: 48px; border-radius: 50%;
  background-size: 190%; background-position: 50% 12%;
  border: 2px solid var(--gold);
}
.match-secretary .sec-close {
  position: absolute; top: 6px; right: 8px;
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: #efe3c0; color: #6b5a23; font-size: 1.1em; font-weight: 800;
  cursor: pointer;
}

/* ===================== カットイン ===================== */
.cutin-layer { position: absolute; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.cutin {
  position: absolute; left: 0; right: 0; top: 38%;
  padding: 18px 0;
  text-align: center;
  font-family: var(--serif); font-weight: 900;
  color: #fff;
  animation: cutinSweep 1.25s cubic-bezier(.2,.9,.3,1) both;
}
.cutin .cutin-text {
  font-size: 3em; letter-spacing: .22em; padding-left: .22em;
  display: inline-block;
  text-shadow: 0 4px 18px rgba(0,0,0,.5);
  animation: cutinText 1.25s ease both;
}
.cutin.c-riichi { background: linear-gradient(90deg, transparent, rgba(212,69,42,.92) 18%, rgba(212,69,42,.92) 82%, transparent); }
.cutin.c-agari  { background: linear-gradient(90deg, transparent, rgba(184,134,11,.94) 18%, rgba(184,134,11,.94) 82%, transparent); }
.cutin.c-call   { background: linear-gradient(90deg, transparent, rgba(44,95,158,.92) 18%, rgba(44,95,158,.92) 82%, transparent); padding: 10px 0; }
.cutin.c-call .cutin-text { font-size: 2em; }
.cutin.c-yakuman {
  background: linear-gradient(90deg, transparent, rgba(120,30,160,.95) 15%, rgba(200,40,60,.95) 50%, rgba(184,134,11,.95) 85%, transparent);
}

/* 飛び牌 (打牌アニメ用) */
.fly-tile {
  position: fixed; z-index: 70; pointer-events: none;
  transition: all .38s cubic-bezier(.3,.7,.4,1);
}

/* ===================== 結果画面 ===================== */
#screen-result {
  background: radial-gradient(120% 90% at 50% 0%, #24563c 0%, #122e20 80%);
  color: #f6f2e6;
}
.result-pane { flex: 1; overflow-y: auto; padding: calc(20px + env(safe-area-inset-top)) 22px 20px; }
.result-title {
  text-align: center; font-family: var(--serif);
  font-size: 1.9em; font-weight: 900; letter-spacing: .2em;
  color: #ffe9a8;
  text-shadow: 0 3px 14px rgba(0,0,0,.5);
  margin-bottom: 6px;
}
.result-sub { text-align: center; color: #cfe6d6; font-size: .92em; margin-bottom: 14px; }
.result-hand { display: flex; justify-content: center; gap: 2px; flex-wrap: wrap; margin: 8px 0 4px; }
.result-hand .tile { width: 30px; }
.result-hand .tile.win-tile { outline: 3px solid var(--gold-bright); outline-offset: -1px; border-radius: 6px; }
.result-dora { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: .85em; color: #cfe6d6; margin-bottom: 10px; }
.result-dora .tile { width: 24px; }
.yaku-list { margin: 12px auto; max-width: 340px; }
.yaku-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: rgba(255,253,245,.08);
  border: 1px solid rgba(255,233,168,.25);
  border-radius: 12px;
  padding: 9px 16px; margin-bottom: 7px;
  font-size: 1.02em; font-weight: 700;
  opacity: 0;
}
.yaku-item span:first-child { flex: 1; line-height: 1.45; }
.yaku-item .yaku-han { white-space: nowrap; }
.yaku-item.stamp { animation: yakuStamp .45s cubic-bezier(.2,1.5,.4,1) both; }
.yaku-item .yaku-han { color: #ffe9a8; }
.result-points {
  text-align: center; margin: 16px 0 8px;
}
.result-points .pts {
  font-family: var(--serif); font-size: 3em; font-weight: 900; color: #fff;
  text-shadow: 0 0 28px rgba(255, 215, 0, .45);
}
.result-points .rank-label {
  display: inline-block; margin-left: 10px;
  background: linear-gradient(180deg, #ffd34e, #c9920a);
  color: #4a3500; border-radius: 12px;
  font-weight: 900; font-size: 1.1em;
  padding: 5px 16px;
  animation: popIn .5s cubic-bezier(.2,1.6,.4,1) both;
}
.exp-bar-wrap { max-width: 340px; margin: 14px auto; font-size: .9em; }
.exp-bar { height: 16px; background: rgba(255,255,255,.14); border-radius: 9px; overflow: hidden; margin-top: 5px; }
.exp-bar .exp-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #7dc98f, #ffd700);
  border-radius: 9px;
  transition: width 1s cubic-bezier(.3,.8,.3,1);
}
.result-bottom { padding: 0 22px calc(24px + env(safe-area-inset-bottom)); }

/* スコア一覧 */
.score-table { max-width: 340px; margin: 10px auto; font-size: .95em; }
.score-row {
  display: flex; justify-content: space-between;
  padding: 7px 14px; border-bottom: 1px dashed rgba(255,255,255,.18);
}
.score-row.me { color: #ffe9a8; font-weight: 800; }
.score-row .delta.plus { color: #8ee6a3; }
.score-row .delta.minus { color: #ff9c8d; }

/* ===================== 福引画面 ===================== */
#screen-lottery {
  background: radial-gradient(110% 80% at 50% 18%, #5a1f1f 0%, #2e0f0f 75%);
  color: #fff4e0;
  align-items: center; justify-content: center;
  text-align: center;
}
.lottery-stage { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 20px; }
.lottery-title { font-family: var(--serif); font-size: 1.5em; font-weight: 900; letter-spacing: .25em; color: #ffd9a0; }
.lottery-bonus {
  background: rgba(255, 217, 160, .12);
  border: 1.5px solid rgba(255, 217, 160, .45);
  border-radius: 14px;
  padding: 10px 18px;
  font-size: .9em; line-height: 1.7;
  max-width: 330px;
  animation: popIn .5s ease both;
}
.garapon-wrap {
  position: relative; flex-shrink: 0;
  width: clamp(175px, 30dvh, 250px); height: clamp(175px, 30dvh, 250px);
}
.garapon-wrap img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.5));
}
.garapon-wrap.garapon-in img { animation: garaponIn .8s cubic-bezier(.2,1.4,.4,1) both; }
.garapon-wrap.spinning img { animation: garaponSpin .42s linear infinite; }
.lottery-ball {
  position: absolute; left: 50%; bottom: 4px;
  width: 58px; height: 58px;
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  box-shadow: inset -7px -9px 14px rgba(0,0,0,.3), inset 6px 8px 12px rgba(255,255,255,.55), 0 8px 18px rgba(0,0,0,.45);
  z-index: 5;
}
.lottery-ball.drop { animation: ballDrop .85s cubic-bezier(.3,1.6,.4,1) both; }
.lottery-ball.zooming {
  animation: ballZoomUp .75s cubic-bezier(.4,.1,.3,1) both;
}
.lottery-ball.zooming.quiver {
  animation: ballZoomUp .75s cubic-bezier(.4,.1,.3,1) both,
             ballQuiver .1s linear .75s infinite;
}
.kakuhen-veil {
  position: absolute; inset: 0;
  background: rgba(8, 2, 2, .82);
  z-index: 8;
  animation: fadeIn .4s ease both;
}
.kakuhen-beam {
  position: absolute; left: 50%; top: -10%;
  width: 130px; height: 130%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--beam, #ffd700) 30%, #fff 50%, var(--beam, #ffd700) 70%, transparent);
  opacity: .85;
  filter: blur(6px);
  z-index: 9;
  animation: beamIn .9s ease both;
}

/* 獲得画面の回転光線 (画面背景層 — スクロール領域に影響しない) */
.acquire-rays {
  position: absolute; left: 50%; top: 34%;
  width: 150vmax; height: 150vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(var(--rayc, rgba(255,220,120,.18)) 0 8deg, transparent 8deg 24deg);
  border-radius: 50%;
  opacity: .5;
  animation: raysSpin 26s linear infinite;
  pointer-events: none;
  z-index: 0;
}
#screen-acquire .acquire-stage, #screen-acquire .acquire-bottom { z-index: 1; }

/* ホームの浮遊雀とも */
.home-buddy {
  position: absolute;
  filter: drop-shadow(0 8px 14px rgba(50, 40, 10, .35));
  animation: buddyFloat 5.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* ===================== 雀とも獲得画面 ===================== */
#screen-acquire {
  background: radial-gradient(120% 95% at 50% 30%, #fdf8ea 0%, #ead9b0 90%);
  align-items: center; text-align: center;
}
.acquire-stage {
  position: relative; flex: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 9px;
  overflow-y: auto;
  /* 吹き出し廃止でコンテンツはコンパクト → 縦中央に美しく鎮座
     (safe center: 万一溢れても上が切れずスクロールできる) */
  justify-content: safe center;
  padding: 14px 18px 12px;
}
.acquire-stage > * { flex-shrink: 0; }
.rarity-banner {
  font-family: var(--serif); font-weight: 900; font-size: 1.35em; letter-spacing: .3em;
  padding: 6px 26px; border-radius: 999px; color: #fff;
  box-shadow: var(--shadow);
  animation: popIn .5s cubic-bezier(.2,1.6,.4,1) both;
  flex-shrink: 0;
}
.acquire-img-wrap {
  position: relative; flex-shrink: 0;
  width: clamp(160px, 28dvh, 250px); height: clamp(160px, 28dvh, 250px);
}
.acquire-img-wrap .halo {
  position: absolute; inset: -32px;
  background: radial-gradient(circle, rgba(255,226,130,.85) 0%, rgba(255,226,130,0) 65%);
  animation: haloPulse 2.4s ease-in-out infinite;
}
.acquire-img-wrap img {
  position: relative;
  width: 100%; height: 100%; object-fit: contain;
  animation: jangtomoIn .8s cubic-bezier(.2,1.5,.36,1) both;
  filter: drop-shadow(0 14px 26px rgba(120,90,20,.45));
}
.acquire-name { font-family: var(--serif); font-size: 1.55em; font-weight: 900; color: #5a4408; }
.acquire-stars { display: flex; gap: 7px; justify-content: center; min-height: 30px; }
.acquire-stars .star { font-size: 1.55em; color: #d8cba6; transition: color .3s, transform .3s; }
.acquire-stars .star.lit { color: #f5a800; text-shadow: 0 0 12px rgba(255, 200, 40, .8); }
.acquire-stars .star.pop { animation: starPop .5s cubic-bezier(.2,1.8,.4,1) both; }
.acquire-count { font-size: 1.05em; color: #6b5a23; font-weight: 700; }
.acquire-msg { font-size: .92em; color: #5d4f23; line-height: 1.6; max-width: 330px; }
.acquire-bonus-note {
  background: rgba(255,255,255,.75); border: 1.5px solid var(--gold);
  border-radius: 14px; padding: 9px 16px;
  font-size: .85em; color: #6b5a23; max-width: 330px; line-height: 1.65;
}
/* フッター: 最初から高さを確保した固定ボックス (中身だけ後から footerIn で出現)
   → ステージとは別領域なので、ボタンが出ても雀ともは1pxも動かず、重なりも無い */
.acquire-bottom {
  position: relative;
  width: 100%;
  height: calc(150px + env(safe-area-inset-bottom));
  flex-shrink: 0;
  padding: 14px 26px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg,
    rgba(250, 243, 224, .4) 0%,
    rgba(244, 233, 204, .95) 30%,
    rgba(238, 224, 188, 1) 100%);
  z-index: 12;
}
.acquire-bottom .btn.primary { min-height: 60px; font-size: 1.12em; }
.acquire-bottom .btn.sub { min-height: 46px; }
.acquire-bottom::before {
  /* 上品な金の境界線 */
  content: ''; position: absolute; left: 8%; right: 8%; top: 6px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .65), transparent);
}
.acquire-bottom .btn {
  position: relative; z-index: 1;
  animation: footerIn .65s cubic-bezier(.2, 1.1, .35, 1) both;
}
.acquire-bottom .btn + .btn { animation-delay: .12s; }

/* ===================== 図鑑 ===================== */
#screen-zukan { background: var(--cream); }
.page-header {
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: linear-gradient(180deg, var(--green-deep), var(--green-table));
  color: #fff;
  box-shadow: var(--shadow);
  z-index: 5;
}
.page-header .back-btn {
  min-width: 64px; min-height: 48px;
  border: none; border-radius: 12px;
  background: rgba(255,255,255,.16);
  color: #fff; font-size: 1em; font-weight: 700;
  cursor: pointer;
}
.page-header .back-btn:active { background: rgba(255,255,255,.3); }
.page-header h2 { font-family: var(--serif); font-size: 1.25em; letter-spacing: .12em; flex: 1; }
.page-header .head-info { font-size: .85em; color: #ffe9a8; font-weight: 700; }

.zukan-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; padding: 16px;
}
.zukan-card {
  background: #fffdf6;
  border: 2px solid #e3d9bd;
  border-radius: 16px;
  padding: 10px 6px 8px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(80,60,20,.1);
  transition: transform .15s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.zukan-card:active { transform: scale(.96); }
.zukan-card img { width: 78%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; }
.zukan-card.unowned img { visibility: hidden; }
.zukan-card.unowned .z-img-wrap {
  position: relative;
}
.zukan-card.unowned .z-img-wrap::before {
  content: '?';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 2.6em; font-weight: 900; color: #cfc4a4;
  background: #f3edda; border-radius: 12px;
  margin: 0 11%;
}
.zukan-card .z-name { font-size: .72em; font-weight: 800; margin-top: 4px; color: var(--sumi); }
.zukan-card.unowned .z-name { color: #b0a585; }
.zukan-card .z-rarity {
  position: absolute; top: 6px; left: 6px;
  font-size: .62em; font-weight: 900; color: #fff;
  border-radius: 8px; padding: 2px 7px;
  z-index: 2;
}
.zukan-card .z-stars { font-size: .6em; color: #f5a800; letter-spacing: .08em; min-height: 1.1em; }
.zukan-card.completed { border-color: var(--gold); box-shadow: 0 0 14px rgba(201, 162, 39, .35); }
.zukan-card.completed::after {
  content: '完凸'; position: absolute; top: 6px; right: 6px;
  background: linear-gradient(180deg, #ffd34e, #c9920a); color: #4a3500;
  font-size: .6em; font-weight: 900; border-radius: 8px; padding: 2px 7px;
}

/* 図鑑詳細モーダル */
.modal-layer {
  position: absolute; inset: 0; z-index: 80;
  background: rgba(20, 25, 18, .55);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-layer.open { display: flex; animation: fadeIn .25s ease both; }
.modal-card {
  background: #fffdf6 url('../assets/washi.png') center/cover;
  border-radius: 24px;
  width: 100%; max-width: 360px; max-height: 86%;
  overflow-y: auto;
  padding: 22px 22px 18px;
  text-align: center;
  box-shadow: 0 18px 60px rgba(0,0,0,.4);
  animation: popIn .35s cubic-bezier(.2,1.4,.4,1) both;
  position: relative;
}
.modal-card .m-close {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: #efe3c0; color: #6b5a23;
  font-size: 1.25em; font-weight: 900; cursor: pointer;
}
.modal-card img.m-img { width: 64%; border-radius: 18px; }
.modal-card .m-name { font-family: var(--serif); font-size: 1.4em; font-weight: 900; margin: 6px 0 2px; }
.modal-card .m-cond { font-size: .85em; color: #8a7b4d; margin-bottom: 6px; }
.modal-card .m-desc { font-size: .95em; line-height: 1.8; color: #4d4632; }
.modal-card .m-quote {
  margin-top: 10px; background: #f7f0dc; border-radius: 12px;
  padding: 10px 14px; font-size: .9em; color: #6b5a23; line-height: 1.7;
}

/* ===================== 秘書画面 ===================== */
#screen-secretary { background: var(--cream); }
.sec-profile { display: flex; flex-direction: column; align-items: center; padding: 18px; }
.sec-profile img { width: 56%; max-width: 240px; filter: drop-shadow(0 12px 22px rgba(60,50,20,.3)); animation: floaty 4.6s ease-in-out infinite; }
.sec-level-card {
  width: 100%; max-width: 360px;
  background: #fffdf6; border: 2px solid var(--gold);
  border-radius: 18px; padding: 16px 20px; margin-top: -20px;
  box-shadow: var(--shadow); position: relative; z-index: 2;
}
.sec-level-card .lv { font-family: var(--serif); font-size: 1.5em; font-weight: 900; color: var(--green-deep); }
/* 衣装・部屋ギャラリー */
.wardrobe { padding: 0 22px; max-width: 400px; margin: 0 auto; width: 100%; }
.ward-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ward-chip {
  border: 1.5px solid #d9cca6; border-radius: 999px;
  background: #fffdf6; color: #5d4f23;
  font-size: .82em; font-weight: 700;
  padding: 8px 14px; min-height: 42px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ward-chip.on { background: var(--green-table); border-color: var(--green-deep); color: #fff; }
.ward-chip.locked { opacity: .45; background: #efe9d6; }
.ward-chip:not(.locked):active { background: #f3e9c8; }

/* 図鑑のLvバッジ */
.zukan-card .z-level {
  position: absolute; top: 6px; right: 6px;
  font-size: .6em; font-weight: 900; color: #fff;
  background: #2e7d4f; border-radius: 8px; padding: 2px 7px;
  z-index: 2;
}
.zukan-card .z-level.awakened {
  background: linear-gradient(135deg, #b8860b, #ffd700);
  color: #4a3500;
}
.zukan-card.completed::after { display: none; } /* 完凸ラベルはLvバッジに置換 */

.unlock-list { padding: 4px 22px 30px; max-width: 400px; margin: 0 auto; width: 100%; }
.unlock-item {
  display: flex; align-items: center; gap: 12px;
  background: #fffdf6; border-radius: 14px;
  border: 1.5px solid #e3d9bd;
  padding: 11px 16px; margin-bottom: 9px;
  font-size: .92em;
}
.unlock-item .u-lv {
  min-width: 56px; text-align: center;
  background: var(--green-table); color: #fff;
  border-radius: 10px; font-weight: 800; padding: 4px 0; font-size: .85em;
}
.unlock-item.locked { opacity: .45; }
.unlock-item.locked .u-lv { background: #9a958a; }

/* ===================== 設定 ===================== */
#screen-settings { background: var(--cream); }
.setting-group { padding: 14px 20px 30px; max-width: 420px; margin: 0 auto; width: 100%; }
.setting-row { margin-bottom: 18px; }
.setting-row .s-label { font-weight: 800; margin-bottom: 8px; font-size: .95em; }
.seg {
  display: flex; background: #ece4cf; border-radius: 14px; padding: 4px; gap: 4px;
}
.seg button {
  flex: 1; min-height: 52px;
  border: none; border-radius: 11px;
  background: transparent; color: #6d6448;
  font-size: .92em; font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.seg button.on {
  background: #fff; color: var(--green-deep);
  box-shadow: 0 2px 8px rgba(60,50,20,.18);
}

/* ---- 勝利時の秘書笑顔ポップ ---- */
.result-secretary {
  position: absolute; right: -12px; bottom: 90px;
  width: 168px;
  z-index: 30;
  pointer-events: none;
  animation: secSlideUp .8s cubic-bezier(.2,1.3,.4,1) .4s both;
}
.result-secretary img {
  width: 100%;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.45));
}
.result-secretary .rs-bubble {
  position: absolute; top: -16px; left: -86px;
  background: #fffdf6 url('../assets/washi.png') center/cover;
  border: 2px solid var(--gold);
  border-radius: 16px 16px 2px 16px;
  padding: 9px 14px;
  font-size: .95em; font-weight: 800; color: var(--sumi);
  white-space: nowrap;
  box-shadow: var(--shadow);
  animation: popIn .4s cubic-bezier(.2,1.5,.4,1) 1s both;
}
@keyframes secSlideUp {
  0%   { opacity: 0; transform: translateY(120px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===================== 汎用 ===================== */
.tile { display: inline-block; line-height: 0; }
.tile svg { width: 100%; height: auto; display: block; }
.tile .tile-img {
  width: 100%; height: auto; display: block;
  border-radius: 9%;
  box-shadow: 0 1.5px 2.5px rgba(20, 25, 15, .35), inset 0 -1px 2px rgba(0,0,0,.08);
  background: #fffdf5;
}
.hidden { display: none !important; }

/* 河ズームモーダル */
.river-zoom-grid {
  display: flex; flex-wrap: wrap; gap: 5px;
  justify-content: center;
  padding: 8px 2px;
}
.river-zoom-grid .tile { width: 44px; }
.river-zoom-grid .tile.riichi-tile { transform: rotate(90deg); margin: 0 7px; }

.toast {
  position: absolute; left: 50%; bottom: 18%;
  transform: translateX(-50%);
  background: rgba(30, 30, 26, .92); color: #fff;
  border-radius: 22px; padding: 12px 24px;
  font-size: .95em; font-weight: 700;
  z-index: 90;
  width: max-content; max-width: 86%;
  text-align: center; line-height: 1.55;
  animation: toastIn 2.4s ease both;
  pointer-events: none;
}
/* 対局中: 牌に被らない河エリア上部に表示 */
.toast.toast-top {
  bottom: auto; top: 24%;
  background: rgba(255, 253, 246, .96);
  color: var(--sumi);
  border: 1.5px solid var(--gold);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.particle-layer { position: absolute; inset: 0; pointer-events: none; z-index: 65; overflow: hidden; }
.confetti {
  position: absolute; top: -16px;
  border-radius: 3px;
  animation: confettiFall linear both;
}
.spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkOut .9s ease-out both;
}
.petal {
  position: absolute; top: -20px;
  width: 14px; height: 11px;
  background: radial-gradient(circle at 30% 30%, #ffd9e3, #f8a8bd);
  border-radius: 60% 40% 55% 45%;
  opacity: .9;
  animation: petalFall linear infinite;
}

.levelup-banner {
  position: absolute; left: 50%; top: 30%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2a7a52, #16472f);
  border: 2.5px solid var(--gold-bright);
  color: #fff; border-radius: 20px;
  padding: 18px 34px; text-align: center;
  font-weight: 800; font-size: 1.1em;
  box-shadow: 0 0 40px rgba(255,215,0,.5);
  z-index: 95;
  animation: levelupIn 2.6s cubic-bezier(.2,1.3,.4,1) both;
  pointer-events: none;
}
.levelup-banner .l-big { font-family: var(--serif); font-size: 1.5em; color: var(--gold-bright); letter-spacing: .15em; white-space: nowrap; }

/* ===================== アシスト機能 ===================== */
/* 安全度バッジ (安/注/危) */
.tile { position: relative; }
.safety-badge {
  position: absolute; top: -7px; right: -4px;
  min-width: 19px; height: 19px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 900; line-height: 1;
  color: #fff;
  box-shadow: 0 1.5px 4px rgba(0,0,0,.4);
  pointer-events: none;
  z-index: 3;
}
.safety-badge.safe { background: #2e9e57; }
.safety-badge.mid  { background: #e8a020; }
.safety-badge.risk { background: #d9453a; }

/* 対局中のアシスト切替ピル */
.assist-pill {
  border: 1.5px solid rgba(255, 233, 168, .55);
  border-radius: 999px;
  background: rgba(8, 30, 20, .55);
  color: #ffe9a8;
  font-size: .78em; font-weight: 800;
  padding: 4px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}
.assist-pill:active { background: rgba(255, 233, 168, .25); }
.assist-pill[data-level='nyumon'] { border-color: #8ee6a3; color: #b9f3c8; }
.assist-pill[data-level='pro']    { border-color: rgba(255,255,255,.3); color: #cfd8d2; }

/* シャンテン・役ガイド表示 */
.waits-bar .assist-progress { font-size: .95em; letter-spacing: .04em; }

/* 設定: 5択セグメント + 説明文 */
.seg.seg-5 button { font-size: .8em; padding: 0 2px; }
.assist-desc {
  margin-top: 8px;
  font-size: .82em; color: #8a7b4d; line-height: 1.6;
  background: #f5efdd; border-radius: 10px; padding: 8px 12px;
}

/* ===================== 画像ボタン (文字サイズ設定の影響を受けない) ===================== */
.btn.img-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  position: relative;
  overflow: visible !important;
}
.btn.img-btn > img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 5px 12px rgba(80, 60, 10, .38));
  transition: transform .1s, filter .15s;
}
.btn.img-btn:active > img {
  transform: translateY(3px) scale(.99);
  filter: drop-shadow(0 1px 4px rgba(80, 60, 10, .4));
}
.btn.img-btn .btn-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.btn.img-btn.glow::after { display: none; }

/* ===================== BGMミュートボタン ===================== */
#bgm-toggle {
  position: absolute; top: calc(6px + env(safe-area-inset-top)); right: 6px;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(20, 30, 22, .55);
  color: #ffe9a8;
  font-size: 1.05em; line-height: 1;
  cursor: pointer;
  z-index: 110;
  backdrop-filter: blur(2px);
  transition: opacity .2s, transform .1s;
}
#bgm-toggle:active { transform: scale(.9); }
#bgm-toggle.off { opacity: .55; }
#bgm-toggle.off::after {
  content: ''; position: absolute; left: 7px; right: 7px; top: 50%;
  height: 2.5px; background: #ff8a7a; border-radius: 2px;
  transform: rotate(-38deg);
}

/* ===================== ボタンリップル ===================== */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transform: scale(0);
  animation: rippleOut .55s ease-out both;
  pointer-events: none;
}

/* ===================== 対局画面の光ゆらぎ ===================== */
#screen-match::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 50% 30%, rgba(255, 240, 190, .07), transparent 70%);
  animation: tableBreath 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* ===================== カットイン集中線 ===================== */
.cutin::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(105deg, rgba(255,255,255,.13) 0 3px, transparent 3px 26px);
  background-size: 220% 100%;
  animation: cutinLines 1.2s linear both;
  pointer-events: none;
}

/* ===================== 直近捨て牌の波紋 ===================== */
.last-discard-pop .ldp-tile::after {
  content: ''; position: absolute; inset: -12px;
  border: 3px solid rgba(255, 255, 255, .65);
  border-radius: 16px;
  animation: ldpRing .55s ease-out both;
  pointer-events: none;
}

/* ===================== くす玉 (大当たり演出) ===================== */
.kusudama-drop {
  position: absolute; left: 50%; top: -6%;
  width: min(64vw, 290px);
  transform: translateX(-50%);
  z-index: 86; pointer-events: none;
  animation: kusudamaIn 1.5s cubic-bezier(.25, 1.2, .4, 1) both;
}
.kusudama-drop img { width: 100%; filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)); }

/* ===================== 勝利の軍配 ===================== */
.gunbai-pop {
  position: absolute; right: 6px; top: calc(8px + env(safe-area-inset-top));
  width: 108px;
  z-index: 28; pointer-events: none;
  animation: gunbaiIn .9s cubic-bezier(.2, 1.5, .4, 1) .25s both;
}
.gunbai-pop img { width: 100%; filter: drop-shadow(0 8px 18px rgba(0,0,0,.4)); }

/* ===================== 小さい端末 (高さ700px以下) ===================== */
@media (max-height: 700px) {
  :root { --font-base: 17px; }
  html[data-font='large']  { --font-base: 19px; }
  html[data-font='xlarge'] { --font-base: 21px; }

  /* 対局画面 */
  .cpu-card { font-size: .72em; padding: 5px 7px; }
  .match-info { font-size: .85em; padding: 3px 8px; }
  .match-info .dora-area .tile { width: 25px; }
  .my-river-row { height: 60px; }
  .my-river .tile { width: 22px; }
  .river-block .tile { width: 19px; }
  .hand-rows { gap: 5px; padding: 4px 2px 15px; }
  .hand-line { gap: 4px; }
  .hand-line .tile { max-width: 50px; }
  .action-row { min-height: 60px; padding: 5px 4px 2px; }
  .action-row .abtn { min-height: 52px; font-size: 1.02em; }
  .waits-bar { padding: 3px 8px; font-size: .88em; }
  .waits-bar .tile { width: 30px; }
  .discard-preview { padding: 10px 46px 10px 12px; }
  .discard-preview .dp-tile { width: 72px; }
  .discard-preview .dp-confirm { min-height: 52px; font-size: 1.05em; }

  /* ホーム */
  .home-secretary img { max-height: 33dvh; }
  .sec-bubble { font-size: .92em; line-height: 1.6; padding: 11px 15px; margin: -24px 18px 0; }
  .home-menu { gap: 9px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); }
  .btn { min-height: 56px; }
  .btn.primary { min-height: 64px; font-size: 1.15em; }
  .btn.sub { min-height: 50px; }

  /* タイトル */
  .title-logo-img { max-height: 38dvh; }

  /* 結果/獲得/福引 */
  .result-title { font-size: 1.55em; }
  .result-points .pts { font-size: 2.4em; }
  .result-secretary { width: 132px; bottom: 84px; }
  .acquire-name { font-size: 1.4em; }
  .acquire-stars .star { font-size: 1.4em; }
  .acquire-msg { font-size: .88em; }
  .acquire-bonus-note { font-size: .8em; padding: 7px 13px; }
  .acquire-img-wrap { width: clamp(140px, 21dvh, 180px); height: clamp(140px, 21dvh, 180px); }
  .acquire-bottom { height: calc(132px + env(safe-area-inset-bottom)); padding-top: 12px; }
  .acquire-bottom .btn.primary { min-height: 52px; font-size: 1.05em; }
  .acquire-bottom .btn.sub { min-height: 40px; }
  .lottery-title { font-size: 1.25em; }
  .lottery-bonus { font-size: .84em; padding: 8px 14px; }
  .rarity-banner { font-size: 1.12em; padding: 5px 20px; }
}

/* ===================== モバイル小画面 (高さ600px以下 / 有効範囲 375×550 対応) =====================
 * 文字サイズは60代向けに17pxを維持し、余白・画像・ボタン高さの「構造」で詰める。
 * PC・通常スマホ(高さ601px以上)には一切影響しない追加レイヤー。 */
@media (max-height: 600px) {

  /* ---- タイトル ---- */
  .title-content { padding: 12px 12px; gap: 6px; }
  .title-logo-img { max-height: 33dvh; }
  .title-bottom { padding: 0 30px calc(16px + env(safe-area-inset-bottom)); }
  .title-tap { padding: 10px; font-size: 1em; }

  /* ---- ホーム ---- */
  .home-top { padding: calc(8px + env(safe-area-inset-top)) 12px 0; }
  .home-badge { padding: 5px 9px; font-size: .72em; border-radius: 11px; }
  .home-secretary img { max-height: 27dvh; }
  .home-buddy { max-width: 58px; }
  .sec-bubble { font-size: .86em; line-height: 1.5; padding: 8px 12px; margin: -18px 14px 0; border-radius: 16px; }
  .sec-bubble::before { top: -10px; width: 16px; height: 16px; }
  .home-menu { gap: 7px; padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); }
  .btn.img-btn > img { width: auto; max-width: 100%; max-height: 62px; margin: 0 auto; }

  /* ---- 対局 ---- */
  .match-top { padding: calc(4px + env(safe-area-inset-top)) 6px 3px; gap: 5px; }
  .cpu-card { font-size: .66em; padding: 4px 7px; line-height: 1.4; border-radius: 10px; }
  .cpu-card .cpu-state { min-height: 0; }
  .cpu-card .cpu-melds .tile { width: 11px; }
  .match-info { font-size: .78em; padding: 2px 8px; gap: 10px; }
  .match-info .dora-area .tile { width: 21px; }
  .match-info .wall-left { padding: 2px 9px; }
  .assist-pill { font-size: .72em; padding: 3px 9px; }
  .rivers { padding: 2px 8px; }
  .cpu-rivers { gap: 6px; }
  .river-block .tile { width: 17px; }
  .my-river-row { height: 46px; margin-top: 4px; }
  .my-river .tile { width: 19px; }
  .waits-bar { padding: 2px 8px; font-size: .8em; }
  .waits-bar .tile { width: 26px; }
  .my-area { padding: 4px 6px calc(6px + env(safe-area-inset-bottom)); }
  .my-melds { padding: 0 4px 2px; min-height: 0; }
  .my-melds .tile { width: 22px; }
  .hand-rows { gap: 4px; padding: 3px 2px 16px; }
  .hand-line { gap: 4px; }
  .hand-line .tile { max-width: 46px; }
  .action-row { min-height: 50px; padding: 4px 4px 0; gap: 6px; }
  .action-row .abtn { min-height: 46px; font-size: .95em; border-radius: 13px; }
  .abtn.a-agari { font-size: 1.1em; }
  .discard-preview { padding: 8px 44px 8px 10px; gap: 10px; border-radius: 18px; }
  .discard-preview .dp-tile { width: 62px; }
  .discard-preview .dp-name { font-size: 1.25em; }
  .discard-preview .dp-confirm { min-height: 46px; font-size: 1em; }
  .discard-preview .dp-cancel { width: 36px; height: 36px; }
  .match-secretary { font-size: .85em; padding: 9px 40px 9px 56px; line-height: 1.5; }
  .match-secretary .sec-avatar { width: 42px; height: 42px; }
  .last-discard-pop .ldp-tile { width: 60px; }
  .last-discard-pop .ldp-label { font-size: .8em; padding: 4px 12px; }

  /* ---- 結果 ---- */
  .result-pane { padding: calc(10px + env(safe-area-inset-top)) 18px 12px; }
  .result-title { font-size: 1.35em; }
  .result-sub { margin-bottom: 8px; font-size: .85em; }
  .result-hand .tile { width: 24px; }
  .result-dora .tile { width: 20px; }
  .yaku-item { padding: 6px 13px; margin-bottom: 5px; font-size: .95em; }
  .result-points { margin: 10px 0 6px; }
  .result-points .pts { font-size: 2em; }
  .exp-bar-wrap { margin: 10px auto; font-size: .85em; }
  .score-table { font-size: .88em; }
  .score-row { padding: 5px 12px; }
  .result-bottom { padding: 0 18px calc(12px + env(safe-area-inset-bottom)); }
  .result-secretary { width: 96px; bottom: 74px; }
  .result-secretary .rs-bubble { font-size: .8em; left: -70px; padding: 7px 10px; }
  .gunbai-pop { width: 78px; }

  /* ---- 福引 ---- */
  .lottery-stage { gap: 8px; padding: 12px 16px; }
  .lottery-title { font-size: 1.1em; }
  .lottery-bonus { font-size: .78em; padding: 7px 12px; line-height: 1.55; }
  .garapon-wrap { width: clamp(120px, 26dvh, 250px); height: clamp(120px, 26dvh, 250px); }
  .lottery-stage .btn.primary { min-height: 54px; font-size: 1.08em; }
  .lottery-ball { width: 48px; height: 48px; }
  .kusudama-drop { width: min(52vw, 220px); }

  /* ---- 雀とも獲得 ---- */
  .acquire-stage { gap: 6px; padding: 8px 16px 6px; }
  .rarity-banner { font-size: .95em; padding: 4px 16px; }
  .acquire-img-wrap { width: clamp(96px, 22dvh, 160px); height: clamp(96px, 22dvh, 160px); }
  /* 注記が2枚並ぶ混雑時(初回説明+役ボーナス等)は画像をさらに譲る */
  .acquire-stage.crowded { gap: 5px; }
  .acquire-stage.crowded .acquire-img-wrap { width: clamp(84px, 16dvh, 120px); height: clamp(84px, 16dvh, 120px); }
  .acquire-name { font-size: 1.2em; }
  .acquire-stars { min-height: 24px; gap: 5px; }
  .acquire-stars .star { font-size: 1.2em; }
  .acquire-count { font-size: .95em; }
  .acquire-msg { font-size: .82em; line-height: 1.5; }
  .acquire-bonus-note { font-size: .74em; padding: 6px 11px; line-height: 1.5; }
  .acquire-bottom { height: calc(112px + env(safe-area-inset-bottom)); padding: 10px 22px calc(8px + env(safe-area-inset-bottom)); }
  /* 基礎 .btn の縦padding(12px)のままだと min-height を超えて112pxを溢れるため詰める */
  .acquire-bottom .btn { padding-top: 6px; padding-bottom: 6px; }
  .acquire-bottom .btn.primary { min-height: 46px; font-size: 1em; }
  .acquire-bottom .btn.sub { min-height: 36px; font-size: .92em; }

  /* ---- 図鑑/秘書/設定 (スクロール画面: ヘッダを詰めて表示領域を確保) ---- */
  .page-header { padding: calc(8px + env(safe-area-inset-top)) 14px 8px; }
  .page-header .back-btn { min-height: 42px; min-width: 58px; }
  .page-header h2 { font-size: 1.1em; }
  .zukan-grid { gap: 9px; padding: 12px; }
  .sec-profile { padding: 12px 18px; }
  .sec-profile img { width: 44%; }
  .modal-card { max-height: 92%; padding: 16px 16px 14px; }
  .modal-card img.m-img { width: 46%; }

  /* ---- 汎用 ---- */
  .btn { min-height: 50px; }
  .btn.primary { min-height: 56px; font-size: 1.14em; }
  .btn.sub { min-height: 44px; }
  .levelup-banner { padding: 12px 24px; font-size: .95em; }
  .phoenix-rise { width: 240px; height: 240px; }
  #bgm-toggle { width: 32px; height: 32px; font-size: .9em; }
}