/* 正式マナPNG接続 + 右利き向け所持マナ右寄せ */
.mana-row-stack{
  padding-right:2px;
  flex-direction:row-reverse;
  justify-content:flex-start;
}
.mana-row-stack>.mana-card:first-child{
  margin-left:0;
}

/* 正式素材は108x108pxなので、表示も正方形を維持する */
.mana-card{
  height:56px;
}
.mini-mana{
  width:58px;
  height:58px;
}
.mini-mana[data-set-card="0"]{
  left:10px;
  top:40px;
}
.mini-mana[data-set-card="1"]{
  left:47px;
  top:12px;
}

.mana-card.mana-png,
.mini-mana.mana-png,
.flying-front.mana-png{
  background-image:var(--mana-png)!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-color:transparent!important;
  border-color:transparent!important;
}

/* 数字・属性表記はPNG内に含まれるためCSS文字を二重表示しない */
.mana-card.mana-png .mana-value,
.mini-mana.mana-png>span,
.mini-mana.mana-png>small,
.flying-front.mana-png>span,
.flying-front.mana-png>small{
  visibility:hidden;
}

/* クエスト選択中は光枠だけを残し、他カードを抑える */
.quest-selected-badge{
  display:none!important;
}
#quest-grid:has(.quest-slot.selected) .quest-slot:not(.selected) .quest-card{
  filter:grayscale(.72) brightness(.64);
  opacity:.78;
}

/* 納品確定後は達成演出の直前から操作ボタンを隠す */
.quest-slot.delivery-resolving .quest-controls{
  visibility:hidden!important;
}

/* 達成カードを少し下げ、PERFECT表示との重なりを避ける */
.quest-complete-card{
  transform:translateY(26px);
}

/* 達成演出は所持マナより必ず前面へ */
.effect-layer{
  z-index:1200!important;
}

/* クエスト左上の得点数字を約35%拡大 */
.quest-score{
  min-width:30px;
  height:30px;
  font-size:19px;
}
.quest-complete-card .quest-score{
  min-width:30px;
  height:30px;
  font-size:19px;
}

/* ===== BlAl 茶・焦げ茶・金テーマ ===== */
:root{
  --bg:#1b110c;
  --panel:#352419;
  --panel2:#463225;
  --ink:#fff7e8;
  --muted:#d7c3a6;
  --line:#715238;
  --gold:#e7c56f;
}
html,body{
  background:#120b08;
  color:var(--ink);
}
.app-shell{
  background:linear-gradient(#3b291d,#21150f);
  border-left-color:#65482f;
  border-right-color:#65482f;
}
.start-screen{
  background:radial-gradient(circle at 50% 24%,#6b4a31 0,#3e2b1e 45%,#20140e 100%);
}
.tagline,.best-summary{
  color:#e0cfb6;
}
.top-header{
  border-bottom-color:#6d4e35;
}
.icon-button{
  background:#4a3425;
  border-color:#806047;
  color:#fff7e8;
}
.status-header{
  background:#38271c;
  border-color:#684a32;
}
.status-item .label{
  color:#bfa98b;
}
.status-item.score{
  color:#ffe08a;
}
.secondary{
  background:#513929;
  border-color:#806047;
  color:#fff8eb;
}
.public-set{
  background:#493326;
  border-color:#79583d;
}
.public-set::after{
  color:#c7ad88;
}
.deck-control{
  background:#3f2c20;
  border-color:#76543a;
}
.deck-stack i{
  border-color:#d9bd82;
  background:linear-gradient(145deg,#62462f,#302016);
}
.deck-count-line{
  background:#2b1d15ee;
}
.quest-guide{
  border-color:#e0bd62;
  background:linear-gradient(145deg,#2b1d15f5,#4a3425f5);
}
.quest-guide-kind{
  color:#f2cf73;
}
.quest-guide-main,.quest-guide-sub{
  color:#fff6e7;
}
.mana-row{
  background:linear-gradient(90deg,rgba(255,238,211,.065),rgba(72,45,27,.08));
}
.mana-total-inline{
  background:#36251b;
  border-color:#694c35;
}
.modal{
  background:#342419;
  border-color:#76573d;
  color:#fff7e8;
}
.modal::backdrop{
  background:#100906d9;
}
.modal h2{
  color:#f1cd70;
}
.dialog-close{
  background:#543b2b;
  color:#fff7e8;
}
.count-summary,
.count-color,
.count-cell,
.result-row{
  background:#493326;
}
.count-summary{
  color:#eadbc5;
}
.count-head{
  color:#c4ae91;
}
.count-head strong{
  color:#eee0cc;
}
.count-cell.zero{
  color:#8e765d;
}
.message{
  color:#ffe0a0;
}
.flying-back{
  background:linear-gradient(145deg,#60452f,#2d1e15);
  box-shadow:inset 0 0 0 3px #412d20;
}
.flying-back::after{
  color:#e7c56f;
}

/* ===== 遊び方：明るい羊皮紙調 ===== */
.rule-dialog{
  width:min(94vw,460px);
  background:#f4e8ca;
  border-color:#9b7547;
  color:#3a2719;
  box-shadow:0 18px 60px #0009, inset 0 0 0 2px #fff8e7;
}
.rule-dialog h2{
  color:#6a431f;
  text-shadow:none;
}
.rule-dialog .dialog-close{
  background:#7a5635;
  border:1px solid #5b3d25;
  color:#fff9ed;
}
.rule-dialog .rule-body{
  max-height:64dvh;
  padding:2px 8px 4px 2px;
  color:#3a2719;
}
.rule-dialog .manual-section{
  padding:4px 2px 14px;
  margin:0 0 12px;
  border-bottom:1px solid #c9ad7b;
}
.rule-dialog .manual-section:last-child{
  border-bottom:0;
  margin-bottom:0;
}
.rule-dialog .manual-section h3{
  margin:0 0 7px;
  color:#724820;
  font-size:18px;
  line-height:1.25;
}
.rule-dialog .manual-section p{
  margin:7px 0;
  line-height:1.65;
}
.rule-dialog .manual-section ul{
  margin:7px 0 9px;
  padding-left:1.4em;
  line-height:1.7;
}
.rule-dialog .manual-section strong{
  color:#5a3518;
}
.rule-dialog .manual-example{
  margin:9px 0;
  padding:9px 11px;
  border:1px solid #c49b62;
  border-radius:8px;
  background:#fff6df;
  color:#452c1b;
  line-height:1.55;
}
.rule-dialog>.primary,
.rule-dialog form>.primary{
  color:#2b2111;
}

/* ===== スマホ仕上げ：1画面に4クエスト + 上部を1段化 ===== */
.game-screen{
  grid-template-rows:0 auto auto 102px minmax(0,1fr) auto;
  gap:4px;
}
.top-header{
  position:relative;
  height:0;
  min-height:0;
  padding:0;
  border:0;
  overflow:visible;
}
.title-text{
  display:none!important;
}
.header-actions{
  position:absolute;
  top:7px;
  right:4px;
  z-index:60;
  gap:4px;
}
.icon-button{
  width:32px;
  height:32px;
  font-size:16px;
}
.icon-button:last-child{
  font-size:18px;
}
.status-header{
  min-height:40px;
  padding:3px 76px 3px 7px;
  grid-template-columns:1.05fr .9fr 1fr;
  gap:3px;
}
.status-item.score{
  text-align:center;
}

/* クエストは横スクロールではなく4枚を常時表示 */
.quest-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  min-height:0;
  overflow:visible;
  padding:1px 0 2px;
}
.quest-slot{
  flex:none;
  width:auto;
  min-width:0;
  gap:2px;
}
.quest-meta{
  gap:3px;
  min-height:102px;
}
.quest-reqs{
  gap:2px;
  min-height:34px;
  padding:1px 0;
  font-size:14px;
  line-height:1.05;
}
.quest-turn{
  min-height:22px;
  font-size:0;
  line-height:1;
}
.quest-turn::before{
  content:"あと ";
  font-size:16px;
  font-weight:800;
}
.quest-turn::after{
  content:" T";
  font-size:16px;
  font-weight:800;
}
.quest-turn strong{
  font-size:18px;
}
.quest-controls{
  height:40px;
  min-height:40px;
  margin-top:0;
}
.quest-controls button{
  min-width:44px;
  min-height:38px;
  padding:6px;
  font-size:13px;
}

/* 公開セット・山札を詰め、所持マナに縦幅を返す */
.draw-zone{
  grid-template-columns:minmax(0,1fr) 82px;
  gap:5px;
}
.public-sets{
  gap:5px;
}
.public-set{
  height:102px;
  padding:3px;
}
.deck-panel{
  grid-template-rows:58px 39px;
  gap:5px;
}
.deck-control{
  height:58px;
}
.deck-stack{
  top:3px;
  width:30px;
  height:37px;
}
.deck-control strong{
  font-size:16px;
}
.count-near-deck{
  min-height:39px;
  padding:6px 5px;
}

/* PERFECTは背景に負けないよう、濃い影を強める */
.perfect-label{
  text-shadow:
    0 2px 0 #2b160a,
    0 0 3px #000,
    0 0 7px #000,
    2px 2px 2px #000,
    -2px 2px 2px #000,
    2px -2px 2px #000,
    -2px -2px 2px #000,
    0 5px 10px #000d!important;
}

/* 納品ボタン領域は常時確保しつつ、少し薄くして画面を詰める */
.quest-meta{
  gap:2px;
  min-height:94px;
}
.quest-controls,
.quest-controls.empty{
  height:34px;
  min-height:34px;
  margin-top:0;
  overflow:visible;
}
.quest-controls.empty{
  visibility:hidden;
}
.quest-controls button{
  min-height:38px;
}