/* #ピカタグ ブランド共通スタイル（LP準拠: 白ベース・マゼンタ×シアン・ステッカー） */
:root{
  --magenta:#ec0e7c; --cyan:#29a9e0; --ink:#111111; --paper:#ffffff;
  --paper-2:#f4f6f8; --muted:#6b6f76; --line:#e7e9ee;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:100%; min-height:100%; margin:0;
  overscroll-behavior:none; touch-action:manipulation;
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
input,select,textarea{font-size:16px}
.wrap{max-width:480px;margin:0 auto;padding:18px 16px 48px}

/* スクロール/ズームが不要な演出・キオスク画面用（将来のランクアップ演出・結果発表演出向け） */
.game-screen{
  position:fixed; inset:0; width:100%; height:100%;
  overflow:hidden; touch-action:none;
  user-select:none; -webkit-user-select:none;
}

/* ロゴ */
.logo{display:block;width:196px;max-width:60%;height:auto;margin:8px auto 16px}
.logo-sm{width:132px;margin:4px auto 14px}

/* 見出し（Dela Gothic One） */
.dela{font-family:"Dela Gothic One","Hiragino Sans",sans-serif;font-weight:400;letter-spacing:.01em}
h1.page{font-family:"Dela Gothic One","Hiragino Sans",sans-serif;font-weight:400;font-size:22px;text-align:center;line-height:1.35;margin-bottom:4px}
.lead{text-align:center;color:var(--muted);font-size:13px;margin-bottom:18px}

/* ステッカー・カード */
.card{
  background:#fff;border:3px solid var(--ink);border-radius:18px;
  box-shadow:5px 5px 0 0 var(--ink); padding:16px; margin-bottom:16px;
}
.card.soft{box-shadow:none;border-width:2px;border-color:var(--line);border-radius:16px}

/* 見出しラベル（アイコン付き） */
.field-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.field-head img{width:26px;height:26px;flex:none}
.field-head .t{font-family:"Dela Gothic One","Hiragino Sans",sans-serif;font-size:15px}
label{display:block;font-size:13px;font-weight:700;margin:10px 0 5px}
.note{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}
.hint{font-size:12px;color:var(--muted);margin-bottom:10px}
.opt{font-size:11px;color:#fff;background:#b7bcc4;border-radius:6px;padding:1px 7px;margin-left:6px;font-weight:700;vertical-align:middle}

/* 入力欄 */
input[type=text],input[type=tel],select{
  padding:12px 13px;border:2px solid var(--ink);border-radius:12px;font-size:16px;background:#fff;
  font-family:inherit;
}
input[type=text],input[type=tel]{width:100%}
input:focus,select:focus{outline:none;border-color:var(--magenta)}
.bday-row{display:flex;gap:6px;align-items:center;font-size:14px}
.bday-row select{flex:1;min-width:0}

/* プレイヤー枠 */
.player{border:2px dashed #c7ccd4;border-radius:14px;padding:13px;margin-top:12px;position:relative}
.player .del{position:absolute;top:8px;right:8px;background:none;border:none;color:#b7bcc4;font-size:20px;cursor:pointer}

/* ボタン */
.btn{display:block;width:100%;padding:15px;border:none;border-radius:14px;font-size:16px;cursor:pointer;
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-weight:900;margin-top:10px}
.btn-primary{
  background:linear-gradient(100deg,var(--magenta),var(--cyan));color:#fff;
  border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);
}
.btn-primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink)}
.btn-primary:disabled{opacity:.45}
.btn-sub{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.btn-add{background:#eaf6fc;color:#1a7fb0;border:2px dashed var(--cyan);font-weight:700}

/* チップ選択 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--ink);background:#fff;border-radius:22px;padding:9px 14px;font-size:14px;font-weight:700;
  cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:7px;transition:transform .08s}
.chip:active{transform:scale(.96)}
.chip.sel{background:var(--magenta);color:#fff}
.chip.sel.cy{background:var(--cyan)}
.rankbadge{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;
  background:#fff;color:var(--magenta);font-size:12px;font-weight:900}

/* 受付コード表示 */
.code-panel{border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 0 var(--ink);
  background:#fff;padding:18px 16px;text-align:center;margin-bottom:16px;position:relative;overflow:hidden}
.code-panel .cap{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.code-panel .cap img{width:20px;height:20px}
.code-panel .code{font-family:"Dela Gothic One","Hiragino Sans",sans-serif;font-size:46px;letter-spacing:7px;
  color:var(--magenta);margin:6px 0 2px;line-height:1.1}
.code-panel .sub{font-size:12px;color:var(--muted)}

/* メンバー行 */
.member-row{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:2px solid var(--line);font-size:15px;font-weight:700}
.member-row:last-child{border-bottom:none}
.member-row .stats{font-size:12px;color:var(--muted);font-weight:700}

/* 状態・演出 */
.flash{background:#eafaf0;border:2px solid #1aa06d;color:#0a7a45;border-radius:12px;padding:11px;font-size:14px;font-weight:700;margin-bottom:14px;display:none;text-align:center}
.err{color:#d61a3c;font-size:13px;margin-top:8px;min-height:1em;font-weight:700}
.center{text-align:center}
.big-icon{width:76px;height:76px;margin:6px auto 4px;display:block}

/* ローディング */
.spinner{width:38px;height:38px;border:5px solid #e7e9ee;border-top-color:var(--magenta);border-radius:50%;margin:0 auto 14px;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading{text-align:center;padding:64px 0;color:var(--muted);font-weight:700}

/* ローディング演出: 紀州犬ルーキーがリング（トラック）の上を横向きに走る。
   足の動きは4コマのスプライトをsteps()でパラパラ漫画的に切り替える（滑らかな補間はしない） */
.loadmon-track{position:relative;width:76px;height:76px;margin:0 auto 12px}
.loadmon-ring{position:absolute;inset:0;border:5px solid #e7e9ee;border-top-color:var(--magenta);border-radius:50%;animation:spin 1.6s linear infinite}
.loadmon{position:absolute;left:50%;bottom:2px;width:40px;height:40px;
  margin-left:-20px; /* 走行アニメの中心をトラック中央に合わせる基準点 */
  background-image:url(/assets/neon/rookie-run-strip.png);
  background-repeat:no-repeat;background-size:400% 100%;background-position-x:0%;
  animation:runlegs .5s steps(4) infinite;
}
/* bg-position-x の%は「(要素幅-画像幅)×p」で解決されるため、4コマ(画像=400%幅)では
   0/33.33/66.67/100% がコマ境界。steps(4)でその4点を踏むには終点を133.333%にする
   （100%終点だと25%刻みになり、コマの切れ目がズレて犬が2匹に割れて見える） */
@keyframes runlegs{from{background-position-x:0%}to{background-position-x:133.333%}}
@media (prefers-reduced-motion: reduce){
  .loadmon{animation:none;background-position-x:0%}
  .loadmon-ring{animation:none}
}
/* ローディングのティップス（ゲームのしくみを1行ずつローテーション表示。liff-boot.jsが差し込む） */
.loadtxt{font-size:11px;font-weight:900;color:var(--muted);letter-spacing:.1em;margin-bottom:6px}
.loadtip{min-height:2.8em;max-width:300px;margin:0 auto;font-size:13px;font-weight:900;color:var(--ink);line-height:1.7;
  opacity:0;transform:translateY(4px)}
.loadtip.in{animation:tipin .45s ease-out forwards}
@keyframes tipin{to{opacity:1;transform:translateY(0)}}
/* レア演出（低確率）: いつもとちがう走りが見られる。①ちょうダッシュ ②ぴょんぴょんジャンプ */
.loadmon-track.fun-dash .loadmon{animation-duration:.22s;transform:rotate(-8deg)}
.loadmon-track.fun-dash .loadmon-ring{animation-duration:.45s;border-top-color:var(--cyan)}
.loadmon-track.fun-jump .loadmon{animation:runlegs .5s steps(4) infinite, monhop .8s cubic-bezier(.3,0,.2,1) infinite}
@keyframes monhop{0%,100%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-14px) scaleY(1.04)}60%{transform:translateY(0) scaleY(.94)}75%{transform:translateY(0) scaleY(1)}}
@media (prefers-reduced-motion: reduce){
  .loadmon-track.fun-dash .loadmon,.loadmon-track.fun-jump .loadmon{animation:none}
}

.devbadge{display:none;background:#fff3cd;color:#8a6d00;font-size:11px;padding:4px 10px;border-radius:12px;margin:0 auto 12px;width:fit-content;font-weight:700}

.screen{display:none}

/* 確認モーダル（ブランド共通）。ネイティブconfirm()はLIFF内でドメイン名が
   強制表示されるため使わず、これで代替する（js-confirm() ヘルパーとセット） */
.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(20,20,28,.55);
  align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 0 var(--ink);
  padding:22px 20px;max-width:340px;width:100%;text-align:center}
.modal-box .mmsg{font-size:14.5px;font-weight:700;line-height:1.8;white-space:pre-wrap;margin-bottom:16px}
.modal-box .mbtns{display:flex;gap:10px}
.modal-box .mbtns button{flex:1;padding:12px;border-radius:12px;font-weight:900;font-size:14px;cursor:pointer;
  font-family:inherit;border:2px solid var(--ink)}
.modal-box .mbtns .mcancel{background:#fff;color:var(--ink)}
.modal-box .mbtns .mok{background:var(--magenta);color:#fff}