/* かいとり屋(仮) 骨組み試作 v2
   店内(Canvas 320x180)を補間なしで拡大し、その上に DOM の文字とボタンを重ねる。
   素材・画像・音は未使用。色は後工程のドット絵を見越して低彩度・暖色の灯りで置く。 */

:root{
  --s: 2;                                   /* 拡大率(JSが更新する) */
  --fs: max(14px, calc(6.5px * var(--s)));  /* DOM文字は最小14px */
  --fs-s: max(14px, calc(5.8px * var(--s)));
  --accent:#d8a45c;                         /* アクセント1色(灯りの暖色) */
  --ink:#e8e2d6;
  --sub:#a49b8c;
  --panel:#221d26;
  --panel2:#2c2632;
  --line:#4a4152;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{
  width:100%; height:100%; background:#000; color:var(--ink); overflow:hidden;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  -webkit-text-size-adjust:100%; user-select:none;
}

/* ---- 横持ち固定。縦向きは 90度回転して横画面として使う ---- */
#rot{ position:fixed; left:0; top:0; width:100%; height:100%; }
#rot.portrait{
  left:100vw; top:0; width:100vh; height:100vw;
  transform-origin:0 0; transform:rotate(90deg);
}

/* ---- 画面(拡大後のキャンバスと同じ大きさ。JSが位置と寸法を決める) ---- */
#stage{ position:absolute; left:0; top:0; overflow:hidden; }
#cv{
  position:absolute; left:0; top:0; display:block;
  image-rendering:crisp-edges; image-rendering:pixelated;   /* 補間なしで拡大する */
  touch-action:none;
}
#labels,#acts{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }

/* ---- マップ上の文字 ---- */
.lb{
  position:absolute; left:0; top:0; white-space:nowrap; line-height:1;
  font-size:var(--fs-s); text-shadow:0 0 3px #000, 0 1px 2px #000, 0 0 6px #000;
}
.lb.objlb{ color:#f0e6d2; opacity:.92; font-weight:bold; }
.lb.actlb{ color:#dfe6ef; opacity:.9; }
.lb.actlb.me{ color:#ffe6ac; font-weight:bold; }
.lb.float{ color:var(--accent); font-weight:bold; font-size:var(--fs); }
/* 営業中の札(ドアの上)。常設ではなく営業フェーズ中だけ出る */
.lb.sign{ color:#2a2118; background:var(--accent); border:1px solid #7a5a2c; border-radius:2px;
          padding:1px 5px; font-weight:bold; text-shadow:none; }
/* 見回り済みのチェックマーク(緑塗りの代わり) */
.lb.check{ color:#8fe0a8; font-size:calc(var(--fs) * 1.2); font-weight:bold;
           text-shadow:0 0 3px #000, 0 1px 2px #000; }
/* いま調べるべき対象に出す「!」 */
.lb.bang{ color:#ffd97a; font-size:calc(var(--fs) * 1.5); font-weight:bold;
          text-shadow:0 0 4px #000, 0 2px 3px #000; }

/* ---- 「調べる」ボタン(対象の上に出る) ---- */
.exam{
  position:absolute; transform:translate(-50%,-100%); pointer-events:auto;
  min-height:44px; min-width:88px; padding:0 14px;
  font-size:var(--fs); font-weight:bold; color:#2a2118;
  background:var(--accent); border:2px solid #7a5a2c; border-radius:4px;
}

/* ---- 左上の所持金(常設UIの2点目) ---- */
#money{
  position:absolute; left:8px; top:8px; padding:4px 10px;
  font-size:var(--fs); line-height:1.2; font-weight:bold; color:var(--accent);
  background:rgba(28,24,34,.82); border:2px solid var(--line); border-radius:4px;
  pointer-events:none; white-space:nowrap;
}
#money.bump{ animation:moneyBump .45s ease-out; }
@keyframes moneyBump{ 0%{ transform:scale(1.18); color:#fff6df; } 100%{ transform:scale(1); } }

/* ---- 常設UIはメニューボタンと所持金の2点 ---- */
#menu-btn{
  position:absolute; right:8px; top:8px; width:44px; height:44px;
  font-size:22px; line-height:1; color:var(--ink);
  background:rgba(28,24,34,.82); border:2px solid var(--line); border-radius:4px;
}

/* 自由移動の切り替え。通常は「!」の間だけを行き来する */
#free-btn{
  /* 押せる場所は 44x44px 以上。30px だと指で押しにくい */
  position:absolute; right:8px; top:58px; min-width:44px; min-height:44px;
  padding:0 10px; font-size:max(11px, calc(4.2px * var(--s))); line-height:1.1;
  color:var(--ink); background:rgba(28,24,34,.82);
  border:2px solid var(--line); border-radius:4px; white-space:nowrap;
}
#free-btn.on{ color:#1b1622; background:#ffd98a; border-color:#ffd98a; }

/* 認知度・信用度。常に出す */
#gauges{
  /* 所持金の箱のすぐ下。所持金は文字寸法で伸び縮みするので、固定の36pxだと
     画面が大きいときに桁の多い金額へ重なる。箱の高さを計算して避ける。
     8(上端) + 4+4(内側の余白) + 2+2(枠) + 文字の高さ(行送り1.2) + 6(すきま) */
  position:absolute; left:8px; top:calc(26px + var(--fs) * 1.2);
  display:flex; flex-direction:column; gap:3px;
  pointer-events:none;
}
#gauges[hidden]{ display:none; }   /* display:flex は [hidden] より強いので明示して消す */
#gauges .gg{ display:flex; align-items:center; gap:4px;
  font-size:max(9px, calc(3.6px * var(--s))); color:var(--ink);
  background:rgba(28,24,34,.82); border:1px solid var(--line); border-radius:3px; padding:1px 5px; }
#gauges .gl{ opacity:.85; }
#gauges .gb{ display:inline-block; width:calc(13px * var(--s)); height:calc(2.4px * var(--s));
  background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden; }
#gauges .gb i{ display:block; height:100%; background:var(--accent); }
#gauges .gv{ min-width:2.2em; text-align:right; opacity:.9; }

/* 人物の頭の上の吹き出し */
.lb.bubble{
  background:rgba(250,246,236,.95); color:#221c2a;
  border:1px solid #8c7a5c; border-radius:5px; padding:2px 6px;
  font-size:max(9px, calc(3.6px * var(--s))); white-space:nowrap;
  transform:translate(-50%,-100%);
}

/* 仕入れ市 */
#full .mk{ width:min(100%, calc(180px * var(--s))); display:flex; flex-direction:column;
  max-height:88%; }
#full .mk h2{ margin:0 0 2px; font-size:max(12px, calc(5px * var(--s))); border:none; padding:0; }
#full .mk p.sub{ margin:1px 0; font-size:max(9px, calc(3.4px * var(--s))); }
#full .mk-list{ display:flex; flex-direction:column; gap:3px; margin:5px 0;
  overflow-y:auto; flex:1 1 auto; min-height:0; }
#full .mk-row{ display:flex; align-items:center; gap:6px; flex:0 0 auto;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:3px; padding:2px 6px; }
#full .mk-name{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; font-size:max(10px, calc(4px * var(--s))); }
#full .mk-sub{ flex:0 0 auto; opacity:.75; font-size:max(9px, calc(3.4px * var(--s))); }
#full .mk-row button{ flex:0 0 auto; white-space:nowrap; width:auto; margin:0;
  padding:2px 8px; font-size:max(10px, calc(3.8px * var(--s))); }
#full .mk > button{ flex:0 0 auto; margin-top:4px; }

/* ---- 一時的な帯(フェーズの切り替わりを知らせる。常設ではない) ---- */
#banner{
  position:absolute; left:50%; top:10px; transform:translateX(-50%);
  padding:6px 14px; font-size:var(--fs); white-space:nowrap;
  background:rgba(20,17,25,.85); border:1px solid var(--line); border-radius:3px;
  pointer-events:none;
}

/* ---- 右下のビルド刻印。検品でいま見ているのが最新かを確かめるための目印 ---- */
#build{
  position:absolute; right:6px; bottom:5px; z-index:5;
  font-size:max(11px, calc(4.5px * var(--s))); line-height:1.2; letter-spacing:.02em;
  color:rgba(232,226,214,.55); text-shadow:0 1px 2px #000, 0 0 4px #000;
  pointer-events:none; white-space:nowrap;
}

/* ============================================================
   重ねウィンドウ
   ============================================================ */
#win-layer{ position:absolute; left:0; top:0; width:100%; height:100%;
            background:rgba(8,6,10,.62); display:flex; align-items:center; justify-content:center; }
#win-layer[hidden]{ display:none; }
.win{
  width:88%; max-width:calc(230px * var(--s)); max-height:94%; overflow-y:auto;
  padding:calc(3.5px * var(--s)); font-size:var(--fs); line-height:1.45;
  background:var(--panel); border:2px solid var(--line); border-radius:5px;
  box-shadow:0 6px 20px rgba(0,0,0,.6);
}
/* 横持ちは縦が狭い。情報(左)と操作(右)を2カラムに分けて縦を使い切らない */
.win.split{ width:94%; max-width:calc(300px * var(--s)); }
.win.wide { width:96%; max-width:calc(310px * var(--s)); }
.win.narrow{ width:70%; max-width:calc(150px * var(--s)); }
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:calc(3px * var(--s)); align-items:start; }
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:calc(3px * var(--s)); align-items:start; }
.win h2{ font-size:var(--fs); margin-bottom:5px; border-bottom:2px solid var(--line); padding-bottom:4px; }
.win h2 .sub{ font-weight:normal; }
.sub{ color:var(--sub); font-size:var(--fs-s); }
.center{ text-align:center; }
.accent{ color:var(--accent); }
.big{ font-size:calc(var(--fs) * 1.25); font-weight:bold; }
.small-note{ margin-top:10px; }

.card{ background:var(--panel2); border:1px solid var(--line); border-radius:4px; padding:5px 7px; margin:0 0 5px; }
.card.cursed{ border-color:#a2585a; }
.kv{ display:flex; justify-content:space-between; gap:8px; padding:1px 0; }
.kv .k{ color:var(--sub); font-size:var(--fs-s); }
.kv .v{ font-weight:bold; text-align:right; }
.tag{ display:inline-block; margin-left:6px; padding:0 5px; font-size:var(--fs-s); font-weight:normal;
      color:#e8b9ba; border:1px solid #a2585a; border-radius:3px; }

.win button, #full button{
  display:block; width:100%; min-height:44px; margin:5px 0; padding:0 8px;
  font-size:var(--fs); color:var(--ink); background:var(--panel2);
  border:2px solid var(--line); border-radius:4px; cursor:pointer;
}
.win button.primary, #full button.primary{ background:var(--accent); color:#2a2118; border-color:#7a5a2c; font-weight:bold; }
.win button:disabled, #full button:disabled{ opacity:.4; cursor:default; }
.btn-note{ margin:-2px 0 6px; color:var(--accent); font-size:var(--fs-s); }
.row{ display:flex; gap:8px; }
.row button{ flex:1; }

/* 値付け */
.price-now{ text-align:center; font-size:calc(var(--fs) * 1.6); font-weight:bold; margin-top:6px; }
.price-pct{ text-align:center; color:var(--accent); font-size:var(--fs-s); margin-bottom:4px; }
input[type=range]{ width:100%; height:44px; accent-color:var(--accent); }

/* 接写(什器・箱の中身) */
/* 接写: 什器は4枠を1行、箱は5枠を1行。縦に積むと横持ちでは入りきらない */
/* 枠に商品の絵が入るので、1枠の幅に下限と上限を決めて折り返す。
   4枠・5枠を必ず横1列に並べると、狭い画面で絵が64pxを割り、品名も縦に割れる。
   上限を決めておかないと、広い画面で1枠が間延びする。 */
.cells{ display:grid; grid-template-columns:repeat(auto-fit, minmax(112px, 150px));
        justify-content:center; gap:8px; margin:5px 0; }
.cells.c5{ grid-template-columns:repeat(auto-fit, minmax(112px, 150px)); }
.cell{ position:relative; padding:5px 6px;
       background:var(--panel2); border:1px solid var(--line); border-radius:4px; }
.cell.empty{ color:var(--sub); text-align:center; border-style:dashed; }
/* 窓の中身が長くなっても「閉じる」は常に見えるようにする。
   狭い画面では枠が縦に足りず、下までスクロールしないと閉じられなくなる。 */
.foot{ display:flex; align-items:center; gap:10px;
       position:sticky; bottom:calc(-3.5px * var(--s));
       padding:4px 0; background:var(--panel); }
.foot span{ flex:1; }
.foot button{ flex:0 0 30%; margin:0; }
.cell.cursed{ border-color:#a2585a; }
.cell{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.cell .no{ display:block; color:var(--sub); font-size:var(--fs-s); align-self:flex-start; }
.cell .nm{ display:block; font-weight:bold; text-align:center; overflow-wrap:anywhere;
           font-size:var(--fs-s); line-height:1.25; }
.cell .pr{ display:block; color:var(--accent); font-size:var(--fs-s); }
.cell .tg{ display:block; color:#e8b9ba; font-size:var(--fs-s); }
/* 由来とは関係のない補足。曰くつきの色を使わない */
.cell .tg.plain{ color:var(--sub); font-size:max(10px, calc(3.4px * var(--s))); }
.cell button.mv{ margin:4px 0 0; min-height:44px; min-width:44px; width:100%;
                 padding:0 2px; font-size:var(--fs-s);
                 margin-top:auto; }   /* 品名が2行になった枠でもボタンの高さをそろえる */

/* 帳簿・メニューの行 */
.lr{ display:flex; justify-content:space-between; align-items:baseline; gap:8px;
     padding:3px 0; border-bottom:1px dotted var(--line); }
.lr.total{ border-bottom:2px solid var(--line); font-weight:bold; }
.notice{ margin:5px 0; padding:5px 7px; font-size:var(--fs-s);
         border:1px solid var(--accent); border-radius:4px; color:var(--accent); }

/* 遊び方 */
#full .howto{ align-self:center; }
.howto-h{ font-size:calc(var(--fs) * 1.3); margin-bottom:6px; border:none; padding:0; }
.howto-p{ font-size:var(--fs); margin:4px 0; }
.howto-n{ font-size:var(--fs); margin:8px 0 2px; font-weight:bold; }
.howto-s{ font-size:var(--fs-s); color:var(--sub); margin:0 0 0 1.2em; }

/* 店主選択 */
.owners{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(4px * var(--s)); margin-top:8px; }
#full .owners button.owner{ width:100%; min-height:auto; padding:8px 6px; margin:0; display:flex;
                            flex-direction:column; align-items:center; gap:6px; }
.owners img{ width:calc(48px * var(--s)); height:calc(48px * var(--s));
             image-rendering:crisp-edges; image-rendering:pixelated; }
.owners span{ font-size:var(--fs); }

/* ============================================================
   全画面(タイトル / リザルト / デバッグ)
   ============================================================ */
#full{ position:absolute; left:0; top:0; width:100%; height:100%;
       background:#141119; overflow-y:auto; display:flex; align-items:center; justify-content:center; }
/* タイトルはキャンバスの背景を流して見せるので、覆いを外す */
#full[data-kind="title"]{ background:transparent; align-items:flex-end; }
#full .pane.title{ padding-bottom:calc(6px * var(--s)); }
#full .pane.title .sub{ text-shadow:0 1px 3px #000, 0 0 6px #000; }
#full[hidden]{ display:none; }
#full .pane{ width:90%; max-width:calc(260px * var(--s)); padding:calc(4px * var(--s)) 0; font-size:var(--fs); }
#full .pane.wide{ width:96%; max-width:calc(310px * var(--s)); align-self:flex-start; }
#full .pane .row button{ margin-top:10px; }
#full h1{ text-align:center; font-size:calc(var(--fs) * 1.8); margin-bottom:4px; }
#full h1 .sub{ font-size:calc(var(--fs) * 0.9); }
#full h2{ font-size:calc(var(--fs) * 1.2); margin-bottom:6px; border-bottom:2px solid var(--line); padding-bottom:5px; }
#full h3{ font-size:var(--fs-s); color:var(--sub); margin:8px 0 3px; }
.fld{ display:flex; gap:6px; align-items:center; }
.fld label{ flex:0 0 40%; font-size:var(--fs-s); color:var(--sub); }
.fld input{ flex:1; min-width:0; min-height:44px; padding:0 8px; font-size:var(--fs);
            color:var(--ink); background:var(--panel2); border:2px solid var(--line); border-radius:4px; }
.fld button{ flex:0 0 30%; }
.plan{ font-size:var(--fs-s); }
.plan table{ width:100%; border-collapse:collapse; margin:4px 0; }
.plan th,.plan td{ border:1px solid var(--line); padding:2px 4px; text-align:right; }
.plan th{ color:var(--sub); }

/* ============================================================
   仕入れ市(v4.2 で全面的に作り直し)
   売り場の背景・店主・商品カードを重ねた1枚の場面にする。
   色は既存の黄土色・木・紙・金属に合わせる。発光やネオンは使わない。
   ============================================================ */
#full .mkt{
  position:absolute; inset:0; width:100%; height:100%;
  display:grid; grid-template-rows:auto 1fr auto;
  overflow:hidden; color:var(--ink);
  --mk-line:#6b5a42; --mk-paper:rgba(30,25,20,.80); --mk-sel:#ffd98a;
}
#full .mkt-bg{
  position:absolute; inset:0; z-index:0;
  background:var(--mk-bg) center/cover no-repeat #1a140e;
}
#full .mkt-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,15,10,.62) 0%, rgba(20,15,10,.10) 26%,
                                     rgba(20,15,10,.14) 60%, rgba(20,15,10,.72) 100%);
}
/* 背景より前に出す。position は各要素の指定を殺さないよう、ここでは触らない */
#full .mkt > .mkt-top,
#full .mkt > .mkt-shop,
#full .mkt > .mkt-foot{ position:relative; }
#full .mkt > *:not(.mkt-bg){ z-index:1; }

/* ---- 上部 ---- */
#full .mkt-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:6px 10px;
  padding:calc(2px * var(--s)) calc(4px * var(--s)) 0;
}
#full .mkt-ttl{ max-width:52%; }
#full .mkt-ttl h2{
  margin:0; border:none; padding:0; letter-spacing:.04em;
  font-size:max(15px, calc(6px * var(--s)));
}
#full .mkt-day{ font-size:max(11px, calc(4px * var(--s))); opacity:.85; margin-left:.4em; }
#full .mkt-sub{ margin:1px 0 0; font-size:max(10px, calc(3.4px * var(--s))); opacity:.8; }
#full .mkt-stat{ display:flex; gap:calc(2.5px * var(--s)); margin:0; }
#full .mkt-stat > div{
  background:var(--mk-paper); border:1px solid var(--mk-line); border-radius:3px;
  padding:calc(.8px * var(--s)) calc(2.2px * var(--s)); text-align:right; min-width:5.5em;
}
#full .mkt-stat dt{ font-size:max(9px, calc(3px * var(--s))); opacity:.85; }
#full .mkt-stat dd{ margin:0; font-size:max(12px, calc(4.4px * var(--s))); font-weight:bold; color:var(--accent); }

/* ---- 中央左: 店主と吹き出し ---- */
#full .mkt-keeper{
  position:absolute; left:3%; bottom:16%;
  width:22%; min-width:120px; max-width:30%; z-index:2; pointer-events:none;
}
#full .mkt-kimg{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 calc(.6px * var(--s)) calc(1.2px * var(--s)) rgba(0,0,0,.55));
  transform-origin:50% 100%;
  animation:mkBreath 5.2s ease-in-out infinite;
}
@keyframes mkBreath{
  0%,100%{ transform:translateY(0) scaleY(1); }
  50%    { transform:translateY(calc(-.35px * var(--s))) scaleY(1.006); }
}
#full .mkt-kimg.nod{ animation:mkBreath 5.2s ease-in-out infinite, mkNod .5s ease-out 1; }
@keyframes mkNod{ 0%{transform:translateY(0)} 40%{transform:translateY(calc(1.4px * var(--s)))} 100%{transform:translateY(0)} }
#full .mkt-say{ pointer-events:none;
  position:absolute; left:0; bottom:92%; margin:0;
  display:inline-block; width:max-content; max-width:165%;
  background:rgba(250,246,236,.96); color:#221c2a;
  border:1px solid #8c7a5c; border-radius:6px;
  padding:calc(1px * var(--s)) calc(2.4px * var(--s));
  font-size:max(10px, calc(3.6px * var(--s))); line-height:1.35;
}
#full .mkt-say.pop{ animation:mkPop .22s ease-out 1; }
@keyframes mkPop{ 0%{ transform:translateY(3px); opacity:.2; } 100%{ transform:none; opacity:1; } }

/* ---- 売り場: 商品カード ---- */
#full .mkt-shop{
  /* 行の高さいっぱいに広げてから、入りきらないぶんだけ中でスクロールさせる。
     中央そろえのままだと、品が上下にはみ出して上の帯と重なる。 */
  align-self:stretch; justify-self:end;
  width:62%;
  margin-right:10%;
  /* 商品の絵が64px以上あるので、列を固定数にすると狭い画面で桁あふれする。
     入る数だけ並べて、足りなければ折り返す。 */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(88px, 1fr));
  align-content:center; align-items:start;      /* 行を引き伸ばさない */
  gap:calc(2.2px * var(--s));
  max-height:100%; overflow:auto; padding:calc(1px * var(--s));
}
#full .mk-card{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:calc(.6px * var(--s));
  min-width:44px; min-height:44px; width:auto; margin:0;
  padding:calc(1.2px * var(--s)) calc(.8px * var(--s)) calc(1px * var(--s));
  background:rgba(38,30,22,.74); border:2px solid var(--mk-line); border-radius:5px;
  color:var(--ink); cursor:pointer;
  transition:transform .16s ease-out, border-color .16s ease-out, background .16s ease-out;
  animation:mkIn .28s ease-out both; animation-delay:calc(var(--i, 0) * .05s);
}
@keyframes mkIn{ from{ opacity:0; transform:translateY(calc(1.4px * var(--s))); } to{ opacity:1; transform:none; } }
#full .mk-card:hover{ border-color:#a08a63; }
#full .mk-card:focus-visible{ outline:3px solid #ffe6a8; outline-offset:2px; }
#full .mk-card.is-sel{
  border-color:var(--mk-sel); background:rgba(70,54,32,.88);
  transform:translateY(-5px);
  box-shadow:0 calc(1px * var(--s)) calc(1.6px * var(--s)) rgba(0,0,0,.5);
}
/* 商品の絵は、どの画面でも同じ大きさの決まり(.gfig)に従わせる。
   ここで別の高さを決めると、狭い画面で64pxを割ってしまう。 */
#full .mk-shot{ display:flex; justify-content:center; width:100%; }
#full .mk-cap{ display:flex; flex-direction:column; align-items:center; line-height:1.2; width:100%; }
#full .mk-nm{
  font-size:max(10px, calc(3.4px * var(--s))); text-align:center;
  width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#full .mk-pr{ font-size:max(11px, calc(3.8px * var(--s))); font-weight:bold; color:var(--accent); }
/* 相場のタグは品名と同じ行に置かない。長い品名で行があふれる */
#full .mk-tg{ display:block; line-height:1.2; }
#full .mk-tg .trd{ margin-left:0; }
/* 今週の相場のひとこと。売り場の上の帯に、横いっぱいで1行ずつ収める。
   幅の狭い列に押し込むと、文字が縦に割れて読めなくなる。 */
/* 今週のひとこと。売り場の上の帯で、横いっぱいに1〜2行で収める。
   狭い列に押し込むと3行になって、下の売り場を押しつぶしてしまう。 */
#full .mkt-trd{ flex:1 0 100%; order:3; margin:1px 0 0;
  display:flex; flex-wrap:wrap; gap:0 14px; }
#full .mkt-trd p{
  margin:0; font-size:max(10px, calc(3.4px * var(--s))); color:#e6dcc8;
  white-space:nowrap;
}
#full .mk-card.is-sold{ opacity:.5; cursor:default; }
#full .mk-card.is-sold .mk-shot img{ filter:grayscale(.7); }
#full .mk-done{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) rotate(-8deg);
  background:rgba(30,24,18,.92); border:1px solid #a08a63; border-radius:3px;
  padding:1px 6px; font-size:max(10px, calc(3.4px * var(--s))); white-space:nowrap;
}
#full .mk-card.is-fly{
  animation:mkFly .42s ease-in forwards; z-index:5; pointer-events:none;
}
@keyframes mkFly{
  to{ transform:translate(var(--fx,0), var(--fy,0)) scale(.22); opacity:0; }
}

/* ---- 仕入れかご ---- */
#full .mkt-basket{
  position:absolute; right:2.5%; top:50%; left:auto; bottom:auto;
  width:6.5%; aspect-ratio:1/1; height:auto; z-index:3;
  border:2px dashed var(--mk-line); border-radius:4px; background:rgba(30,24,18,.55);
}
#full .mkt-basket::after{
  content:"かご"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:max(9px, calc(3px * var(--s))); opacity:.75;
}
#full .mkt-basket.got{ animation:mkGot .34s ease-out 1; }
@keyframes mkGot{ 0%{ transform:scale(1); } 45%{ transform:scale(1.16); border-color:var(--mk-sel); } 100%{ transform:scale(1); } }

/* ---- 下部: 選択中の品と操作 ---- */
#full .mkt-foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:calc(3px * var(--s));
  padding:0 calc(4px * var(--s)) calc(2px * var(--s)); margin-left:28%;
}
#full .mkt-pick{ flex:1 1 auto; min-width:0; }
#full .mkt-hint{ margin:0; font-size:max(10px, calc(3.4px * var(--s))); opacity:.8; }
#full .mkt-pk{ display:flex; align-items:center; gap:calc(2px * var(--s)); }
#full .mkt-pk-img{ display:flex; flex:0 0 auto; }
#full .mkt-pk-txt{ min-width:0; }
#full .mkt-pk-nm{ margin:0; font-size:max(12px, calc(4.4px * var(--s))); font-weight:bold; }
#full .mkt-pk-kv{ margin:2px 0 0; font-size:max(10px, calc(3.4px * var(--s))); }
#full .mkt-pk-kv span{ opacity:.85; margin-right:.35em; }
#full .mkt-pk-kv b{ margin-right:1em; }
#full .mkt-pk-kv b.accent{ color:var(--accent); }
#full .mkt-pk-no{
  margin:calc(1px * var(--s)) 0 0; font-size:max(10px, calc(3.4px * var(--s)));
  color:#ffcaa4;
}
#full .mkt-buy{
  margin:calc(1px * var(--s)) 0 0; width:auto; padding:calc(1.2px * var(--s)) calc(4px * var(--s));
  font-size:max(12px, calc(4.2px * var(--s)));
}
#full .mkt-exit{
  flex:0 0 auto; width:auto; margin:0;
  padding:calc(.9px * var(--s)) calc(3px * var(--s));
  font-size:max(10px, calc(3.4px * var(--s)));
  background:rgba(38,30,22,.82); color:var(--ink); border:1px solid var(--mk-line);
}

/* ---- 画面が狭いとき(縦持ちなど) ---- */
@media (max-aspect-ratio:1/1){
  #full .mkt-shop{ width:min(94%, calc(150px * var(--s)));
    justify-self:center; margin-right:0; }
  #full .mkt-keeper{ width:34%; min-width:96px; bottom:30%; }
  #full .mkt-foot{ margin-left:0; flex-direction:column; align-items:stretch; }
  #full .mkt-exit{ align-self:flex-end; }
}

/* ---- 動きを減らす設定 ---- */
@media (prefers-reduced-motion: reduce){
  #full .mkt-kimg, #full .mkt-kimg.nod{ animation:none; }
  #full .mk-card{ animation:none; transition:border-color .12s linear; }
  #full .mk-card.is-sel{ transform:none; }
  #full .mk-card.is-fly{ animation:none; opacity:0; }
  #full .mkt-basket.got, #full .mkt-say.pop{ animation:none; }
}
#full .mkt.no-anim .mkt-kimg,
#full .mkt.no-anim .mk-card{ animation:none; }
#full .mkt.no-anim .mk-card.is-sel{ transform:none; }

/* ---- 商品の絵(v4.3 工程B) ----
   商品が出るどの画面でも同じ共通素材を、同じ大きさの決まりで見せる。
   広い画面では96px、狭い画面でも64pxを下回らない。
   絵は正方形の枠のなかに、縦横比を変えずに収める。 */
.gfig{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; box-sizing:border-box;
  background:rgba(20,16,26,.5); border:1px solid var(--line); border-radius:4px;
  overflow:hidden;
}
.gfig img{
  display:block; width:100%; height:100%; object-fit:contain;
  image-rendering:pixelated;
}
/* 既定の大きさ。あとに来る修飾のほうが強くなるよう、ここを先に書く */
.gfig{    width:clamp(64px, calc(21px * var(--s)), 96px);
          height:clamp(64px, calc(21px * var(--s)), 96px); }
.gfig.gfig-lg{ width:clamp(64px, calc(24px * var(--s)), 96px);
               height:clamp(64px, calc(24px * var(--s)), 96px); }
.gfig.gfig-md{ width:clamp(64px, calc(20px * var(--s)), 96px);
               height:clamp(64px, calc(20px * var(--s)), 96px); }
/* 画像IDの対応が無い商品。黙って別の絵を出さず、見て分かるようにする */
.gfig-miss{ color:#e8b9ba; border-color:#a2585a; border-style:dashed;
            font-size:var(--fs-s); text-align:center; }
/* 空き枠。並びをそろえるための場所取り */
.gfig-none{ color:var(--sub); border-style:dashed; font-size:var(--fs-s); }

/* 買取・値付け・値切りのカード上部 */
.card-top{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.card-nm{ font-weight:bold; font-size:var(--fs); line-height:1.3;
          overflow-wrap:anywhere; }

/* 絵を横に並べる(鑑定の結果・値切りの成否) */
.fig-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0; }
.fig-one{ display:flex; flex-direction:column; align-items:center; gap:2px;
          max-width:96px; }
/* 品名は必ず自分の絵の下に収める。はみ出すと隣の品の名前と混ざって読めなくなる */
.fig-cap{ font-size:var(--fs-s); color:var(--sub); max-width:100%;
          text-align:center; overflow-wrap:anywhere; line-height:1.25; }

/* ============================================================
   v5 相場 / 取り寄せ台帳 / 本日の商い / 古物帳 / 30日の評価
   色だけで区別しない。文字を必ず添える。発光や虹色は使わない。
   ============================================================ */

/* ---- パソコンのタブ ---- */
.pc-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 6px; }
/* .win button の「幅100%・縦並び」が既定なので、要素名まで足して打ち消す */
.win button.pc-tab, #full button.pc-tab{
  flex:0 0 auto; width:auto; margin:0;
  min-height:44px; min-width:44px; padding:0 10px;
  font-size:var(--fs-s); color:var(--sub); white-space:nowrap;
  background:var(--panel2); border:2px solid var(--line); border-radius:4px;
}
.pc-tab.on{ color:#1b1622; background:var(--accent); border-color:var(--accent); font-weight:bold; }
/* 下端に貼り付く「翌日へ」の帯の高さぶん、余白を取る。
   これが無いと、いちばん下の行やボタンが帯に隠れて押せなくなる。 */
.pc-body{ min-height:calc(26px * var(--s)); padding-bottom:60px; }
.win .cells{ margin-bottom:8px; }
.pc-body h3{ margin:2px 0 4px; font-size:var(--fs); border-bottom:1px solid var(--line);
             padding-bottom:3px; }

/* ---- 相場のタグ。色に頼らず、必ず文字で出す ---- */
.trd{
  display:inline-block; padding:0 5px; margin-left:4px; border-radius:3px;
  font-size:max(10px, calc(3.4px * var(--s))); line-height:1.5; font-weight:bold;
  border:1px solid var(--line); color:var(--sub); background:rgba(255,255,255,.06);
  white-space:nowrap;
}
.trd-hot{ color:#f3d08a; border-color:#8a7040; }
.trd-cold{ color:#9fb0c4; border-color:#4d5a6b; }
.trd-say{ margin:3px 0; font-size:var(--fs-s); }
.trd-list{ margin-top:6px; }
.trd-row{ display:flex; align-items:center; gap:6px; padding:3px 0;
          border-bottom:1px dotted var(--line); font-size:var(--fs-s); }
.trd-n{ flex:0 0 8em; }
.trd-m{ flex:1; color:var(--sub); text-align:right; }

/* 週の初めの案内 */
.trd-notice p{ margin:4px 0; }

/* ---- 取り寄せ台帳 ---- */
.q-ask{ margin:4px 0 6px; padding:5px 8px; font-size:var(--fs);
        background:var(--panel2); border-left:3px solid var(--accent); border-radius:3px; }
/* 依頼の種類。色だけで区別せず、必ず文字で出す */
.q-kind{ display:inline-block; margin-right:6px; padding:0 6px; border-radius:3px;
         font-size:max(10px, calc(3.4px * var(--s))); font-weight:bold;
         color:#1b1622; background:var(--accent); vertical-align:middle; }

/* ---- 古物帳 ---- */
.cat-head{ display:flex; flex-wrap:wrap; gap:10px; align-items:baseline;
           margin-bottom:5px; font-size:var(--fs-s); }
.cat-title{ color:var(--accent); font-weight:bold; }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(104px, 132px));
           justify-content:center; gap:6px; }
.win button.cat-cell, #full button.cat-cell{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:auto; min-height:44px; margin:0; padding:5px 4px;
  background:var(--panel2); border:1px solid var(--line); border-radius:4px;
  color:var(--ink); font-size:var(--fs-s);
}
.win button.cat-cell:disabled{ opacity:1; }
.cat-nm{ font-weight:bold; text-align:center; overflow-wrap:anywhere; line-height:1.25; }
.cat-sub{ color:var(--sub); }
.cat-none .cat-nm{ color:var(--sub); font-weight:normal; }
/* 未登録は暗いかげだけ。名前も数値も出さない */
.cat-sil img{ filter:brightness(0) opacity(.42); }
.cat-detail{ margin-bottom:6px; }

/* ---- 30日目の評価 ---- */
.res{ text-align:left; }
.rank{ text-align:center; font-size:calc(var(--fs) * 3); line-height:1; margin:2px 0 4px; }
.rank-S{ color:#ffd98a; } .rank-A{ color:#e8c07a; } .rank-B{ color:#cfc2a6; }
.rank-C{ color:#b3ad9e; } .rank-D{ color:#9a9088; }
.res-msg{ text-align:center; margin:0 0 8px; font-size:var(--fs); line-height:1.5; }
.aw-list{ margin-top:6px; }
.aw{ display:flex; align-items:baseline; gap:6px; padding:3px 0;
     border-bottom:1px dotted var(--line); font-size:var(--fs-s); }
.aw-m{ flex:0 0 3em; color:var(--sub); }
.aw.on .aw-m{ color:var(--accent); font-weight:bold; }
.aw-n{ flex:0 0 5em; font-weight:bold; }
.aw-s{ flex:1; color:var(--sub); }

/* 取り寄せ台帳で品を選ぶ枠。既定の「幅100%のボタン」を打ち消す */
.win button.cell{ width:auto; margin:0; text-align:center; }