@charset 'UTF-8';
/* =====================================================================
   共通モーダル UI (デザイン: Desktop/img*.png 群)

   マイページ上にオーバーレイ表示する各画面 (カメ友 / アイテムBOX / おねだり /
   リサイクル / プレゼント / 図鑑 / 設定 / 遊び方 / ガチャ / ショップ / メニュー …)
   が共通で使う枠とパーツをここに集約する。画面固有の中身だけを各 CSS に書く。

   確定している寸法・配色:
     ヘッダー  高さ31px / 背景 #FFF183 / 下線 1px #FED45B / 太字 #783300
     タブ      高さ35px / 12px / 選択 #FC8414 + #FFF5C0 + 下線3px / 非選択 #CCA72B + #F5E79C
     下部バー  高さ47px / 背景 #FFF183 / 上線 1px #FED45B (--ui-footer-h で一元管理)
     とじる    モーダル内 74x32 / 下部バー 114x34 (✕アイコン付き)
               いずれも #fff / 影 0 2px 0 #EFE19A / 文字 #783300
     緑ボタン  130x32 / #84C52B / 影 0 2px 0 #6DAD15 / 文字 #fff 14px
     枠ボタン  72x28 / border 2px #CCA72B / 文字 #CCA72B 12px
   ===================================================================== */

/* 下部バー (.uiFooter) の高さ。バーの上で止める枠がすべてここを参照するので、
   高さを変えるときはこの 1 行だけを変えれば済む。 */
:root {
    --ui-footer-h: 47px;
}

/* =====================================================================
   モーダルを出している間は後ろをスクロールさせない
   (印を付けるのは public/js/modal-scroll-lock.js)

   モーダルの中で指を動かすと後ろの本文まで動いてしまい、閉じたときに
   別の場所を見ていることがある。モーダル自身は自分のスクロール枠
   (.stageOverlay__scroll / .evModalBody / .cmPop__scroll など) を持って
   いるので、そちらは今までどおり動く。
   ===================================================================== */
html.is-modal-open,
html.is-modal-open body {
    overflow: hidden;
    /* 端まで来たときに後ろへスクロールが伝わるのも止める */
    overscroll-behavior: none;
}

/* ===== カード (画面いっぱい・上だけ角丸・下部バーの上で止める) ===== */
.uiCard {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 47px;
    bottom: calc(var(--ui-footer-h) + env(safe-area-inset-bottom, 0px));
    z-index: 96;
    display: flex;
    flex-direction: column;
    background-color: #fdf5c6;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

/* ===== ヘッダー ===== */
.uiCardTtl {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    margin: 0;
    padding: 0 10px 1px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    color: #783300;
    background-color: #FFF183;
    border-bottom: 1px solid #FED45B;
}

/* ===== タブ ===== */
.uiTabs {
    flex-shrink: 0;
    display: flex;
    background-color: #F5E79C;
}

.uiTab,
button.uiTab,
a.uiTab:link,
a.uiTab:visited,
a.uiTab:hover,
a.uiTab:active {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 37px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: #CCA72B;
    background-color: #F5E79C;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.uiTab.is-active,
button.uiTab.is-active,
a.uiTab.is-active:link,
a.uiTab.is-active:visited {
    color: #FC8414;
    background-color: #FFF5C0;
    border-bottom-color: #FC8414;
}

.uiTab.is-off,
a.uiTab.is-off:link {
    opacity: 0.55;
    cursor: default;
}

/* ===== 本文 (ここだけスクロール) ===== */
.uiCardBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px 12px 16px;
}

/* 本文中の白いパネル (一覧・フォームの受け皿) */
.uiPanel {
    margin: 0 0 12px;
    padding: 12px;
    background-color: #fff;
    border-radius: 10px;
}

.uiPanel:last-child {
    margin-bottom: 0;
}

/* 見出し (黄色バー) */
.uiPanelTtl {
    margin: 0;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #783300;
    background-color: #FCED70;
    border-radius: 8px 8px 0 0;
}

/* 見出し直下に続くパネル */
.uiPanelTtl + .uiPanel {
    border-radius: 0 0 8px 8px;
}

/* ===== 下部固定バー ===== */
.uiFooter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 97;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* バー自体がセーフエリアぶんまで占める。
       各画面のカードは bottom: calc(var(--ui-footer-h) + セーフエリア) で
       止まるので、ここが 47px しか無いとその差 (= セーフエリアの高さ) が
       カードとバーの間の余白として見えてしまう。
       以前は ::after で「バーの下」に敷き足していたが、それは画面の外側で、
       間の余白は埋まっていなかった (連絡帳などで実際に空いていた)。
       コイン購入の下部バー (.uiCoinFoot) と同じ作り。 */
    min-height: calc(var(--ui-footer-h) + env(safe-area-inset-bottom, 0px));
    /* 左右は 8px。24px のタップ領域と合わせて、アイコンが画面端から
       約 15px の位置に来る (デザイン: Desktop/img.png) */
    padding: 4px 8px;
    /* セーフエリアぶんは下に敷く。ボタンは上の 47px の中で中央に来る */
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background-color: #FFF183;
    border-top: 1px solid #FED45B;
}

.uiFootBtn,
button.uiFootBtn,
a.uiFootBtn:link,
a.uiFootBtn:visited,
a.uiFootBtn:hover,
a.uiFootBtn:active {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 指定値: 24x24 (デザイン: Desktop/img.png 下部バー) */
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    color: transparent;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* アイコンは 24x24 のタップ領域の中央に原寸で置く。
   24x24 いっぱいに引き伸ばすとデザインより線が太くなるため拡大はしない。 */
.uiFootBtn::before {
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* もどる (アクティブ / 非アクティブ) */
.uiFootBtn--back::before {
    width: 10px;
    height: 18px;
    background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/nav_back.svg');
}

.uiFootBtn--back.is-off::before {
    background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/nav_back_off.svg');
}

/* ヘルプ */
.uiFootBtn--help::before {
    width: 10px;
    height: 18px;
    background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/nav_help.svg');
}

/* 注意事項 (!) */
.uiFootBtn--notice::before {
    width: 20px;
    height: 20px;
    background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/nav_notice.svg');
}

.uiFootBtn.is-hidden {
    visibility: hidden;
}

/* ===== ボタン ===== */
/* 下部バー / モーダルの「とじる」(74x32) */
.uiBtnClose,
button.uiBtnClose,
a.uiBtnClose:link,
a.uiBtnClose:visited,
a.uiBtnClose:hover,
a.uiBtnClose:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 32px;
    padding: 4px 16px;
    box-sizing: border-box;
    /* 指定値: 14px (デザイン: Desktop/img.png 水やり結果モーダル) */
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: #783300;
    background-color: #fff;
    border: none;
    border-radius: 999px;
    box-shadow: 0px 2px 0px 0px #EFE19A;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* 下部バーの「とじる」だけは横長 + ✕アイコン付き (デザイン: Desktop/img.png)。
   モーダル内の「とじる」(74x32・アイコンなし) は上の既定のまま。 */
.uiFooter .uiBtnClose,
.uiFooter button.uiBtnClose,
.uiFooter a.uiBtnClose:link,
.uiFooter a.uiBtnClose:visited,
.uiFooter a.uiBtnClose:hover,
.uiFooter a.uiBtnClose:active {
    /* 指定値: 114x34 / padding 4px 24px */
    width: 114px;
    height: 34px;
    padding: 4px 24px;
    gap: 6px;
}

.uiFooter .uiBtnClose::before {
    content: "";
    flex: 0 0 auto;
    /* 指定値: 16x16 (nav_close.svg) */
    width: 16px;
    height: 16px;
    background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/nav_close.svg') no-repeat center / contain;
}

/* 主要アクション (緑・130x32) */
.uiBtn,
button.uiBtn,
input.uiBtn,
a.uiBtn:link,
a.uiBtn:visited,
a.uiBtn:hover,
a.uiBtn:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 130px;
    height: 32px;
    padding: 4px 16px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    background-color: #84C52B;
    border: none;
    border-radius: 999px;
    box-shadow: 0px 2px 0px 0px #6DAD15;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* 幅を内容に合わせたい場合。
   基底が button.uiBtn (0,1,1) で width:130px を持つため、
   ここも要素付きセレクタで詳細度を揃えないと効かない。 */
.uiBtn--auto,
button.uiBtn--auto,
input.uiBtn--auto,
a.uiBtn--auto:link,
a.uiBtn--auto:visited,
a.uiBtn--auto:hover,
a.uiBtn--auto:active {
    width: auto;
    min-width: 130px;
}

.uiBtn[disabled],
.uiBtn.is-off {
    background-color: #c8c8c8;
    box-shadow: 0px 2px 0px 0px #a9a9a9;
    cursor: default;
}

/* 副次アクション (白地に金枠・72x28) */
.uiBtnGhost,
button.uiBtnGhost,
a.uiBtnGhost:link,
a.uiBtnGhost:visited,
a.uiBtnGhost:hover,
a.uiBtnGhost:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 28px;
    padding: 0 12px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: #CCA72B;
    background-color: #fff;
    border: 2px solid #CCA72B;
    border-radius: 999px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ===== カード内モーダル (確認 / 完了 / ヘルプ) ===== */
.uiModal {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.55);
}

.uiModal[hidden] {
    display: none;
}

.uiModalBox {
    display: flex;
    flex-direction: column;
    width: 300px;
    max-width: 100%;
    max-height: 100%;
    background-color: #fdf5c6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.uiModalTtl {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #783300;
    background-color: #FCED70;
}

.uiModalBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 12px;
    padding: 14px;
    font-size: 13px;
    line-height: 1.7;
    color: #703711;
    background-color: #fff;
    border-radius: 10px;
    white-space: pre-wrap;
}

/* display:flex を持つので、hidden 属性を効かせるには明示が要る
   (付けないと hidden にしたボタン列が出たままになる) */
.uiModalActions[hidden] {
    display: none;
}

.uiModalActions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 12px 14px;
    text-align: center;
}

/* ===== フォーム部品 (設定画面など) ===== */
.uiField {
    margin: 0 0 14px;
}

.uiFieldLabel {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: bold;
    color: #783300;
}

.uiInput,
input.uiInput,
textarea.uiInput {
    width: 100%;
    padding: 9px 12px;
    box-sizing: border-box;
    font-size: 14px;
    color: #4a3b25;
    background-color: #fff;
    border: 1px solid #d8cfae;
    border-radius: 6px;
    -webkit-appearance: none;
    appearance: none;
}

.uiFieldNote {
    margin: 5px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #8a6d3b;
}

.uiFieldNote--alert {
    color: #e8210f;
}

/* =====================================================================
   メニュー (デザイン: Desktop/img14.png)
   黄色ヘッダー + 2列の金色ボタン + 下部の丸い閉じるボタン
   ===================================================================== */
.uiMenu {
    background-color: #fdf5c6;
}

/* 見出しの帯は他の重ねる画面 (.uiScreenTtl) と同じ高さ・色にそろえる
   (デザイン: Desktop/img.png。実測 32px) */
.uiMenuTtl {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    margin: 0;
    padding: 0 10px 1px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #783300;
    background-color: #FFF183;
    border-bottom: 1px solid #FED45B;
}

/* 2列グリッド */
/* 2列グリッド */
.uiMenuGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 影 (4px) のぶん縦の間隔を広げる */
    gap: 14px 10px;
    margin: 0;
    padding: 14px 12px 20px;
    list-style: none;
}

/* 金色の立体ボタン (指定値)
     背景  linear-gradient(180deg, #FDD142 4.84%, #F8A018 100%)
     枠線  2px #FED142
     影    0 4px 0 #C77902
     文字  #773400 太字
     光沢  #FFD646 / 角丸 999 */
.uiMenuBtn,
a.uiMenuBtn:link,
a.uiMenuBtn:visited,
a.uiMenuBtn:hover,
a.uiMenuBtn:active {
    position: relative;
    /* 光沢 (::before) を文字の下に敷くための重ね順の基準 */
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    padding: 4px 8px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    color: #773400;
    background: linear-gradient(180deg, #FDD142 4.84%, #F8A018 100%);
    border: 2px solid #FED142;
    border-radius: 8px;
    box-shadow: 0px 4px 0px 0px #C77902;
    cursor: pointer;
}

/* 上部の光沢 (下部アクションバーのボタンと同じ作り)。
   z-index:-1 で背景の上・文字の下に置く。 */
.uiMenuBtn::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 4px;
    left: 8px;
    right: 8px;
    height: 6px;
    background: #FFD646;
    border-radius: 999px;
    pointer-events: none;
}

/* 非活性 (条件を満たしていない項目) */
.uiMenuBtn.is-off,
a.uiMenuBtn.is-off:link {
    color: #8b8b8b;
    background: linear-gradient(180deg, #dcdcdc 0%, #c9c9c9 100%);
    border-color: #d5d5d5;
    box-shadow: 0px 4px 0px 0px #9c9c9c;
    pointer-events: none;
    cursor: default;
}

.uiMenuBtn.is-off::before {
    background: #e4e4e4;
}

/* 下部の丸い閉じるボタン */
.uiMenuClose {
    position: relative;
    margin: 0;
    padding: 0 0 4px;
    text-align: center;
}

.uiMenuCloseBtn,
a.uiMenuCloseBtn:link,
a.uiMenuCloseBtn:visited,
a.uiMenuCloseBtn:hover,
a.uiMenuCloseBtn:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: -22px;
    font-size: 0;
    text-decoration: none;
    background: linear-gradient(180deg, #F8D862 0%, #ECA942 100%);
    border: 2px solid #BC7D2B;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* × アイコン */
.uiMenuCloseBtn::before,
.uiMenuCloseBtn::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
}

.uiMenuCloseBtn::before {
    transform: rotate(45deg);
}

.uiMenuCloseBtn::after {
    transform: rotate(-45deg);
}

/* =====================================================================
   コイン購入モーダル (デザイン: Desktop/img10.png)
   public/js/app.js の _showCoinPurchaseModal() が生成する。ショップ以外
   (ガチャ等) からも開くため shop.css ではなく共通の当ファイルに置く。
   ===================================================================== */
.uiCoinBanner {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 12px;
    border-radius: 10px;
}

.uiCoinList {
    margin: 0;
    padding: 4px 14px;
    list-style: none;
    background-color: #fff;
    border-radius: 10px;
}

.uiCoinRow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 4px;
    border-bottom: 1px dotted #e4dcc6;
}

.uiCoinRow:last-child {
    border-bottom: none;
}

 /* コイン購入モーダルの行アイコン (支給 SVG: 40x40) */
.uiCoinIco {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/ico_coin_pack.svg') no-repeat center / contain;
}

.uiCoinInfo {
    flex: 1 1 auto;
    min-width: 0;
}

.uiCoinAmount {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
    color: #e8821e;
}

.uiCoinAmount small {
    font-size: 14px;
    color: #6d4c1f;
}

.uiCoinBonus {
    margin: 3px 0 0;
    font-size: 11px;
    white-space: nowrap;
    color: #6d4c1f;
}

/* 価格ボタンの入れ物。オススメの印をこの中で上に重ねる
   (デザイン: Desktop/img.png)。印は原寸 64x21 で、ボタンの中央に合わせ、
   下の尖りがボタンの上端に 3px かぶる。 */
.uiCoinBuyBox {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* オススメの印。購入ボタンの上に、ボタンより手前に重ねる。
   ボタンは will-change: transform を持っていて自前の重なりを作るため、
   z-index を付けないと印がボタンの下に潜って尖りが消える。 */
.uiCoinRec {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 3px);
    transform: translateX(-50%);
    z-index: 1;
    width: 64px;
    height: 21px;
    pointer-events: none;
}

.uiCoinBuy,
button.uiCoinBuy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 34px;
    padding: 4px 14px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    background-color: #84C52B;
    border: none;
    border-radius: 999px;
    box-shadow: 0px 2px 0px 0px #6DAD15;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* コイン購入モーダルの枠 (body 直下に生成されるため .uiCard とは別に定義) */
/* デザイン (Desktop/img.png) は画面をほぼ占有する 1 枚画面。
   他の全画面カード (.uiScreen) と同じく上に 10px の余白 + 上端だけ角丸にし、
   下端は画面下まで使って最下部に「とじる」バーを置く。 */
.uiCoinOv {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 10px 0 0;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.45);
}

.uiCoinCard {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: none;
    overflow: hidden;
    background-color: #FDF5C6;
    border-radius: 14px 14px 0 0;
}

.uiCoinTtl {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-bottom: 1px solid #F7D66F;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: #783300;
    background-color: #FCED70;
}

/* 所持しているカメG / コイン (デザイン: Desktop/img.png)。
   タイトルの下、本文の外に置いて、スクロールしても頭に残るようにする */
.uiCoinWallet {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    background-color: #FCED70;
}

.uiCoinWalletItem {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 999px;
}

.uiCoinWalletIco {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: no-repeat center / contain;
}

/* カメG。ショップの財布と同じ絵 (shop.css の .purseContent と同じ ico_kameg) */
.uiCoinWalletIco--gold {
    background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/ico_kameg.svg');
}

.uiCoinWalletIco--coin {
    background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/ico_coin_status.svg');
}

.uiCoinWalletVal {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
    color: #783300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiCoinBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 17px 13px 12px;
}

.uiCoinMsg {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    color: #d0402f;
}

.uiCoinFoot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ui-footer-h, 47px);
    padding: 4px 16px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background-color: #FFF183;
    border-top: 1px solid #F7D66F;
}

/* =====================================================================
   全画面カード (.uiScreen)
   ヘッダーから下部バーまでを 1 枚で占有する画面用の枠。
   デザイン (設定/アイテムBOX/おねだり 等) は上に 10px の余白があり、
   上端だけ角丸。下は下部バーとの間に余白を作らず、バーの直上で止める。
   ===================================================================== */
.uiScreen {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    bottom: calc(var(--ui-footer-h) + env(safe-area-inset-bottom, 0px));
    z-index: 96;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #FDF5C6;
    border-radius: 14px 14px 0 0;
}

/* 画面ヘッダー (31px / #FFF183) */
.uiScreenTtl {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    margin: 0;
    padding: 0 0 1px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
    color: #783300;
    background-color: #FFF183;
    border-bottom: 1px solid #FED45B;
}

/* スクロール本文 */
.uiScreenBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
}

/* 白いリストカード (行区切りは点線) */
.uiList {
    margin: 0;
    padding: 0 10px;
    list-style: none;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.uiList > li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 0;
    list-style: none;
    background: none;
    border-bottom: 1px solid #f0ece0;
}

.uiList > li:last-child {
    border-bottom: none;
}

.uiListIco {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.uiListIco img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.uiListInfo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #6d4c1f;
}

.uiListInfo p {
    margin: 0;
}

.uiListName {
    font-size: 12px;
    line-height: 1.4;
    color: #8f8f8f;
    word-break: break-word;
}

.uiListSub {
    margin: 2px 0 0;
    font-size: 12px;
    color: #63a803;
}

.uiListPoint {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    color: #e8821e;
}

/* 空状態 (カメアイコン + 2 行メッセージ) */
.uiEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 60px 12px;
    text-align: center;
}

/* 一覧が空のときは本文エリアの中央に置く (デザイン: Desktop/img.png) */
.uiScreenBody--center {
    display: flex;
    flex-direction: column;
}

.uiScreenBody--center .uiEmpty {
    flex: 1 1 auto;
    padding: 12px;
}

/* カメ友一覧の空状態と同じカメアイコンを使う */
.uiEmptyIco {
    width: 52px;
    height: 52px;
    background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/fellow/kame_icon.svg') no-repeat center / contain;
}

.uiEmptyTxt {
    margin: 0;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.6;
    color: #C6A845;
}

/* =====================================================================
   カテゴリピル (.uiPills / .uiPill)
   タブの下に置く 2 段目の絞り込み。選択中は緑のピル。
   (デザイン: Desktop/img2.png リサイクル / img4.png 図鑑)
   ===================================================================== */
.uiPills {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px;
    background-color: #FDF5C6;
}

.uiPill,
a.uiPill:link,
a.uiPill:visited,
a.uiPill:hover,
a.uiPill:active {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 4px 12px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: #8a6d3b;
    background-color: transparent;
    border: none;
    border-radius: 999px;
}

.uiPill.is-active,
a.uiPill.is-active:link,
a.uiPill.is-active:visited {
    color: #fff;
    background-color: #84C52B;
}


/* =====================================================================
   動画リワード広告 (デザイン: Desktop/img.png)
   コイン購入モーダル上部のバナーと、視聴後の「コインを獲得しました」
   ===================================================================== */

/* 「広告を見てコインをGET!」バナー (banner_reward_ad.png / 672x195)。
   文言は画像に入っているのでボタンのテキストは隠す
   (画像が出ないときのために aria-label は残す)。 */
.uiCoinAd {
    display: block;
    width: 100%;
    aspect-ratio: 672 / 195;
    margin: 0 0 17px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    color: transparent;
    border: none;
    border-radius: 10px;
    background-color: #9BD7E4;
    background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/shop/banner_reward_ad.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.uiCoinAd[data-busy='1'] {
    opacity: 0.6;
    pointer-events: none;
}

/* セールの帯 (デザイン: Desktop/img.png)。
   絵は原寸 336x50 で置く。カードの中身は 375px の画面で 350px なので収まる。
   それより狭い端末では縮める (上下の余白は実測: 広告バナーの下 14 / 一覧の上 18)。 */
.uiCoinSale {
    display: block;
    width: 336px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 18px;
}


/* 獲得ダイアログ */
.uiCoinCard--reward {
    padding-bottom: 14px;
}

.uiCoinRewardPanel {
    margin: 12px;
    padding: 22px 12px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
}

.uiCoinRewardIco {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
    background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/ico_coin_pack.svg') no-repeat center / contain;
}

.uiCoinRewardTxt {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    color: #783300;
}

.uiCoinClose {
    margin: 14px 0 0;
    text-align: center;
}

/* リワード広告の事前説明 (資料の「事前の明示」要件) */
.uiCoinAdNote {
    margin: 0 12px 14px;
    padding: 14px;
    font-size: 13px;
    line-height: 1.7;
    color: #783300;
    background-color: #fff;
    border-radius: 10px;
}

.uiCoinAdNote p {
    margin: 0;
}

.uiCoinAdNote b {
    color: #E5352B;
}

.uiCoinAdActions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 12px 14px;
}

/* 広告の描画先。表示は配信側が全画面で作るので枠だけ用意する */
.rewardAdSlot {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
}

/* =====================================================================
   ページ送り 「< 1/100 v >」 (デザイン: Desktop/img.png)
   一覧を持つ画面で共通に使う。Blade は components/ui-pager.blade.php
   ===================================================================== */
.uiPager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 18px 0 0;
}

.uiPagerArw,
a.uiPagerArw:link,
a.uiPagerArw:visited,
a.uiPagerArw:hover,
a.uiPagerArw:active {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background-color: #C6A845;
    -webkit-mask: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/chevron_right.svg') no-repeat center / contain;
    mask: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/chevron_right.svg') no-repeat center / contain;
    cursor: pointer;
}

.uiPagerArw--prev {
    transform: scaleX(-1);
}

.uiPagerArw.is-off {
    opacity: 0.3;
    cursor: default;
}

/* ページ番号のピル (タップでページ一覧を上に開く) */
.uiPagerSel {
    position: relative;
    flex: 0 0 auto;
}

.uiPagerBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 95px;
    height: 35px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: bold;
    color: #C6A845;
    background-color: #F3E7A5;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
}

.uiPagerBtn::-webkit-details-marker {
    display: none;
}

/* 現在のページ番号だけ緑 */
.uiPagerBtn > b {
    font-weight: bold;
    color: #92C349;
}

.uiPagerBtn::after {
    content: "";
    flex: 0 0 auto;
    margin-left: 6px;
    width: 12px;
    height: 12px;
    background-color: #C6A845;
    -webkit-mask: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/chevron_down.svg') no-repeat center / contain;
    mask: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/ui/chevron_down.svg') no-repeat center / contain;
}

/* 一覧はバーの上に出す (ページ送りは画面下側にあるため) */
.uiPagerMenu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    min-width: 95px;
    max-height: 190px;
    margin: 0 0 4px;
    padding: 4px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.uiPagerMenu > li {
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}

.uiPagerMenu a,
.uiPagerMenu a:link,
.uiPagerMenu a:visited,
.uiPagerMenu a:hover,
.uiPagerMenu a:active {
    display: block;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: #783300;
}

.uiPagerMenu a.is-current {
    color: #92C349;
}

/* =====================================================================
   小さな確認ダイアログ (デザイン: Desktop/img6.png のコイン不足)
   黄色ヘッダー + 白いメッセージボックス + 緑ボタン + カード外の「とじる」
   ===================================================================== */
.uiAlertOv {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.55);
}

.uiAlertCard {
    width: 320px;
    max-width: 100%;
    background-color: #FDF5C6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.uiAlertTtl {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: #783300;
    background-color: #FCED70;
}

.uiAlertBody {
    padding: 12px 14px 0;
}

.uiAlertMsg {
    margin: 0;
    padding: 12px 10px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
    color: #E5352B;
    background-color: #fff;
    border-radius: 8px;
}

.uiAlertMsg span {
    font-weight: normal;
}

.uiAlertAction {
    margin: 0;
    padding: 12px 14px 16px;
    text-align: center;
}

/* a でも button でも同じ見た目にする (行動力不足は回復アイテムへのリンク) */
.uiAlertBtn,
button.uiAlertBtn,
a.uiAlertBtn:link,
a.uiAlertBtn:visited {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 34px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    background-color: #84C52B;
    border: none;
    border-radius: 999px;
    box-shadow: 0px 2px 0px 0px #6DAD15;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* 2 つ目の導線 (連携ポイントを使う)。1 つ目の下に少し離して置くだけで、
   見た目は 1 つ目と同じ緑のボタンにする (どちらも回復するための導線なので) */
.uiAlertBtn--sub,
a.uiAlertBtn--sub:link,
a.uiAlertBtn--sub:visited {
    margin-top: 10px;
}

.uiAlertClose {
    margin: 14px 0 0;
    text-align: center;
}

/* 案内だけのメッセージ (エラーではないので赤くしない) */
.uiAlertMsg--plain {
    color: #6d4c1f;
    font-weight: normal;
    text-align: left;
}

/* =====================================================================
   「ホーム画面に追加」の手順案内 (デザイン: Desktop/img.png)

   LINE のミニブラウザの […] メニューからしか追加できない端末があるので、
   その手順を番号付きで見せる。デザインの原案はスクリーンショットの上に
   吹き出しを置いた形だったが、端末やブラウザで […] の位置が違い、
   指す先がずれるため、ゲームの他のモーダルと同じカードに並べる。
   ===================================================================== */
.ahGuideOv {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.62);
}

/* […] のある右上を指す矢印。位置は端末で変わるので「右上のほう」だけ示す */
.ahGuideOv::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 18px;
    border-style: solid;
    border-width: 0 11px 14px 11px;
    border-color: transparent transparent #FCED70 transparent;
}

.ahGuideCard {
    width: 320px;
    max-width: 100%;
    background-color: #FDF5C6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.ahGuideTtl {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: #783300;
    background-color: #FCED70;
}

.ahGuideSteps {
    margin: 0;
    padding: 12px;
    list-style: none;
}

.ahGuideStep {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 8px;
    padding: 10px 12px;
    background-color: #fff;
    border-radius: 10px;
}

.ahGuideStep:last-child {
    margin-bottom: 0;
}

/* 番号は丸で出す (お世話メニューの数字と同じ見た目) */
.ahGuideNo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    background-color: #84C52B;
    border-radius: 50%;
}

.ahGuideBody {
    flex: 1 1 auto;
    min-width: 0;
}

.ahGuideStepTtl {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    color: #783300;
}

.ahGuideNote {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #6d4c1f;
}

.ahGuideAction {
    margin: 0;
    padding: 0 12px 12px;
    text-align: center;
}

.ahGuideHint {
    margin: 10px 0 0;
    font-size: 12px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ===== ページオーバーレイ (ランキング/れんらく帳をマイページ上に重ねる) =====
   黒透過の背景はフッター (z-index:90) にも重ね、表示中はフッターの
   ボタンをタップさせない */
.stageOverlay {
    position: fixed;
    inset: 0;
    z-index: 95;
    background-color: rgba(0, 0, 0, 0.5);
}

/* マイページ以外 (ガチャ / ショップ) の上に重ねる場合。
   それらの画面は全画面カード (.uiScreen / .shopWrap 等 = z-index 96) を
   持つため、既定の 95 のままだと下に隠れて何も見えない。 */
.stageOverlay--page {
    z-index: 98;
}

/* コイン購入モーダル (.uiCoinOv = 99999) の中から開いた法定表示。
   既定の 95 / 98 のままだとモーダルの下に潜って何も見えないので、
   そのモーダルより前に出す。 */
.stageOverlay--top {
    z-index: 100000;
}

/* コンテンツのスクロールはこの div の中で行う (画面スクロールさせない)。
   最大高さはフッターボタンの上端まで — 背景の黒透過 (.stageOverlay) は
   フッターを覆ったまま、スクロール領域だけをフッターの上で止める */
.stageOverlay__scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* div 内スクロールが端に達しても背後 (マイページ本体) へ連鎖させない */
    overscroll-behavior: contain;
    padding-bottom: 24px;
    box-sizing: border-box;
    /* 通信 + CSS 読み込みが終わるまで中身を出さない (崩れた状態のちらつき防止)。
       .is-ready は render() が DOM 構築後に付与する。
       opacity ではなく visibility を使う: opacity<1 はスタッキングコンテキストを
       作り、中の position:fixed (カード/下部バー) の基準がこの要素になってしまうため。 */
    visibility: hidden;
}

.stageOverlay.is-ready .stageOverlay__scroll {
    visibility: visible;
}

/* 挿入されたコンテンツの背景は透過にし、黒透過ごしにマイページを透かす。
   legacy の #contents (ID セレクタ) に負けないよう ID 付きでも指定する */
.stageOverlay .ovContents,
.stageOverlay #contents,
.stageOverlay #contents.valid {
    background: transparent !important;
}

/* 読み込み中の表示。スクロール領域の外 (オーバーレイ直下) に置き、
   コンテンツ側の opacity 制御に影響されずタップ直後から見せる。 */
.stageOverlay__loading {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: 0;
    color: #fff;
    font-size: 13px;
    text-align: center;
    pointer-events: none;
}

/* 準備完了後は消す */
.stageOverlay.is-ready .stageOverlay__loading {
    display: none;
}

.stageOverlay__closeBtn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    margin: 0;
    text-align: center;
    z-index: 2;
}

/* オーバーレイ表示ページ (つっつく/おねだり等) 共通の閉じるボタン。
   components/overlay-close.blade.php が overlay=1 のときだけ出力する。
   コンテンツ末尾に流し込みで置き、中央寄せで表示する */
.ovCloseRow {
    position: relative;
    z-index: 2;
    margin: 16px 0 24px;
    text-align: center;
}

.ovCloseRow .ovCloseBtn img {
    vertical-align: middle;
}

/* =====================================================================
   画面に直接重ねるモーダル

   .uiModal はカード (.uiCard) の中に置く前提で position:absolute にしている。
   ページそのものがモーダル 1 枚のとき (コイン購入の確認中など) は、
   ビューポートに対して固定したいのでこの修飾子を付ける。

   重なりの順は下から
     下部ナビ 90 → .uiScreen/.uiCard 96 → .uiFooter 97
     → コイン購入モーダル 99999 → 広告 2147483000 → vConsole 2147483600〜
   .uiModal の既定は z-index:20 で、下部ナビ (90) より下だった。そのため
   購入の確認中モーダルの黒い背景が下部ナビの手前で途切れて見え、
   ナビはそのまま押せてしまっていた。決済は済んでいて待つしかない場面なので、
   広告より上・vConsole より下に置いて画面ぜんぶを覆う。
   ===================================================================== */
.uiModal--fixed {
    position: fixed;
    z-index: 2147483500;
    /* 覆っている間は下の画面をスクロールさせない
       (覆っているだけだと、指を滑らせれば裏の農園が動いてしまう) */
    touch-action: none;
    overscroll-behavior: contain;
}

/* =====================================================================
   待機表示 (コイン購入の確認中)

   LINE の決済は済んでいて、コインを付ける通知を待っている状態。
   数秒で終わるので、閉じる手段は置かずに待ってもらう。
   待ちが長引いたときだけ、逃げ道のボタンを出す (blade 側で hidden を外す)。
   ===================================================================== */
.uiWait {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    white-space: normal;
}

.uiWaitRing {
    width: 34px;
    height: 34px;
    border: 4px solid #FCED70;
    border-top-color: #FC8414;
    border-radius: 50%;
    animation: uiWaitSpin 0.9s linear infinite;
}

.uiWaitMsg {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: #783300;
}

.uiWaitNote {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #8a7a5c;
}

@keyframes uiWaitSpin {
    to { transform: rotate(360deg); }
}

/* 動きを減らす設定の端末では回さない (酔い・発作の配慮) */
@media (prefers-reduced-motion: reduce) {
    .uiWaitRing {
        animation: none;
        border-top-color: #FED45B;
    }
}

/* =====================================================================
   ボタンの押し心地 (ぽよよーん)

   押した瞬間に少し沈んで縮み、離すと行きすぎてから戻る。
   行きすぎ (overshoot) は cubic-bezier の 3 番目の値を 1 より大きくして作る。

   transform だけを動かすので、書き換えのたびにレイアウトを組み直さずに済む
   (端末が非力でも引っかかりにくい)。

   対象は押せるもの全般。ボタンの見た目 (色・大きさ) には触らない。
   ===================================================================== */
.uiBtn,
button.uiBtn,
input.uiBtn,
a.uiBtn:link,
.uiBtnClose,
button.uiBtnClose,
a.uiBtnClose:link,
.uiCoinBuy,
button.uiCoinBuy,
.uiFootBtn,
a.uiFootBtn:link,
#wrap .btn,
#wrap .btn02,
/* マイページ下部のピンクのボタン (お世話 / 設置 / つっつく / おねだり)。
   他人の農園の同じ帯 (.opActions) も同じ見た目なので一緒に扱う */
.fsBtn,
button.fsBtn,
a.fsBtn:link,
/* お世話 / 設置 のモーダルに並ぶ黄色いボタン */
.cmBtn,
button.cmBtn,
a.cmBtn:link {
    /* 戻るときは行きすぎてから落ち着く = ぽよん */
    transition: transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.uiBtn:active,
button.uiBtn:active,
input.uiBtn:active,
a.uiBtn:active,
.uiBtnClose:active,
button.uiBtnClose:active,
a.uiBtnClose:active,
.uiCoinBuy:active,
button.uiCoinBuy:active,
.uiFootBtn:active,
a.uiFootBtn:active,
#wrap .btn:active,
#wrap .btn02:active,
.fsBtn:active,
button.fsBtn:active,
a.fsBtn:active,
.cmBtn:active,
button.cmBtn:active,
a.cmBtn:active {
    /* 押している間は速く沈む (もたつくと反応が鈍く感じる) */
    transform: translateY(1px) scale(0.94);
    transition-duration: 90ms;
    transition-timing-function: ease-out;
}

/* 押せないボタンは動かさない (押せたように見えてしまう) */
.uiBtn:disabled,
button.uiBtn:disabled,
input.uiBtn:disabled,
.uiBtnClose:disabled,
.uiCoinBuy:disabled,
.uiFootBtn.is-off,
#wrap .btn.btnOff,
#wrap .btn.off,
/* 押せない状態。基底が a.fsBtn:link / a.cmBtn:link (詳細度 0,2,1) なので、
   ここも要素付きで書かないと打ち消せない (書かないと押せないボタンが跳ねる) */
.fsBtn.is-off,
button.fsBtn.is-off,
a.fsBtn.is-off:link,
.cmBtn.is-off,
button.cmBtn.is-off,
a.cmBtn.is-off:link {
    transition: none;
}

.uiBtn:disabled:active,
button.uiBtn:disabled:active,
input.uiBtn:disabled:active,
.uiBtnClose:disabled:active,
.uiCoinBuy:disabled:active,
.uiFootBtn.is-off:active,
#wrap .btn.btnOff:active,
#wrap .btn.off:active,
.fsBtn.is-off:active,
button.fsBtn.is-off:active,
a.fsBtn.is-off:active,
.cmBtn.is-off:active,
button.cmBtn.is-off:active,
a.cmBtn.is-off:active {
    transform: none;
}

/* 動きを減らす設定の端末では跳ねさせない (酔い・発作の配慮) */
@media (prefers-reduced-motion: reduce) {
    .uiBtn,
    button.uiBtn,
    input.uiBtn,
    a.uiBtn:link,
    .uiBtnClose,
    button.uiBtnClose,
    a.uiBtnClose:link,
    .uiCoinBuy,
    button.uiCoinBuy,
    .uiFootBtn,
    a.uiFootBtn:link,
    #wrap .btn,
    #wrap .btn02,
    .fsBtn,
    button.fsBtn,
    a.fsBtn:link,
    .cmBtn,
    button.cmBtn,
    a.cmBtn:link {
        transition: none;
    }

    .uiBtn:active,
    button.uiBtn:active,
    input.uiBtn:active,
    a.uiBtn:active,
    .uiBtnClose:active,
    button.uiBtnClose:active,
    a.uiBtnClose:active,
    .uiCoinBuy:active,
    button.uiCoinBuy:active,
    .uiFootBtn:active,
    a.uiFootBtn:active,
    #wrap .btn:active,
    #wrap .btn02:active,
    .fsBtn:active,
    button.fsBtn:active,
    a.fsBtn:active,
    .cmBtn:active,
    button.cmBtn:active,
    a.cmBtn:active {
        transform: none;
    }
}

/* 価格が取れなかったコインパック。買わせない (金額を出さずに購入させられない)。
   ボタンの装飾は .uiCoinBuy が持っているので、無効の見た目だけ上書きする */
.uiCoinBuy.is-off,
button.uiCoinBuy.is-off {
    background: #cccccc;
    color: #ffffff;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
    font-size: 12px;
    min-width: 130px;
}

/* 有償コインと無償コインの区別表示 (LINEアプリ内課金利用規約 第2条第3項③) */
.coinBreakdown {
    margin: 2px 0 0;
    font-size: 10px;
    line-height: 1.5;
    color: #7a7a7a;
    text-align: center;
}