/* ================= ピット小屋デザイン =================
   油染みた作業伝票 / ベニヤ看板 / 鉛丹の受領印            */
:root{
  --ink:#2e2a24; --paper:#d9c79d; --paper2:#cdb98c;
  --plate:#39483f; --chalk:#f0e8d4; --red:#c2401c;
  --up:#2f6f4f; --down:#b43a14; --flat:#8a8378;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{background:#c2b394;color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  user-select:none;-webkit-user-select:none}
#stage{position:fixed;inset:0}
canvas#race{display:block;width:100vw;height:100vh}

/* ---------- 看板(上部バー) ---------- */
#topbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:flex-start;
  justify-content:space-between;padding:8px 10px;pointer-events:none;z-index:5}
.plate{background:var(--plate);color:var(--chalk);padding:7px 14px 8px;
  border:3px solid #2a352e;border-radius:3px;box-shadow:0 3px 0 rgba(0,0,0,.25);
  transform:rotate(-1.2deg)}
.plate .t{font-weight:800;font-size:19px;letter-spacing:2px}
.plate .s{display:block;font-size:10px;letter-spacing:3px;opacity:.75;margin-top:1px}
#hud{display:flex;gap:8px}
.gauge{background:var(--paper);border:2px solid var(--ink);border-radius:3px;
  padding:4px 10px;min-width:64px;text-align:center;transform:rotate(.6deg);
  box-shadow:0 2px 0 rgba(0,0,0,.2)}
.gauge .l{font-size:9px;letter-spacing:2px;opacity:.7}
.gauge .v{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.gauge .v small{font-size:10px;font-weight:600;opacity:.7}

/* ---------- ミニマップ(コース見取図) ---------- */
#minimapWrap{position:fixed;top:80px;left:50%;transform:translateX(-50%) rotate(-.4deg);
  z-index:5;pointer-events:none;background:var(--paper);border:2px solid var(--ink);
  border-radius:3px;padding:3px 6px;box-shadow:0 2px 0 rgba(0,0,0,.2)}
#minimapWrap .mlabel{font-size:9px;letter-spacing:2px;opacity:.65;text-align:left}
canvas#minimap{display:block;width:min(72vw,560px);height:30px}

/* ---------- 速度・音ボタン ---------- */
#speedbox{position:fixed;right:10px;bottom:12px;display:flex;gap:6px;z-index:6}
.spd,#muteBtn{background:var(--paper);border:2px solid var(--ink);border-radius:3px;
  font-weight:800;font-size:15px;padding:9px 13px;color:var(--ink);cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.25);font-family:inherit}
.spd.on{background:var(--red);color:var(--chalk);border-color:#7e2a0f}
.spd:active,#muteBtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
#muteBtn{position:fixed;left:10px;bottom:12px;z-index:6}
#howtoLink{position:fixed;left:10px;bottom:64px;z-index:6;background:var(--plate);
  color:var(--chalk);font-size:11px;padding:5px 9px;border-radius:3px;border:2px solid #2a352e;
  cursor:pointer;transform:rotate(-1deg)}

/* ---------- 路上テロップ ---------- */
#caption{position:fixed;left:50%;bottom:13vh;transform:translateX(-50%) rotate(-.5deg);
  background:var(--ink);color:var(--chalk);padding:8px 16px;font-size:14px;font-weight:700;
  border-radius:2px;opacity:0;transition:opacity .25s;z-index:6;pointer-events:none;
  max-width:86vw;text-align:center}
#caption.show{opacity:.95}

/* ---------- オーバーレイ共通 ---------- */
.overlay{position:fixed;inset:0;background:rgba(40,36,30,.55);display:none;
  z-index:20;overflow-y:auto;-webkit-overflow-scrolling:touch}
#howtoModal{z-index:60}
.overlay.show{display:block}
.overlay-inner{min-height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:22px 12px;gap:14px}

/* ---------- 黒板見出し ---------- */
.board{background:var(--plate);color:var(--chalk);border:4px solid #57422c;
  border-radius:4px;padding:10px 18px;text-align:center;transform:rotate(-.8deg);
  box-shadow:0 4px 0 rgba(0,0,0,.3)}
.board h2{font-size:18px;letter-spacing:1px}
.board .sub{font-size:12px;opacity:.85;margin-top:4px}
.board .sub b{color:#ffd9a8}

/* ---------- 作業指示票(カード) v2 ---------- */
.slips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:980px}
.slip{position:relative;width:218px;background:var(--paper);border:2px solid var(--ink);
  border-radius:2px;padding:30px 12px 12px;cursor:pointer;
  box-shadow:2px 4px 0 rgba(0,0,0,.25);transition:transform .12s}
.slip:nth-child(1){transform:rotate(-1.4deg)}
.slip:nth-child(2){transform:rotate(.8deg)}
.slip:nth-child(3){transform:rotate(-.5deg)}
.slip:nth-child(4){transform:rotate(1.2deg)}
.slip:hover{transform:rotate(0) translateY(-4px)}
.slip::before{content:"";position:absolute;top:-9px;left:50%;width:74px;height:20px;
  transform:translateX(-50%) rotate(-2deg);background:rgba(222,214,192,.85);
  border-left:1px dashed rgba(0,0,0,.15);border-right:1px dashed rgba(0,0,0,.15)}
.slip canvas.ic{position:absolute;top:8px;left:10px;width:28px;height:28px}
.slip .cat{position:absolute;top:12px;right:10px;font-size:9px;letter-spacing:2px;
  padding:2px 6px;border:1.5px solid var(--ink);border-radius:2px;opacity:.75}
.slip h3{font-size:16px;margin:2px 0 6px;line-height:1.25}
.slip h3 .rare{color:var(--red);font-size:10px;border:1.5px solid var(--red);
  padding:1px 4px;border-radius:2px;margin-left:5px;vertical-align:2px;
  display:inline-block;white-space:nowrap}
.slip .desc{font-size:13px;line-height:1.5;font-weight:700;min-height:38px}
/* 改造前→後プレビュー */
.slip .pv{display:flex;align-items:center;justify-content:center;gap:3px;margin:7px 0 6px;
  background:#cfe0da;border:1.5px solid var(--ink);border-radius:2px;padding:3px;overflow:hidden}
.slip .pv canvas{width:80px;height:48px;display:block;flex:none}
.slip .pv .arr{font-weight:800;font-size:15px}
.slip .pv .modicon{flex:1;display:flex;align-items:center;justify-content:center;padding:4px 0}
.slip .pv .modicon canvas{width:44px;height:44px}
.slip .pv .modtxt{flex:1;text-align:center;font-size:11px;font-weight:800;padding:2px}
/* メーター */
.meters{display:flex;gap:4px;justify-content:space-between}
.meter{flex:1;text-align:center;background:rgba(255,255,255,.35);border-radius:2px;padding:3px 0 2px}
.meter .ml{font-size:9px;letter-spacing:1px;opacity:.75}
.meter .mv{font-weight:900;font-size:14px;letter-spacing:-1px}
.mv.up{color:var(--up)} .mv.dn{color:var(--down)} .mv.fl{color:var(--flat)} .mv.q{color:#7a5fa0}
/* 受領印 */
.slip .stamp{position:absolute;right:8px;bottom:42px;width:62px;height:62px;border:4px solid var(--red);
  border-radius:50%;color:var(--red);display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:17px;transform:rotate(-14deg) scale(2.2);opacity:0;pointer-events:none}
.slip.stamped .stamp{animation:stampIn .28s ease-out forwards}
@keyframes stampIn{to{opacity:.88;transform:rotate(-14deg) scale(1)}}
.slip.refuse{background:#b9aa8b}
.slip.refuse h3{color:#5e1f08}
.slip.refuse .stamp{border-color:#3c3225;color:#3c3225}

/* ---------- ラウンド間スタンプ ---------- */
#interstamp{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  z-index:15;pointer-events:none;flex-direction:column;gap:10px}
#interstamp.show{display:flex}
#interstamp .big{font-size:min(15vw,86px);font-weight:900;color:var(--red);
  border:7px solid var(--red);padding:6px 26px;border-radius:6px;background:rgba(240,232,212,.88);
  transform:rotate(-7deg);animation:stampIn2 .3s ease-out}
#interstamp .note{background:var(--ink);color:var(--chalk);padding:7px 14px;font-size:14px;
  font-weight:700;border-radius:2px;transform:rotate(-1deg)}
@keyframes stampIn2{from{transform:rotate(-7deg) scale(2.4);opacity:0}
  to{transform:rotate(-7deg) scale(1);opacity:1}}

/* ---------- タイトル画面 ---------- */
#titleOverlay{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:18px;
  background:
   radial-gradient(ellipse at 50% 110%, rgba(0,0,0,.28), transparent 60%),
   repeating-linear-gradient(115deg, #c2b394 0 26px, #bcae8d 26px 52px)}
#titleOverlay.hide{display:none}
.logoPlank{background:var(--plate);border:5px solid #2a352e;border-radius:5px;
  padding:18px 34px 20px;text-align:center;transform:rotate(-2deg);
  box-shadow:0 7px 0 rgba(0,0,0,.3), inset 0 0 0 2px rgba(240,232,212,.15)}
.logoPlank h1{color:var(--chalk);font-size:min(13vw,58px);font-weight:900;letter-spacing:5px}
.logoPlank .tag{color:#ffd9a8;font-size:13px;letter-spacing:3px;margin-top:4px;font-weight:700}
.relayNotice{background:var(--paper);border:2px solid var(--ink);border-radius:3px;
  padding:10px 16px;font-size:13.5px;font-weight:700;max-width:420px;text-align:center;
  transform:rotate(.7deg);box-shadow:2px 3px 0 rgba(0,0,0,.25)}
.relayNotice b{color:var(--red)}
.titleBtns{display:flex;flex-direction:column;gap:10px;align-items:center}
.bigbtn{background:var(--paper);border:3px solid var(--ink);border-radius:3px;color:var(--ink);
  font-weight:900;font-size:17px;padding:13px 36px;cursor:pointer;font-family:inherit;
  box-shadow:0 4px 0 rgba(0,0,0,.3);letter-spacing:2px}
.bigbtn.red{background:var(--red);color:var(--chalk);border-color:#7e2a0f}
.bigbtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.bigbtn.small{font-size:13px;padding:9px 20px;letter-spacing:1px}
.bigbtn[disabled]{opacity:.45;pointer-events:none}
#titleSound{font-size:12px;color:var(--ink);opacity:.85;font-weight:700;cursor:pointer;
  border-bottom:1.5px dashed var(--ink);padding-bottom:1px}

/* ---------- あそびかた ---------- */
.howto{background:var(--paper);border:2px solid var(--ink);border-radius:3px;
  padding:18px 16px;max-width:430px;width:94vw;box-shadow:3px 5px 0 rgba(0,0,0,.3)}
.howto .head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;
  border-bottom:2px solid var(--ink);padding-bottom:5px;margin-bottom:10px;font-weight:700}
.hstep{display:flex;align-items:center;gap:11px;padding:10px 4px;border-bottom:1.5px dashed rgba(0,0,0,.2)}
.hstep:last-child{border-bottom:none}
.hstep .hn{flex:none;width:24px;height:24px;border:2.5px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;
  transform:rotate(-6deg)}
.hstep .hi{width:42px;text-align:center;flex:none}
.hstep .hi canvas{width:38px;height:38px}
.hstep .ht{font-size:13.5px;line-height:1.55;font-weight:700}
.hstep .ht b{color:var(--red)}
.hstep .ht .big{font-size:15px}
.hstep .ht .gh{color:#6b6b66}

/* ---------- 呪い開封 ---------- */
#curseOverlay{z-index:30}
.cursecard{background:#5a5248;border:3px solid #2e2a24;border-radius:3px;width:min(92vw,330px);
  padding:18px 16px 16px;text-align:center;box-shadow:4px 6px 0 rgba(0,0,0,.4);
  transform:rotate(-.8deg);display:flex;flex-direction:column;align-items:center;gap:10px}
.cursecard canvas#curseSkull{width:54px;height:54px}
.cursecard .ctitle{color:#e8ddc4;font-weight:900;font-size:20px;letter-spacing:3px}
.cursecard .ctext{color:#ffd9a8;font-weight:800;font-size:14.5px;line-height:1.6;
  background:rgba(0,0,0,.25);border-radius:2px;padding:8px 10px;width:100%}
.cursecard .cpv{display:flex;align-items:center;gap:5px;background:#cfe0da;
  border:2px solid #2e2a24;border-radius:2px;padding:4px;overflow:hidden}
.cursecard .cpv canvas{width:110px;height:66px;display:block;flex:none}
.cursecard .cpv .arr{font-weight:900;font-size:17px}

/* ---------- いまのマシン表示 ---------- */
.nowbox{display:flex;align-items:center;gap:10px;background:var(--paper);
  border:2px solid var(--ink);border-radius:2px;padding:7px 10px;
  box-shadow:2px 3px 0 rgba(0,0,0,.25);transform:rotate(.4deg)}
.nowbox canvas{width:120px;height:72px;display:block;border:1.5px solid var(--ink);
  border-radius:2px;background:#cfe0da}
.nowbox .nowlabel{font-size:9px;letter-spacing:2px;opacity:.7;font-weight:800;margin-bottom:2px}
.nowbox #nowStats{font-size:12px;font-weight:800;line-height:1.55}
.nowbox #nowStats .st{color:#7e2a0f;letter-spacing:1px}

/* ---------- 検査合格証(リザルト) ---------- */
.cert{background:var(--paper);border:2px solid var(--ink);border-radius:3px;width:min(94vw,440px);
  padding:16px 16px 14px;box-shadow:3px 5px 0 rgba(0,0,0,.3);position:relative}
.cert .head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;
  border-bottom:2px solid var(--ink);padding-bottom:5px;margin-bottom:9px;font-weight:700}
.cert .name{font-size:22px;font-weight:900;margin:4px 0 1px}
.cert .relay{font-size:11.5px;opacity:.8;font-weight:700;margin-bottom:7px}
.cert .titlestamp{display:inline-block;border:3px solid var(--red);color:var(--red);
  font-weight:900;font-size:15px;padding:4px 11px;border-radius:3px;transform:rotate(-2.5deg);
  margin:3px 0 9px;background:rgba(255,255,255,.3)}
.cert table{width:100%;font-size:13px;border-collapse:collapse;margin-bottom:9px}
.cert td{padding:3.5px 2px;border-bottom:1.5px dashed rgba(0,0,0,.22);font-weight:700}
.cert td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.cert .ba{display:flex;align-items:center;gap:6px;margin:8px 0}
.cert .ba .pane{flex:1;text-align:center}
.cert .ba .pane span{font-size:10px;letter-spacing:2px;font-weight:700;opacity:.75}
.cert .ba canvas{width:100%;border:1.5px solid var(--ink);border-radius:2px;display:block;margin-top:2px}
.cert .ba .arrow{font-size:20px;font-weight:900}
.cert .lineage{font-size:11.5px;line-height:1.75;background:rgba(255,255,255,.32);
  border:1.5px dashed rgba(0,0,0,.3);border-radius:2px;padding:8px 10px;margin-bottom:9px}
.cert .lineage .lt{font-size:9px;letter-spacing:2px;opacity:.7;font-weight:800}
.cert .sharebox textarea{width:100%;height:96px;font-size:11px;font-family:inherit;
  background:rgba(255,255,255,.45);border:1.5px solid var(--ink);border-radius:2px;
  padding:7px;resize:none;color:var(--ink)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.smallnote{font-size:11px;color:var(--chalk);text-align:center;line-height:1.7;
  text-shadow:0 1px 0 rgba(0,0,0,.4);max-width:380px}
.smallnote b{color:#ffd9a8}
/* ---------- スマホ調整 ---------- */
@media (max-width:620px){
  #topbar{padding:6px 6px}
  .plate{padding:5px 9px 6px;border-width:2px}
  .plate .t{font-size:13px;letter-spacing:1px}
  .plate .s{font-size:8px;letter-spacing:1px;white-space:nowrap}
  #hud{gap:4px}
  .gauge{min-width:50px;padding:3px 5px}
  .gauge .l{font-size:8px;letter-spacing:1px}
  .gauge .v{font-size:13px}
  #minimapWrap{top:64px;padding:2px 5px}
  #minimapWrap .mlabel{display:none}
  canvas#minimap{width:86vw;height:22px}
  .spd,#muteBtn{padding:8px 11px;font-size:13px}
  #howtoLink{bottom:58px}
  .slip{width:min(88vw,218px)}
  .nowbox canvas{width:100px;height:60px}
  .nowbox #nowStats{font-size:11px}
  .cert .name{font-size:19px}
  .bigbtn{font-size:15px;padding:11px 22px}
  #caption{font-size:12.5px;bottom:15vh}
}