/*!
 * © 2026 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: aunt-coin-webapp / css/style.css
 * BUILD_ID: YR-2026-0224-K29                 // ← 公開用の可視ビルドID
 * CANARY_ZW
 * SPDX-License-Identifier: LicenseRef-Yuuraku-Proprietary
 * Contact: yuurakunomori@gmail.com  |  URL: https://yuurakus.jp/
 *
 * 重要
 * 
* [日本語 / Japanese]
 * 本スタイルシートおよび関連ファイルの著作権（著作権法上の権利）は、パソコンサロンゆうらくに専属します。
 * 法令で明示的に認められる場合を除き、当社の事前の書面許諾なく、複製・複写・転載・転用・編集・改変・翻案・
 * 逆コンパイル／リバースエンジニアリング・再配布・商用利用・公衆送信（Webへのアップロードを含む）・
 * 自動取得／スクレイピング等の二次利用を固く禁じます。侵害が判明した場合、警告なく直ちに
 * 差止請求・損害賠償請求等の法的措置を厳格に行います。
 * 【重要】本スタイルシートには検証用のBUILD IDおよび不可視の「カナリア文字（ウォーターマーク）」が埋め込まれ、
 * ソースには識別用IDが隠されています。これらの削除・改変は契約違反・不正競争・著作権侵害等として追及します。
 *
 * [English]
 * Copyright in this stylesheet and related files is owned exclusively by
 * Pasokon Salon Yuuraku unless otherwise stated. Except as expressly permitted by law,
 * any reproduction, modification, adaptation, reverse engineering, redistribution,
 * commercial use, public transmission (including posting on the web), or automated
 * collection/scraping without prior written permission is strictly prohibited.
 * Upon detection of infringement, we will immediately pursue legal remedies including
 * injunctive relief and damages. IMPORTANT: This stylesheet embeds a verifiable BUILD ID
 * and invisible “canary” watermark characters, and an identification ID is hidden in the source.
 * Removal or alteration will be treated as a violation and strictly enforced.
 *
 * [中文 / Chinese (Simplified)]
 * 本样式表及相关文件之著作权，除非另有说明，专属于「Pasokon Salon Yuuraku」。
 * 未经事先书面许可，严禁复制、转载、修改、改编、逆向工程、再分发、商业使用、
 * 公开传播（含上传至网络）及自动抓取/爬取等二次利用。一经发现侵权，将立即采取包括
 * 禁令与损害赔偿在内的法律措施。重要：本样式表内已嵌入可验证的BUILD ID与不可见
 * “金丝雀”水印字符，且源代码中隐藏有识别用ID。擅自删除或篡改将被视为违规并依法追究。
 *
 * [한국어 / Korean]
 * 본 스타일시트 및 관련 파일의 저작권은 별도 고지가 없는 한
 * ‘파소콘 살롱 유우라쿠(Pasokon Salon Yuuraku)’에 전속됩니다.
 * 사전 서면 허가 없이 복제, 전재, 전용, 수정, 각색, 리버스 엔지니어링,
 * 재배포, 상업적 이용, 공중송신(웹 게시 포함), 자동 수집·스크래핑 등의 2차 이용을 엄격히 금합니다.
 * 위반 시 예고 없이 즉시 금지청구 및 손해배상 청구 등 법적 조치를 취합니다.
 * 중요: 본 스타일시트에는 검증 가능한 BUILD ID와 보이지 않는 ‘카나리아(워터마크) 문자’가 포함되며,
 * 소스 내부에는 식별용 ID가 숨겨져 있습니다. 이를 삭제·변조하는 행위는 위반으로 간주되어 엄정 대응합니다.
 */

/* ========================================================
    style.css - 決算書タブ・BS/PL・健全度・タブバー
   ======================================================== */
:root {
  --ed:#1B0F07;--edk:#2E1A0E;--em:#4E342E;--el:#6D4C41;--es:#8D6E63;
  --sand:#D7CCC8;--sd:#A1887F;--grn:#558B2F;--gld:#FFD54F;
  --inc:#66BB6A;--exp:#EF5350;--coin:#FFC107;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ed);color:var(--sand);
  font-family:'Segoe UI','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;font-size:14px}

/* HUD */
#hud{display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 14px;
  background:linear-gradient(180deg,#1a1a1a,var(--ed));border-bottom:2px solid var(--em);z-index:100}
.hl{display:flex;align-items:center;gap:10px}
.ht{font-size:15px;color:var(--gld);letter-spacing:1px;text-shadow:0 0 8px rgba(255,193,7,.3);font-weight:bold}
.hd{font-size:11px;color:var(--sd)}
.hc{display:flex;gap:20px}
.hs{display:flex;flex-direction:column;align-items:center}
.hsl{font-size:9px;color:var(--sd);text-transform:uppercase;letter-spacing:.5px}
.hv{font-size:15px;font-weight:bold;font-family:monospace}
.hv.p{color:var(--inc)}.hv.n{color:var(--exp)}
.hv.c{color:var(--gld);text-shadow:0 0 6px rgba(255,193,7,.4);
  display:inline-flex;align-items:center;gap:4px}
.hv.c::before{content:'';display:inline-block;width:18px;height:18px;
  background:radial-gradient(circle at 40% 35%,#FFF176,#FFD700 50%,#DAA520);
  border-radius:50%;border:1.5px solid #B8860B;box-shadow:0 0 4px rgba(255,215,0,.5)}
.hrt{min-width:60px;text-align:right}
.hsk{font-size:12px;color:#FF7043;font-weight:bold}

/* Main layout */
#app{display:flex;height:calc(100vh - 54px)}
#ca{flex:1;position:relative;overflow:hidden;background:var(--edk)}
#cv{display:block;width:100%;height:100%;cursor:pointer}
#cv:active{cursor:grabbing}
#rp{width:330px;background:linear-gradient(180deg,#1a1208,#0f0a05);border-left:2px solid var(--em);
  display:flex;flex-direction:column;overflow-y:auto}
#rp::-webkit-scrollbar{width:4px}#rp::-webkit-scrollbar-thumb{background:var(--el);border-radius:2px}
.ps{padding:10px 14px;border-bottom:1px solid rgba(141,110,99,.2)}

/* Add button */
.ba{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;
  background:linear-gradient(135deg,var(--grn),#388E3C);color:#fff;border:none;border-radius:10px;
  font-size:15px;font-weight:bold;cursor:pointer;transition:all .2s;box-shadow:0 3px 12px rgba(85,139,47,.4)}
.ba:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(85,139,47,.5)}
.ba:active{transform:translateY(1px)}

/* Room info */
.rd{display:flex;align-items:center;gap:8px}
.rdi{font-size:18px}.rdn{font-size:13px;font-weight:bold}
.rdl{font-size:11px;color:var(--gld);margin-left:auto}
.rds{margin-top:4px;font-size:11px;color:var(--sd)}

/* ===== Tab bar ===== */
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--em);flex-shrink:0}
.tab-btn{flex:1;padding:9px 0;background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--sd);font-size:12px;font-weight:bold;cursor:pointer;transition:all .2s;
  margin-bottom:-2px;letter-spacing:.5px}
.tab-btn:hover{color:var(--sand);background:rgba(78,52,46,.2)}
.tab-btn.active{color:var(--gld);border-bottom-color:var(--gld);
  text-shadow:0 0 6px rgba(255,193,7,.3)}
.tab-content{display:none;flex:1;overflow-y:auto}
.tab-content.active{display:block}
.tab-content::-webkit-scrollbar{width:3px}
.tab-content::-webkit-scrollbar-thumb{background:var(--el);border-radius:2px}

/* Month nav */
.mn{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:6px}
.bmn{background:none;border:1px solid var(--el);color:var(--sand);width:26px;height:26px;border-radius:6px;
  cursor:pointer;font-size:11px;transition:background .2s}
.bmn:hover{background:var(--em)}
.ml{font-size:13px;font-weight:bold;min-width:90px;text-align:center}

/* History */
.hl2{max-height:calc(100vh - 360px);overflow-y:auto}
.hl2::-webkit-scrollbar{width:3px}.hl2::-webkit-scrollbar-thumb{background:var(--el);border-radius:2px}
.he{text-align:center;color:var(--sd);padding:20px 0;font-size:12px}
.hsum{display:flex;gap:6px;margin-bottom:8px;padding:7px;background:rgba(78,52,46,.3);border-radius:8px}
.hsi{flex:1;text-align:center;font-size:10px;color:var(--sd)}
.hsi strong{display:block;font-size:12px;margin-top:2px;font-family:monospace}
.hsi.i strong{color:var(--inc)}.hsi.e strong{color:var(--exp)}
.hsi.bp strong{color:var(--inc)}.hsi.bn strong{color:var(--exp)}
.hr2{display:flex;align-items:center;gap:5px;padding:7px 3px;border-bottom:1px solid rgba(141,110,99,.1);transition:background .15s}
.hr2:hover{background:rgba(141,110,99,.1)}
.hi{font-size:15px;flex-shrink:0}.hca{font-size:11px;font-weight:bold;min-width:42px}
.hsub{font-size:9px;color:var(--sd);margin-left:2px}
.hno{font-size:10px;color:var(--sd);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdt{font-size:9px;color:var(--sd);flex-shrink:0;font-family:monospace}
.ham{font-size:12px;font-weight:bold;flex-shrink:0;min-width:65px;text-align:right;font-family:monospace}
.ham.i{color:var(--inc)}.ham.e{color:var(--exp)}
.hdl{background:none;border:none;color:var(--el);cursor:pointer;font-size:13px;opacity:0;transition:opacity .2s;padding:2px 4px}
.hr2:hover .hdl{opacity:.7}.hdl:hover{opacity:1;color:var(--exp)}

/* ===== 決算書タブ ===== */
.fs-section{padding:12px 14px;border-bottom:1px solid rgba(141,110,99,.15)}
.fs-title{font-size:14px;font-weight:bold;color:var(--gld);margin-bottom:10px;
  text-shadow:0 0 6px rgba(255,193,7,.2)}

/* 健全度 */
.fs-health{text-align:center;background:rgba(78,52,46,.2);border-radius:10px;padding:16px 14px}
.fs-health-stars{font-size:28px;color:var(--gld);letter-spacing:4px;
  text-shadow:0 0 12px rgba(255,193,7,.4)}
.fs-health-label{font-size:14px;margin-top:6px;color:var(--sand)}
.fs-health-label strong{color:var(--gld)}
.fs-health-ratio{font-size:12px;margin-top:4px;color:var(--sd)}
.fs-health-ratio strong{color:var(--sand)}

/* BS ボックス */
.fs-bs-box{display:flex;gap:8px}
.fs-bs-col{flex:1;background:rgba(0,0,0,.25);border-radius:8px;padding:10px;min-width:0}
.fs-bs-header{font-size:11px;font-weight:bold;color:var(--sand);text-align:center;
  padding-bottom:6px;border-bottom:1px solid rgba(141,110,99,.2);margin-bottom:6px}
.fs-bs-total{font-size:16px;font-weight:bold;text-align:center;font-family:monospace;
  margin-bottom:8px;color:var(--sand)}
.fs-bs-left .fs-bs-total{color:var(--inc)}
.fs-bs-right .fs-bs-total{color:#AB47BC}
.fs-bs-sub{font-size:11px}
.fs-bs-subhead{font-size:10px;font-weight:bold;margin:6px 0 3px;padding-top:4px;
  border-top:1px dashed rgba(141,110,99,.15)}
.fs-item{display:flex;justify-content:space-between;align-items:center;
  padding:2px 0;font-size:11px;color:var(--sd)}
.fs-item span{font-family:monospace;font-weight:bold;color:var(--sand);font-size:11px}

/* PL ボックス */
.fs-pl-box{background:rgba(0,0,0,.2);border-radius:8px;padding:10px}
.fs-pl-group{margin-bottom:8px}
.fs-pl-label{font-size:12px;font-weight:bold;margin-bottom:4px;
  padding-bottom:4px;border-bottom:1px solid rgba(141,110,99,.15)}
.fs-pl-profit{display:flex;justify-content:space-between;align-items:center;
  padding:10px;margin-top:8px;border-radius:8px;font-size:13px}
.fs-pl-profit.positive{background:rgba(102,187,106,.12);border:1px solid rgba(102,187,106,.3)}
.fs-pl-profit.positive strong{color:var(--inc);font-size:16px;font-family:monospace}
.fs-pl-profit.negative{background:rgba(239,83,80,.12);border:1px solid rgba(239,83,80,.3)}
.fs-pl-profit.negative strong{color:var(--exp);font-size:16px;font-family:monospace}

/* フロアマップ */
.fs-floor{display:flex;align-items:center;gap:8px;padding:6px 4px;
  border-bottom:1px solid rgba(141,110,99,.1)}
.fs-floor-id{font-size:11px;font-weight:bold;font-family:monospace;min-width:30px}
.fs-floor-name{font-size:12px;color:var(--sand);flex:1}
.fs-floor-rooms{font-size:10px;color:var(--sd);font-family:monospace;min-width:45px;text-align:right}
.fs-floor-label{font-size:9px;color:var(--sd);min-width:80px;text-align:right}
.fs-floor.locked{opacity:0.5}
.fs-floor.locked .fs-floor-name{color:var(--el)}

/* 成長フェーズ */
.fs-phase-current{display:flex;align-items:center;gap:10px;padding:10px;
  background:rgba(255,213,79,.08);border:1px solid rgba(255,213,79,.2);border-radius:10px;margin-bottom:10px}
.fs-phase-lv{font-size:20px;font-weight:bold;color:var(--gld);font-family:monospace}
.fs-phase-name{font-size:15px;font-weight:bold;color:var(--sand)}
.fs-phase-row{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:12px;color:var(--sd);
  border-bottom:1px solid rgba(141,110,99,.08)}
.fs-phase-row.reached{color:var(--sand)}
.fs-phase-dot{font-size:14px;flex-shrink:0}
.fs-phase-info{margin-left:auto;font-size:10px;color:var(--el);font-family:monospace}

/* 女王アリ表示 */
.fs-queen{text-align:center;padding:12px;margin-top:10px;
  background:linear-gradient(135deg,rgba(255,215,0,.1),rgba(255,215,0,.05));
  border:1px solid rgba(255,215,0,.25);border-radius:10px;
  font-size:13px;color:var(--gld);font-weight:bold;
  animation:queen-glow 3s ease-in-out infinite}

/* Room modal floor info */
.rm-floor{font-size:12px;margin-bottom:10px;font-weight:bold}

/* Toolbar */
.pf{display:flex;gap:4px;margin-top:auto;padding:10px 14px;flex-wrap:wrap;flex-shrink:0}
.bt{flex:1;padding:7px;background:rgba(78,52,46,.4);border:1px solid var(--el);color:var(--sd);
  border-radius:6px;cursor:pointer;font-size:10px;transition:all .2s;min-width:60px;text-align:center}
.bt:hover{background:var(--em);color:var(--sand)}

/* Modal */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:flex;
  align-items:center;justify-content:center;z-index:1000}
.mc{background:linear-gradient(160deg,#2a1a0e,#1a0f08);border:2px solid var(--el);border-radius:14px;
  padding:20px;width:90%;max-width:400px;max-height:85vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,.6)}
.mc::-webkit-scrollbar{width:3px}.mc::-webkit-scrollbar-thumb{background:var(--el);border-radius:2px}
.mh{color:var(--gld);font-size:17px;text-align:center;margin-bottom:14px;font-weight:bold}

/* Type tabs */
.tt{display:flex;gap:3px;margin-bottom:14px;background:rgba(0,0,0,.3);border-radius:8px;padding:3px}
.ttb{flex:1;padding:7px;background:transparent;border:none;color:var(--sd);border-radius:6px;
  cursor:pointer;font-size:12px;font-weight:bold;transition:all .2s}
.ttb.a{background:var(--em);color:var(--sand);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.ttb:hover:not(.a){color:var(--sand)}

/* Input groups */
.ig{margin-bottom:12px}
.ig label{display:block;font-size:10px;color:var(--sd);margin-bottom:3px;text-transform:uppercase;letter-spacing:.5px}
.ig input{width:100%;padding:9px 11px;background:rgba(0,0,0,.4);border:1px solid var(--el);border-radius:7px;
  color:var(--sand);font-family:monospace;font-size:15px;outline:none;transition:border-color .2s}
.ig input:focus{border-color:var(--gld);box-shadow:0 0 8px rgba(255,193,7,.15)}
.ig input::placeholder{color:var(--el)}

/* Category picker */
.cp{display:flex;flex-wrap:wrap;gap:5px;max-height:150px;overflow-y:auto;padding:3px 0}
.cp::-webkit-scrollbar{width:3px}.cp::-webkit-scrollbar-thumb{background:var(--el);border-radius:2px}
.cb{display:flex;align-items:center;gap:3px;padding:5px 9px;background:rgba(0,0,0,.3);
  border:1.5px solid var(--el);border-radius:18px;color:var(--sand);cursor:pointer;font-size:11px;
  transition:all .2s;white-space:nowrap}
.cb:hover{background:rgba(78,52,46,.5)}
.cb.s{background:rgba(78,52,46,.7);border-color:var(--gld);box-shadow:0 0 8px rgba(255,193,7,.2)}

/* Sub-category picker */
.sp{display:flex;flex-wrap:wrap;gap:4px;padding:3px 0}
.sl{font-size:9px;color:var(--sd);margin-bottom:4px;width:100%}
.sb{display:flex;align-items:center;gap:2px;padding:3px 7px;background:rgba(0,0,0,.2);
  border:1px solid rgba(141,110,99,.3);border-radius:14px;color:var(--sd);cursor:pointer;
  font-size:10px;transition:all .2s;white-space:nowrap}
.sb:hover{background:rgba(78,52,46,.4);color:var(--sand)}
.sb.s{background:rgba(78,52,46,.5);border-color:var(--gld);color:var(--sand)}

/* Submit */
.bs{display:block;width:100%;padding:12px;margin-top:6px;background:linear-gradient(135deg,var(--grn),#2E7D32);
  color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:bold;cursor:pointer;
  transition:all .2s;box-shadow:0 4px 16px rgba(85,139,47,.4)}
.bs:hover{transform:translateY(-1px)}.bs:active{transform:translateY(1px)}

/* Room detail modal */
.rm-card{text-align:center;padding:30px 20px}
.rm-icon{font-size:48px;margin-bottom:8px}
.rm-name{font-size:20px;font-weight:bold;color:var(--sand);margin-bottom:4px}
.rm-lv{font-size:16px;color:var(--gld);margin-bottom:4px}
.rm-floor{font-size:12px;margin-bottom:10px}
.rm-stats{font-size:13px;color:var(--sd);line-height:2}
.rm-stats strong{color:var(--sand)}

/* Ant detail modal */
.am-card{text-align:center;padding:30px 20px}
.am-icon{font-size:48px;margin-bottom:8px}
.am-role{font-size:20px;font-weight:bold;margin-bottom:12px}
.am-stats{font-size:13px;color:var(--sd);line-height:2;text-align:left;padding:0 20px}
.am-stats strong{color:var(--sand)}

/* HUD 生産速度 */
.hud-rate{font-size:9px;color:var(--inc);font-family:monospace;display:block;text-align:center;margin-top:1px}

/* アリモーダル EXP/Lv */
.am-name{font-size:18px;font-weight:bold;color:var(--sand);margin-bottom:2px}
.am-lv-row{display:flex;align-items:center;gap:6px;margin:10px 0 6px;padding:0 10px}
.am-lv{font-size:14px;font-weight:bold;color:var(--gld);font-family:monospace;min-width:40px}
.am-exp-bar{flex:1;height:8px;background:rgba(0,0,0,.4);border-radius:4px;overflow:hidden;border:1px solid var(--el)}
.am-exp-fill{height:100%;background:linear-gradient(90deg,var(--gld),#FFE082);border-radius:3px;transition:width .4s}
.am-exp-text{font-size:9px;color:var(--sd);font-family:monospace;min-width:55px;text-align:right}
.am-prod{text-align:center;font-size:12px;color:var(--sd);margin-bottom:8px}
.am-prod strong{color:var(--inc)}

/* 部屋モーダル ファクトリー */
.rm-factory{margin:8px 0;padding:8px 12px;background:rgba(255,213,79,.06);border:1px solid rgba(255,213,79,.15);border-radius:8px}
.rm-factory-label{font-size:13px;font-weight:bold;color:var(--gld)}
.rm-factory-prod{font-size:12px;color:var(--sd);margin-top:3px}
.rm-factory-prod strong{color:var(--inc)}

/* ===== ミッションタブ ===== */
.ms-streak{padding:12px;background:rgba(255,112,67,.08);border:1px solid rgba(255,112,67,.2);border-radius:10px;margin-bottom:10px}
.ms-streak-fire{font-size:18px;font-weight:bold;color:#FF7043;text-align:center}
.ms-streak-mult{font-size:12px;color:var(--sd);text-align:center;margin-top:3px}
.ms-streak-mult strong{color:var(--gld)}
.ms-streak-next{font-size:11px;color:var(--sd);text-align:center;margin-top:4px}
.ms-badges{display:flex;justify-content:center;gap:6px;margin-top:8px}
.ms-badge{font-size:20px;opacity:0.3;filter:grayscale(1);transition:all .3s}
.ms-badge.got{opacity:1;filter:none}
.ms-section{margin-top:6px}
.ms-title{font-size:13px;font-weight:bold;color:var(--gld);margin-bottom:8px}
.ms-item{display:flex;align-items:center;gap:8px;padding:8px;background:rgba(0,0,0,.2);border-radius:8px;margin-bottom:5px;transition:all .2s}
.ms-item.done{background:rgba(102,187,106,.08);border:1px solid rgba(102,187,106,.15)}
.ms-ic{font-size:18px;flex-shrink:0}
.ms-info{flex:1;min-width:0}
.ms-label{font-size:12px;color:var(--sand);margin-bottom:3px}
.ms-bar{height:6px;background:rgba(0,0,0,.4);border-radius:3px;overflow:hidden}
.ms-bar-fill{height:100%;background:linear-gradient(90deg,var(--gld),#FFE082);border-radius:3px;transition:width .4s}
.ms-prog{font-size:9px;color:var(--sd);font-family:monospace;margin-top:2px}
.ms-reward{font-size:11px;color:var(--sd);font-family:monospace;flex-shrink:0}
.ms-got{font-size:16px;flex-shrink:0}
.ms-claim{padding:4px 10px;background:linear-gradient(135deg,var(--gld),#FFC107);color:#1B0F07;border:none;border-radius:14px;
  font-size:11px;font-weight:bold;cursor:pointer;flex-shrink:0;transition:all .2s;animation:claim-pulse 1.5s infinite}
.ms-claim:hover{transform:scale(1.05)}
@keyframes claim-pulse{0%,100%{box-shadow:0 0 4px rgba(255,193,7,.3)}50%{box-shadow:0 0 12px rgba(255,193,7,.6)}}
.ms-all{text-align:center;padding:10px;margin-top:8px;border-radius:8px;font-size:12px;color:var(--sd);
  background:rgba(0,0,0,.15);border:1px dashed rgba(141,110,99,.2)}
.ms-all.ready{border-color:var(--gld);background:rgba(255,213,79,.08)}
.ms-all.claimed{color:var(--inc)}
.ms-claim-all{padding:8px 16px;background:linear-gradient(135deg,#FF7043,#FF5722);color:#fff;border:none;border-radius:18px;
  font-size:13px;font-weight:bold;cursor:pointer;animation:claim-pulse 1.5s infinite}

/* ===== 放置ボーナスモーダル ===== */
.offline-card{text-align:center;padding:30px 24px}
.offline-icon{font-size:48px;margin-bottom:10px;animation:offline-bounce 2s ease infinite}
@keyframes offline-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.offline-title{font-size:20px;font-weight:bold;color:var(--gld);margin-bottom:12px}
.offline-text{font-size:14px;color:var(--sand);line-height:1.8;margin-bottom:18px}
.offline-text strong{color:var(--gld);font-size:20px}
.offline-btn{padding:12px 30px;background:linear-gradient(135deg,var(--grn),#2E7D32);color:#fff;border:none;border-radius:20px;
  font-size:16px;font-weight:bold;cursor:pointer;box-shadow:0 4px 16px rgba(85,139,47,.4);transition:all .2s}
.offline-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(85,139,47,.5)}

/* Toast */
.toast{position:fixed;bottom:-60px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#2E7D32,var(--grn));color:#fff;padding:10px 22px;
  border-radius:22px;font-size:13px;font-weight:bold;box-shadow:0 4px 20px rgba(0,0,0,.4);
  transition:bottom .4s cubic-bezier(.34,1.56,.64,1);z-index:2000;white-space:nowrap}
.toast.show{bottom:22px}

/* Shake */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.shake{animation:shake .4s ease;border-color:var(--exp)!important}
@keyframes queen-glow{0%,100%{box-shadow:0 0 8px rgba(255,215,0,.15)}50%{box-shadow:0 0 20px rgba(255,215,0,.3)}}

/* FAB */
.fab{display:none;position:fixed;bottom:80px;right:18px;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--grn),#2E7D32);color:#fff;border:none;font-size:26px;
  cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.4);z-index:500;align-items:center;justify-content:center}
.fab:active{transform:scale(.92)}

/* ============================
   Responsive
   ============================ */
@media(max-width:1024px){
  #rp{width:280px}
}
@media(max-width:768px){
  #hud{flex-wrap:wrap;height:auto;padding:6px 10px;gap:3px}
  .hl{order:1}.hrt{order:2}
  .hc{order:3;width:100%;justify-content:space-around}
  .ht{font-size:13px}.hv{font-size:12px}
  #app{flex-direction:column;height:calc(100vh - 80px);height:calc(100dvh - 80px)}
  #ca{flex:2;min-height:180px;height:auto}
  #rp{flex:3;min-height:0;width:100%;height:auto;
    border-left:none;border-top:2px solid var(--em);overflow-y:auto}
  .ba{display:none}.fab{display:flex}
  .hl2{max-height:none;overflow-y:visible}
  .pf{flex-shrink:0}
  /* 決算書BS横並びをスマホでは維持（小さく） */
  .fs-bs-box{gap:4px}
  .fs-bs-col{padding:6px}
  .fs-bs-total{font-size:13px}
  .fs-item{font-size:10px}
  .fs-item span{font-size:10px}
}
@media(max-width:480px){
  #app{height:calc(100vh - 70px);height:calc(100dvh - 70px)}
  #ca{flex:1.5;min-height:150px}#rp{flex:3}
  .hc{gap:6px}.ht{font-size:12px}.hv{font-size:11px}.hsl{font-size:8px}
  .bt{padding:5px;font-size:9px;min-width:50px}
  .fs-bs-total{font-size:12px}
  .fs-health-stars{font-size:22px}
}
@media(max-width:768px) and (orientation:landscape){
  #app{flex-direction:row;height:calc(100vh - 50px);height:calc(100dvh - 50px)}
  #ca{flex:1;min-height:auto;height:auto}
  #rp{flex:1;width:auto;height:auto;border-left:2px solid var(--em);border-top:none}
}
@supports(padding-top:env(safe-area-inset-top)){
  #hud{padding-top:env(safe-area-inset-top)}
  .fab{bottom:calc(80px + env(safe-area-inset-bottom))}
  .toast.show{bottom:calc(22px + env(safe-area-inset-bottom))}
  .pf{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* ===== P3: ショップ&ガチャ ===== */
.sh-section{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(141,110,99,.1)}
.sh-title{font-size:14px;font-weight:bold;color:var(--gld);margin-bottom:10px}
.sh-gacha-btns{display:flex;gap:8px;margin-bottom:8px}
.sh-gacha-btn{flex:1;padding:12px 8px;background:linear-gradient(135deg,#4a2810,#3a2008);border:2px solid var(--gld);
  border-radius:10px;color:var(--gld);font-size:13px;font-weight:bold;cursor:pointer;transition:all .2s;text-align:center}
.sh-gacha-btn:hover{transform:scale(1.03);box-shadow:0 0 12px rgba(255,193,7,.3)}
.sh-gacha-btn span{font-size:11px;color:var(--sd);display:block;margin-top:4px}
.sh-gacha-10{border-color:#FF69B4;color:#FF69B4}
.sh-gacha-10:hover{box-shadow:0 0 12px rgba(255,105,180,.3)}
.sh-gacha-info{text-align:center;font-size:11px;color:var(--sd);margin-top:6px}
.sh-rates{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:6px}
.sh-rates span{font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.2)}
.r1{color:#A9A9A9}.r2{color:#7B68EE}.r3{color:#FFD700}.r4{color:#FF69B4}.r5{color:#FF0000}
.sh-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer;
  transition:background .2s;border:1px solid transparent}
.sh-item:hover{background:rgba(255,213,79,.06);border-color:rgba(255,213,79,.15)}
.sh-item-icon{font-size:22px}
.sh-item-info{flex:1;min-width:0}
.sh-item-name{font-size:12px;font-weight:bold;color:var(--sand)}
.sh-item-desc{font-size:10px;color:var(--sd)}
.sh-item-cost{font-size:12px;color:var(--gld);font-family:monospace;white-space:nowrap}
.sh-stats{font-size:11px;color:var(--sd)}
.sh-stats strong{color:var(--sand)}

/* ===== ガチャ結果モーダル ===== */
.gacha-card{padding:20px;max-height:70vh;overflow-y:auto}
.gc-title{font-size:18px;font-weight:bold;color:var(--gld);text-align:center;margin-bottom:12px}
.gc-results{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px}
.gc-card{width:80px;padding:8px 4px;border-radius:8px;text-align:center;background:rgba(0,0,0,.2);
  border:2px solid rgba(141,110,99,.2);position:relative;transition:transform .3s}
.gc-card.r1{border-color:#80808040}.gc-card.r2{border-color:#7B68EE60}.gc-card.r3{border-color:#FFD70060;background:rgba(255,215,0,.05)}
.gc-card.r4{border-color:#FF69B480;background:rgba(255,105,180,.05);box-shadow:0 0 8px rgba(255,105,180,.15)}
.gc-card.r5{border-color:#FF000080;background:rgba(255,0,0,.05);box-shadow:0 0 12px rgba(255,0,0,.2);animation:gc-shine 1.5s infinite}
@keyframes gc-shine{0%,100%{box-shadow:0 0 8px rgba(255,0,0,.2)}50%{box-shadow:0 0 20px rgba(255,215,0,.4)}}
.gc-card.gc-new{animation:gc-pop .5s ease-out}
@keyframes gc-pop{0%{transform:scale(0.5);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.gc-stars{font-size:9px;color:inherit;margin-bottom:2px}
.gc-ant-icon{font-size:24px}
.gc-name{font-size:10px;color:var(--sand);margin-top:2px}
.gc-new-badge{position:absolute;top:-4px;right:-4px;background:#FF0000;color:#fff;font-size:8px;font-weight:bold;
  padding:1px 5px;border-radius:8px;animation:gc-pop .5s}
.gc-bonus{font-size:8px;color:var(--inc);margin-top:2px}
.gc-trait{font-size:8px;color:var(--sd);margin-top:1px}
.gc-close{margin-top:8px}

/* ===== 図鑑 ===== */
.zk-title{font-size:16px;font-weight:bold;color:var(--gld);margin-bottom:12px}
.zk-count{font-size:12px;color:var(--sd);font-weight:normal;margin-left:6px}
.zk-section{margin-bottom:12px}
.zk-rarity{font-size:12px;font-weight:bold;margin-bottom:6px;padding:4px 8px;border-radius:4px;
  background:rgba(0,0,0,.2);display:inline-block}
.zk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;margin-top:6px}
.zk-card{padding:8px 4px;border-radius:8px;text-align:center;border:1px solid rgba(141,110,99,.15);
  background:rgba(0,0,0,.1);transition:transform .2s}
.zk-card.owned:hover{transform:scale(1.05)}
.zk-card.locked{opacity:0.4}
.zk-card.r3.owned{border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.03)}
.zk-card.r4.owned{border-color:rgba(255,105,180,.3);background:rgba(255,105,180,.03)}
.zk-card.r5.owned{border-color:rgba(255,0,0,.3);background:rgba(255,0,0,.03);animation:gc-shine 2s infinite}
.zk-icon{font-size:22px}
.zk-icon.locked-icon{color:#555!important}
.zk-name{font-size:10px;color:var(--sand);margin-top:2px}
.zk-trait{font-size:8px;color:var(--sd);margin-top:1px}
.zk-bonus{font-size:8px;color:var(--inc);margin-top:2px}

/* アリモーダル追加 */
.am-species{text-align:center;margin:4px 0 8px}
.am-sp-name{font-size:12px;color:var(--sand);margin-right:6px}
.am-sp-stars{font-size:11px}
.am-sp-stars.r1{color:#A9A9A9}.am-sp-stars.r2{color:#7B68EE}.am-sp-stars.r3{color:#FFD700}
.am-sp-stars.r4{color:#FF69B4}.am-sp-stars.r5{color:#FF0000}
.am-evolved{font-size:10px;color:var(--gld);margin-left:6px}
.am-sp-bonus{font-size:10px;color:var(--inc);margin-top:2px}
.am-evolve-btn{display:block;width:100%;margin-top:10px;padding:10px;background:linear-gradient(135deg,#4B0082,#6A0DAD);
  color:#fff;border:1px solid rgba(255,105,180,.3);border-radius:8px;font-size:13px;font-weight:bold;cursor:pointer;
  transition:all .2s}
.am-evolve-btn:hover{box-shadow:0 0 12px rgba(106,13,173,.4);transform:scale(1.02)}

/* ===== ガチャモーダル追加 ===== */
.gacha-card{text-align:center;padding:20px}
.gacha-again{display:block;width:100%;margin-top:6px;padding:8px;background:transparent;
  border:1px solid rgba(255,213,79,.3);border-radius:8px;color:var(--gld);font-size:12px;cursor:pointer}
.gacha-again:hover{background:rgba(255,213,79,.08)}
.sh-gacha-desc{font-size:11px;color:var(--sd);margin-bottom:8px}
.sh-item.disabled{opacity:0.4;pointer-events:none}

/* ===== P4: HUD イベント＋称号 ===== */
.hud-event{display:block;font-size:10px;color:#FFD54F;background:rgba(255,213,79,.1);padding:2px 8px;border-radius:4px;
  text-align:center;animation:ev-pulse 2s infinite}
@keyframes ev-pulse{0%,100%{opacity:1}50%{opacity:.7}}
.hud-title{display:block;font-size:10px;color:#CE93D8;text-align:center;margin-top:2px}

/* ===== P4: 巣テーマ ===== */
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:6px}
.th-card{padding:8px 4px;border-radius:8px;text-align:center;border:2px solid rgba(141,110,99,.15);
  background:rgba(0,0,0,.1);cursor:pointer;transition:all .2s}
.th-card:hover{transform:scale(1.05);border-color:rgba(255,213,79,.3)}
.th-card.active{border-color:var(--gld);background:rgba(255,213,79,.08);box-shadow:0 0 8px rgba(255,193,7,.2)}
.th-icon{font-size:24px}
.th-name{font-size:10px;color:var(--sand);margin-top:2px}
.th-cost{font-size:9px;color:var(--sd);margin-top:2px}
.th-badge{font-size:9px;color:var(--gld);font-weight:bold;margin-top:2px}

/* ===== P4: 称号 ===== */
.tt-row{display:flex;align-items:center;gap:6px;padding:6px;border-radius:6px;border:1px solid transparent;
  transition:all .2s;opacity:.4}
.tt-row.owned{opacity:1;cursor:pointer}
.tt-row.owned:hover{background:rgba(206,147,216,.06);border-color:rgba(206,147,216,.15)}
.tt-row.active{background:rgba(206,147,216,.1);border-color:rgba(206,147,216,.3)}
.tt-icon{font-size:18px;flex-shrink:0}
.tt-info{flex:1;min-width:0}
.tt-name{font-size:12px;font-weight:bold;color:var(--sand)}
.tt-desc{font-size:10px;color:var(--sd)}
.tt-equip{font-size:9px;color:#CE93D8;padding:2px 8px;border:1px solid rgba(206,147,216,.3);
  border-radius:4px;white-space:nowrap}
.tt-equipped{font-size:9px;color:var(--gld);font-weight:bold;white-space:nowrap}

/* ===== P4: 季節イベント ===== */
.ev-banner{display:flex;align-items:center;gap:8px;padding:10px;border-radius:8px;
  border:2px solid rgba(255,213,79,.3);background:rgba(255,213,79,.06)}
.ev-banner.active{animation:ev-glow 2s infinite}
@keyframes ev-glow{0%,100%{box-shadow:0 0 4px rgba(255,213,79,.1)}50%{box-shadow:0 0 12px rgba(255,213,79,.3)}}
.ev-icon{font-size:24px}
.ev-info{flex:1}
.ev-name{font-size:13px;font-weight:bold;color:var(--gld)}
.ev-desc{font-size:10px;color:var(--sand)}
.ev-mult{font-size:16px;font-weight:bold;color:var(--inc);font-family:monospace}
.ev-none{font-size:11px;color:var(--sd);text-align:center;padding:8px}
.ev-schedule{margin-top:6px}
.ev-item{font-size:10px;color:var(--sd);padding:2px 0}

/* ===== P4: 長期コンテンツ ===== */
.lt-row{display:flex;align-items:center;gap:6px;padding:8px 4px;border-bottom:1px solid rgba(141,110,99,.08);
  opacity:.5}
.lt-row.unlocked{opacity:1;background:rgba(255,213,79,.04)}
.lt-icon{font-size:20px;flex-shrink:0}
.lt-info{flex:1;min-width:0}
.lt-name{font-size:12px;font-weight:bold;color:var(--sand)}
.lt-desc{font-size:10px;color:var(--sd)}
.lt-req{font-size:9px;color:var(--sd);opacity:.7;margin-top:2px}
.lt-years{font-size:10px;color:var(--sd);font-family:monospace;white-space:nowrap;opacity:.6}

/* ===== ソートバー ===== */
.sort-bar{display:flex;gap:4px;margin:6px 0 8px;flex-wrap:wrap}
.sort-btn{padding:3px 8px;font-size:10px;border:1px solid rgba(141,110,99,.2);border-radius:4px;
  background:rgba(0,0,0,.15);color:var(--sd);cursor:pointer;transition:all .15s;white-space:nowrap}
.sort-btn:hover{border-color:rgba(255,213,79,.3);color:var(--sand)}
.sort-btn.active{background:rgba(255,213,79,.12);border-color:var(--gld);color:var(--gld);font-weight:bold}