:root{
    --bg:#F4F8EF; --bg2:#EAF3E3; --card:#FFFFFF;
    --green:#3E9E63; --green-deep:#2C7A49; --green-press:#2C8A55;
    --green-soft:#E8F3E5; --green-line:#CFE6CF; --green-light:#86C79A;
    --ink:#2A382C; --muted:#586D5C;
    --gold:#E6A93C; --gold-soft:#FBF0DA;
    --ring-track:#E1EFDC;
    --shadow:0 10px 28px rgba(46,110,72,.12);
    --shadow-sm:0 4px 14px rgba(46,110,72,.10);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  :where(button,a,input,summary,[tabindex]):focus-visible{outline:3px solid #245CBA;outline-offset:4px;}
  button{touch-action:manipulation;}
  html,body{margin:0;padding:0;}
  body{font-family:"Zen Maru Gothic", system-ui, sans-serif; color:var(--ink); background:radial-gradient(120% 60% at 50% -10%, #FFFFFF 0%, var(--bg) 55%, var(--bg2) 100%) fixed; min-height:100vh; line-height:1.6; overscroll-behavior:none;}
  .app{max-width:480px; margin:0 auto; padding:0 18px 130px; position:relative;}

  /* ヘッダー：公式ロゴ */
  header{text-align:center; padding:22px 0 2px;}
  header img.logo{width:min(180px,55%); height:auto; display:block; margin:0 auto;}
  header .tag{font-size:14px; letter-spacing:.26em; color:var(--muted); font-weight:700; margin-top:7px;}
  header .pass{font-size:19px; letter-spacing:.14em; color:var(--green-deep); font-weight:900; margin-top:9px;}

  /* サイクル円環（7枠） */
  .cycle-card{background:var(--card); border-radius:30px; padding:16px 14px 8px; margin-top:14px; box-shadow:var(--shadow); border:1px solid #EFF4EC;}
  .cycle{position:relative; width:min(320px,100%); aspect-ratio:1/1; margin:2px auto 0;}
  .cycle-bg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);}
  .cycle-slots{position:absolute; inset:0;}
  .cslot{position:absolute; width:19%; aspect-ratio:1/1; transform:translate(-50%,-50%);}
  .cdisc{width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s, border-color .3s; position:relative;}
  .cslot.empty .cdisc{border:2.5px dashed var(--green-line); background:#FBFDFA; color:#BCD3BF;}
  .cslot.empty .cdisc svg{width:44%; height:44%; opacity:.5;}
  .cslot.filled .cdisc{background:var(--green-soft); border:2.5px solid var(--green); color:var(--green-deep); box-shadow:inset 0 -3px 0 rgba(44,122,73,.12), var(--shadow-sm);}
  .cslot.filled .cdisc svg{width:48%; height:48%; opacity:1;}
  .cnum{position:absolute; top:-3px; left:-3px; width:19px; height:19px; border-radius:50%; background:#fff; border:1.5px solid var(--green-line); color:var(--muted); font-size:9px; font-weight:900; display:flex; align-items:center; justify-content:center; z-index:2;}
  .cslot.filled .cnum{background:var(--green); border-color:var(--green); color:#fff;}
  @keyframes pop{0%{transform:scale(0);}60%{transform:scale(1.2);}100%{transform:scale(1);}}
  .cslot.justAdded .cdisc{animation:pop .5s cubic-bezier(.34,1.56,.64,1);}

  .center-logo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30%; aspect-ratio:1/1; border-radius:50%; background:#fff; border:3px solid var(--green-line); display:flex; align-items:center; justify-content:center; transition:.4s; box-shadow:var(--shadow-sm); overflow:hidden;}
  .center-logo img{width:72%; height:72%; object-fit:contain; filter:grayscale(.4) opacity(.5); transition:.4s;}
  .center-logo.done{background:var(--green-soft); border-color:var(--gold); box-shadow:0 0 0 6px var(--gold-soft), var(--shadow);}
  .center-logo.done img{animation:thumbShake 2.4s ease-in-out 0.2s infinite;}
  .center-logo.done img{filter:none;}
  @keyframes thump{0%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.12);}100%{transform:translate(-50%,-50%) scale(1);}}
  /* 👍シェイク（小刻みに揺れて たまにブルッと） */
  @keyframes thumbShake{
    0%,72%,100%{transform:rotate(0deg) scale(1);}
    74%{transform:rotate(-12deg) scale(1.06);}
    77%{transform:rotate(11deg) scale(1.06);}
    80%{transform:rotate(-9deg) scale(1.05);}
    83%{transform:rotate(8deg) scale(1.04);}
    86%{transform:rotate(-5deg) scale(1.02);}
    89%{transform:rotate(3deg) scale(1.01);}
    92%{transform:rotate(0deg) scale(1);}
  }

  .status{text-align:center; margin:4px 0 6px;}
  .pill{display:inline-flex; gap:7px; align-items:center; background:var(--green-soft); color:var(--green-deep); border-radius:999px; padding:9px 18px; font-size:15px; font-weight:700;}
  .pill b{font-size:20px; color:var(--green);}
  .pill.done{background:var(--gold-soft); color:#9A6E18;}
  .bonus-note{text-align:center; font-size:13px; color:var(--muted); margin:0 0 6px;}

  .quick-guide{margin-top:16px;padding:15px 16px;background:#fff;border:2px solid var(--green-line);border-radius:18px;}
  .quick-guide h2{margin:0;color:var(--green-deep);font-size:19px;line-height:1.5;}
  .quick-guide p{margin:7px 0 0;font-size:14px;line-height:1.7;}
  .quick-guide .guide-place{color:var(--muted);font-size:13px;}
  .access-link{display:inline-flex;align-items:center;min-height:44px;margin-top:5px;color:var(--green-deep);font-weight:700;text-underline-offset:3px;}

  /* 安心メッセージ */
  .safe-note .safe-text{word-break:normal; overflow-wrap:anywhere; line-break:strict;}
  .maincopy{margin:14px auto 0; max-width:340px; background:var(--green); color:#fff; border-radius:16px; padding:11px 16px; font-size:14px; font-weight:800; line-height:1.55; text-align:center; box-shadow:0 4px 14px rgba(62,158,99,.3);}
  .maincopy b{color:#FFE08A;}
  .safe-note{display:flex; align-items:flex-start; gap:9px; background:var(--green-soft); border:1px solid var(--green-line); border-radius:16px; padding:11px 13px; margin-top:12px; font-size:12.5px; color:var(--green-deep); line-height:1.55;}
  .safe-note svg{width:18px; height:18px; flex:0 0 18px; margin-top:2px; color:var(--green);}
  .safe-note b{font-weight:800;}

  /* 取得履歴 */
  .history{background:var(--card); border:1px solid #EFF4EC; border-radius:20px; padding:6px 4px; box-shadow:var(--shadow-sm);}
  .hrow{display:flex; align-items:center; gap:12px; padding:11px 13px; border-top:1px solid #F1F5EF;}
  .hrow:first-child{border-top:none;}
  .hrow .hi{width:38px; height:38px; flex:0 0 38px; border-radius:12px; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;}
  .hrow .hi svg{width:21px; height:21px;}
  .hrow .ht{flex:1; min-width:0;}
  .hrow .ht b{display:block; font-size:14px; color:var(--ink);}
  .hrow .ht span{font-size:11.5px; color:var(--muted);}
  .hrow .hn{font-size:11px; font-weight:900; color:var(--green); background:var(--green-soft); border-radius:999px; padding:3px 9px;}
  .history-empty{text-align:center; color:var(--muted); font-size:13px; padding:20px 10px;}

  .label{font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.12em; margin:22px 4px 10px; display:flex; align-items:center; gap:8px;}
  .label .cnt{margin-left:auto; color:var(--green); font-weight:900;}

  .mission{display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid #EFF4EC; border-radius:18px; padding:12px 14px; margin-bottom:9px; box-shadow:var(--shadow-sm); transition:.25s;}
  .mission.done{background:var(--green-soft); border-color:var(--green-line);}
  .m-ico{width:42px; height:42px; flex:0 0 42px; border-radius:13px; background:#F1F6EE; color:var(--green-light); display:flex; align-items:center; justify-content:center; transition:.25s; position:relative;}
  .m-ico svg{width:24px; height:24px;}
  .mission.done .m-ico{background:var(--green); color:#fff;}
  .m-txt{flex:1; min-width:0;}
  .m-txt b{display:block; font-size:15px; color:var(--ink); line-height:1.3;}
  .m-txt span{font-size:12px; color:var(--muted);}
  .mission.done .m-txt b{color:var(--green-deep);}
  .m-txt .pri{display:inline-block; margin-top:3px; font-size:11px; font-weight:800; color:#9A6E18; background:var(--gold-soft); border:1px solid #EAD09A; border-radius:999px; padding:1px 9px;}
  .m-check{width:26px; height:26px; flex:0 0 26px; border-radius:50%; border:2px solid var(--green-line); display:flex; align-items:center; justify-content:center; color:transparent; transition:.25s;}
  .mission.done .m-check{background:var(--green); border-color:var(--green); color:#fff;}
  .m-check svg{width:15px; height:15px;}
  .m-chev{width:26px; height:26px; flex:0 0 26px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.25s; color:#C4D6C6;}
  .mission.done .m-chev{background:var(--green); color:#fff;}
  .m-chev svg{width:15px; height:15px;}
  .mission{cursor:pointer;}
  button.mission,button.reward{width:100%;font-family:inherit;color:inherit;text-align:left;}

  .reward{display:flex; align-items:center; gap:14px; padding:16px; border-radius:22px; background:var(--card); border:1px solid #EFF4EC; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .15s ease;}
  .reward:active{transform:scale(.98);}
  .reward .badge{width:50px; height:50px; flex:0 0 50px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#9fbfa3; background:var(--green-line); overflow:hidden;}
  .reward .badge img{width:78%; height:78%; object-fit:contain; filter:grayscale(.5) opacity(.6);}
  .reward .badge svg{width:26px; height:26px;}
  .reward.on .badge{background:var(--green-soft);}
  .reward.on .badge img{filter:none;}
  .reward .txt{flex:1; min-width:0;}
  .reward .txt b{display:block; font-size:16px;}
  .reward .txt span{font-size:12px; color:var(--muted);}
  .reward.on .txt b{color:var(--green-deep);}
  .reward .state{font-size:12px; font-weight:700; padding:7px 13px; border-radius:999px; background:#F1F5EF; color:var(--muted); white-space:nowrap;}
  .reward.on .state{background:var(--gold-soft); color:#9A6E18;}


  /* 達成済みのとくてんカード演出 */
  .reward-achieved{position:relative; overflow:hidden; background:linear-gradient(135deg,#F4BE4E,#E6932C) !important; border-color:transparent !important; animation:rewardPulse 1.9s ease-in-out infinite;}
  @keyframes rewardPulse{0%,100%{box-shadow:0 6px 18px rgba(230,147,44,.4);}50%{box-shadow:0 10px 32px rgba(230,147,44,.7);}}
  .reward-achieved .badge{background:#fff !important;}
  .reward-achieved .badge img{filter:none;}
  .reward-achieved .txt b{color:#5A3D00 !important; font-size:16px;}
  .reward-achieved .txt span{color:#7A5310 !important;}
  .reward-achieved .state-go{background:#fff !important; color:#9A6E18 !important; font-weight:900; box-shadow:0 2px 8px rgba(0,0,0,.12);}

  .reward-flag{display:inline-block; vertical-align:middle; margin-left:8px; background:#D64545; color:#fff; font-size:11px; font-weight:900; letter-spacing:.04em; padding:3px 10px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.2); animation:flagPop .5s cubic-bezier(.34,1.56,.64,1);}
  @keyframes flagPop{0%{transform:scale(0);}100%{transform:scale(1);}}
  .reward-shine{position:absolute; top:0; left:-60%; width:45%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); animation:rewardShine 2.8s ease-in-out infinite; pointer-events:none;}
  @keyframes rewardShine{0%{left:-60%;}50%,100%{left:130%;}}

  .scanbar{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:14px 18px calc(16px + env(safe-area-inset-bottom)); background:linear-gradient(180deg, rgba(244,248,239,0) 0%, var(--bg) 36%); max-width:480px; margin:0 auto;}
  .btn-scan{width:100%; border:none; cursor:pointer; font-family:inherit; font-weight:900; font-size:18px; background:var(--green); color:#fff; padding:17px; border-radius:20px; box-shadow:0 8px 22px rgba(62,158,99,.4); display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .12s, background .2s;}
  .btn-scan:active{transform:scale(.97); background:var(--green-press);}
  .btn-scan svg{width:24px; height:24px;}

  .overlay{position:fixed; inset:0; z-index:60; display:none; align-items:flex-end; justify-content:center;}
  .overlay.show{display:flex;}
  .overlay .scrim{position:absolute; inset:0; background:rgba(28,46,32,.45); backdrop-filter:blur(2px);}
  .sheet{position:relative; width:100%; max-width:480px; background:var(--card); border-radius:28px 28px 0 0; padding:22px 20px calc(26px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(0,0,0,.18); animation:slideUp .32s cubic-bezier(.22,1,.36,1); max-height:92vh; overflow-y:auto;}
  @keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
  .grab{width:42px; height:5px; border-radius:3px; background:#E1E8DD; margin:0 auto 16px;}
  .sheet h2{margin:0 0 4px; font-size:20px; font-weight:900; color:var(--green-deep); text-align:center;}
  .sheet .sub{text-align:center; color:var(--muted); font-size:13px; margin:0 0 16px;}
  .sheet-close{width:100%; margin-top:18px; border:none; cursor:pointer; font-family:inherit; background:var(--green-soft); color:var(--green-deep); font-weight:800; font-size:16px; padding:15px; border-radius:18px;}
  .sheet-close:active{transform:scale(.98);}

  #reader{width:100%; border-radius:18px; overflow:hidden; background:#000; min-height:280px;}
  #reader video{border-radius:18px;}
  .scan-hint{text-align:center; color:var(--muted); font-size:13px; margin:14px 0 0;}
  .scan-error{display:none; background:#FCEEEE; color:#B0524C; border-radius:14px; padding:12px 14px; font-size:13px; text-align:center; margin-top:12px;}
  .manual{margin-top:14px; text-align:center;}
  .manual-toggle{color:var(--green-deep);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;border:0;background:transparent;min-height:44px;padding:8px;}
  .manual-box{display:none; margin-top:12px; gap:8px; flex-direction:column;}
  .manual-box label{text-align:left;font-size:14px;font-weight:700;}
  .manual-box input{font-family:inherit; font-size:16px; padding:12px 14px; border-radius:14px; border:1.5px solid var(--green-line); width:100%;}
  .manual-box button{font-family:inherit; font-weight:800; border:none; cursor:pointer; background:var(--green); color:#fff; padding:13px; border-radius:14px; font-size:15px;}

  .success-sheet{text-align:center; overflow:hidden;}
  .burst{width:128px; height:128px; margin:6px auto 14px; border-radius:50%; background:var(--green-soft); border:3px solid var(--green); display:flex; align-items:center; justify-content:center; position:relative; animation:burstPop .5s cubic-bezier(.34,1.56,.64,1);}
  @keyframes burstPop{0%{transform:scale(0) rotate(-20deg);}65%{transform:scale(1.15) rotate(4deg);}100%{transform:scale(1) rotate(0);}}
  .burst svg{width:62px; height:62px; color:var(--green-deep);}
  .got-title{font-size:25px; font-weight:900; color:var(--green-deep); margin:0;}
  .got-type{display:inline-flex; align-items:center; gap:8px; margin:10px auto 0; background:var(--green-soft); color:var(--green-deep); font-weight:700; font-size:14px; padding:8px 16px; border-radius:999px;}
  .got-type svg{width:18px; height:18px;}
  .got-count{margin:18px 0 4px; font-size:15px; color:var(--muted);}
  .got-count b{font-size:34px; color:var(--green-deep); font-weight:900; vertical-align:-2px;}
  .got-next{background:var(--bg); border-radius:16px; padding:13px; font-size:14px; font-weight:700; color:var(--green-deep); margin-top:10px;}
  .got-next.mile{background:var(--gold-soft); color:#9A6E18; border:1.5px dashed #E6C779;}
  .got-next b{color:var(--green); font-size:18px;}
  .leaf{position:absolute; top:-30px; width:14px; height:14px; pointer-events:none; opacity:0;}

  /* 特典詳細：二層構造 */
  .rd-block{border-radius:18px; padding:15px; margin-bottom:12px;}
  .rd-block.all{background:var(--green-soft); border:1.5px solid var(--green-line);}
  .rd-block.lottery{background:#F4F2FB; border:1.5px solid #DAD3EE;}
  .rd-block.food{background:var(--gold-soft); border:1.5px solid #EAD09A;}
  .rd-head{display:flex; align-items:center; gap:9px; margin-bottom:8px;}
  .rd-head .ic{width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff;}
  .rd-head.all .ic{background:var(--green);}
  .rd-head.lottery .ic{background:#7E6BC4;}
  .rd-head.food .ic{background:var(--gold);}
  .rd-head .ic svg{width:18px; height:18px;}
  .rd-head b{font-size:15px;}
  .rd-block ul{margin:0; padding-left:20px;}
  .rd-block ul li{font-size:13.5px; color:var(--ink); margin:4px 0;}
  .rd-state{display:inline-block; margin-top:6px; font-size:12px; font-weight:800; padding:4px 12px; border-radius:999px;}
  .rd-state.ok{background:var(--green-soft); color:var(--green-deep); border:1.5px solid var(--green); font-weight:800;}
  .rd-state.lock{background:#fff; color:var(--muted); border:1.5px solid #E4E9E0;}
  .rd-state.food-on{background:#fff; color:#9A6E18; border:1.5px solid #EAD09A;}
  .rd-state.lottery-on{background:#EDE9FA; color:#5B49A8; border:1.5px solid #C9BEEC; font-weight:800;}
  .show-staff{display:block; text-align:center; margin-top:10px; font-size:12px; font-weight:800; color:#9A6E18;}
  .rd-fullnote{background:var(--green-soft); border:1.5px dashed var(--green-line); border-radius:14px; padding:13px 15px; font-size:12.5px; color:var(--green-deep); line-height:1.6; margin-top:4px;}
  .rd-fullnote b{display:block; font-size:13.5px; margin-bottom:3px;}
  .rd-notes{margin-top:12px; padding:0 4px;}
  .rd-notes p{margin:5px 0; font-size:13px; color:var(--muted); line-height:1.6;}
  .rd-place{font-size:12px; font-weight:700; color:#9A6E18; background:#FFF6E5; border-radius:10px; padding:8px 11px; margin-bottom:9px; line-height:1.5;}

  /* ミッション詳細 */
  .md-head{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
  .md-ico{width:56px; height:56px; flex:0 0 56px; border-radius:18px; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center;}
  .md-ico.done{background:var(--green); color:#fff;}
  .md-ico svg{width:30px; height:30px;}
  .md-titles{flex:1; min-width:0;}
  .md-titles h2{font-size:19px; font-weight:900; color:var(--ink);}
  .md-state{display:inline-block; margin-top:4px; font-size:12px; font-weight:800; padding:3px 11px; border-radius:999px;}
  .md-state.done{background:var(--green-soft); color:var(--green-deep);}
  .md-state.todo{background:#F1F5EF; color:var(--muted);}
  .md-detail{font-size:14.5px; color:var(--ink); line-height:1.7; background:var(--bg); border-radius:16px; padding:15px; margin:0;}
  .md-food{margin-top:12px;}
  .md-food .box{background:var(--gold-soft); border:1.5px dashed #E6C779; border-radius:16px; padding:14px; font-size:13.5px; color:#9A6E18; font-weight:700;}
  .md-food .box b{font-size:15px;}
  .md-action{margin-top:14px;}
  .md-cta{font-family:inherit; font-weight:900; font-size:16px; border:none; cursor:pointer; background:var(--green); color:#fff; padding:15px; border-radius:16px; width:100%; box-shadow:0 6px 16px rgba(62,158,99,.32); transition:transform .12s;}
  .md-cta:active{transform:scale(.98);}
  /* SNSリンク */
  .sns-pick{font-size:13.5px; font-weight:700; color:var(--green-deep); text-align:center; margin:0 0 11px;}
  .sns-pick b{color:var(--green); font-weight:900;}
  .sns-hint b{color:var(--green-deep);}
  .sns-links{display:flex; flex-direction:column; gap:9px;}
  .sns-btn{display:flex; align-items:center; gap:13px; width:100%; font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; text-decoration:none; border:1.5px solid var(--green-line); background:#fff; color:var(--ink); padding:13px 15px; border-radius:16px; transition:transform .12s, background .15s;}
  .sns-btn:active{transform:scale(.98);}
  .sns-btn .si{width:38px; height:38px; flex:0 0 38px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff;}
  .sns-btn .si svg{width:22px; height:22px;}
  .sns-btn.ig .si{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);}
  .sns-btn.tt .si{background:#111;}
  .sns-btn.xx .si{background:#111;}
  .sns-btn.ln .si{background:#06C755;}
  .sns-btn .sl{flex:1; min-width:0;}
  .sns-btn .sl b{display:block; font-size:15px;}
  .sns-btn .sl span{font-size:11.5px; color:var(--muted); font-weight:600;}
  .sns-btn .sgo{color:var(--green-light);}
  .sns-btn .sgo svg{width:18px; height:18px;}
  .sns-hint{font-size:12px; color:var(--muted); text-align:center; margin:12px 0 0; line-height:1.6;}
  /* アンケート */
  .sq{margin:0 0 18px;padding:0;border:0;min-width:0;}
  .sq .q{font-size:15px; font-weight:800; color:var(--ink); margin-bottom:9px;}
  .sq .q .no{color:var(--green); margin-right:6px;}
  .sopts{display:flex; flex-wrap:wrap; gap:8px;}
  .sopt{font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; border:1.5px solid var(--green-line); background:#fff; color:var(--ink); padding:10px 16px; border-radius:999px; transition:.15s;}
  .sopt.sel{background:var(--green); color:#fff; border-color:var(--green);}
  .sopt:disabled{cursor:default;opacity:1;}
  #surveySubmit:disabled{opacity:.55;cursor:default;}
  #surveyStatus{font-size:14px;color:var(--green-deep);line-height:1.8;}
  .survey-notice{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:18px;}

  /* スタッフ */
  .footer-links{display:flex; flex-direction:column; align-items:center; gap:14px; margin:30px 0 4px;}
  .official-link{display:inline-flex; align-items:center; gap:7px; color:var(--green-deep); font-size:14px; font-weight:800; text-decoration:none; background:var(--card); border:1.5px solid var(--green-line); padding:11px 20px; border-radius:999px; box-shadow:var(--shadow-sm);}
  .official-link svg{width:16px; height:16px; color:var(--green);}
  .official-link:active{transform:scale(.98);}
  .staff-trigger{color:#BFCFC1; font-size:11px; letter-spacing:.1em; text-decoration:none; cursor:pointer;}
  .seg{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:6px 0 14px;}
  .seg button{font-family:inherit; font-size:9.5px; font-weight:700; cursor:pointer; border:1.5px solid var(--green-line); background:#fff; color:var(--green-deep); padding:8px 2px; border-radius:11px; display:flex; flex-direction:column; align-items:center; gap:4px; line-height:1.2;}
  .seg button.active{background:var(--green); color:#fff; border-color:var(--green);}
  .seg button svg{width:17px; height:17px;}
  .staff-row{display:flex; gap:8px; margin-bottom:12px;}
  .staff-row input{flex:1; font-family:inherit; font-size:15px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--green-line); outline:none;}
  .staff-row button, .staff-btn{font-family:inherit; font-weight:800; border:none; cursor:pointer; background:var(--green); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; white-space:nowrap;}
  #qrPrintArea{text-align:center; margin:10px 0;}
  #qrcode{display:inline-block; padding:14px; background:#fff; border-radius:14px; border:1px solid var(--green-line);}
  #qrcode img, #qrcode canvas{display:block;}
  .qr-caption{font-size:13px; color:var(--ink); margin-top:8px; font-weight:700;}
  .qr-code-str{font-size:11px; color:var(--muted); margin-top:2px; word-break:break-all;}
  .staff-note{font-size:12px; color:var(--muted); background:var(--bg); border-radius:12px; padding:12px; margin-top:6px;}



  /* ===== 達成証明バッジ（スタッフ確認用） ===== */
  .verify{position:relative; overflow:hidden; border-radius:20px; padding:16px 16px 12px; margin-bottom:14px; background:linear-gradient(135deg,#43A86B,#2C7A49); color:#fff; box-shadow:0 8px 24px rgba(44,122,73,.4); animation:verifyPulse 1.8s ease-in-out infinite;}
  .verify.full{background:linear-gradient(135deg,#F0B43C,#E6932C); box-shadow:0 8px 28px rgba(230,147,44,.5);}
  @keyframes verifyPulse{0%,100%{box-shadow:0 8px 24px rgba(44,122,73,.4);}50%{box-shadow:0 8px 34px rgba(44,122,73,.65);}}
  .verify.full{animation:verifyPulseGold 1.6s ease-in-out infinite;}
  @keyframes verifyPulseGold{0%,100%{box-shadow:0 8px 28px rgba(230,147,44,.45);}50%{box-shadow:0 8px 40px rgba(230,147,44,.8);}}
  .verify-shine{position:absolute; top:0; left:-60%; width:50%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); animation:verifyShine 2.6s ease-in-out infinite;}
  @keyframes verifyShine{0%{left:-60%;}45%,100%{left:130%;}}
  .verify-badge{position:absolute; top:12px; right:14px; width:40px; height:40px; color:#FFE08A; opacity:.9; animation:badgeSpin 6s linear infinite;}
  .verify.full .verify-badge{color:#fff;}
  .verify-badge svg{width:100%; height:100%; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
  @keyframes badgeSpin{0%{transform:rotate(0) scale(1);}50%{transform:rotate(180deg) scale(1.15);}100%{transform:rotate(360deg) scale(1);}}
  .verify-main{display:flex; align-items:center; gap:13px; position:relative; z-index:2;}
  .verify-check{width:46px; height:46px; flex:0 0 46px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; color:#fff; animation:checkPop .5s cubic-bezier(.34,1.56,.64,1);}
  @keyframes checkPop{0%{transform:scale(0);}100%{transform:scale(1);}}
  .verify-check svg{width:26px; height:26px; stroke-width:3;}
  .verify-text b{display:block; font-size:21px; font-weight:900; letter-spacing:.02em; text-shadow:0 1px 3px rgba(0,0,0,.2);}
  .verify-text span{font-size:12.5px; opacity:.95;}
  .verify-lottery{position:relative; z-index:2; margin-top:11px; display:flex; flex-direction:column; align-items:center; gap:6px; background:rgba(255,255,255,.95); color:var(--green-deep); border-radius:13px; padding:11px 14px;}
  .verify.full .verify-lottery{color:#9A6E18;}
  .vl-row{display:flex; align-items:center; justify-content:center; gap:8px;}
  .vl-icon{width:24px; height:24px; flex:0 0 24px; color:inherit;}
  .vl-icon svg{width:100%; height:100%;}
  .vl-label{font-size:14px; font-weight:800;}
  .vl-count{font-size:34px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums;}
  .vl-count small{font-size:16px; font-weight:800; margin-left:2px;}
  .vl-row2{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; gap:6px;}
  .vl-spacer{}
  .vl-right{justify-self:end;}
  .vl-bonus{font-size:11px; font-weight:900; color:#fff; background:var(--gold); border-radius:999px; padding:3px 10px; white-space:nowrap;}
  .verify-clockwrap{position:relative; z-index:2; margin-top:11px; background:rgba(0,0,0,.18); border-radius:12px; padding:7px 14px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;}
  .verify-clocklabel{font-size:13px; font-weight:800; opacity:.92;}
  .verify-clock{font-size:24px; font-weight:900; letter-spacing:.06em; font-variant-numeric:tabular-nums; text-align:center;}
  .verify-note{position:relative; z-index:2; text-align:center; font-size:11px; opacity:.9; margin-top:6px;}

  /* ===== ウェルカム ===== */
  .welcome-sheet{text-align:center;}
  .wc-logo{width:88px; height:88px; margin:4px auto 14px; border-radius:50%; background:var(--green-soft); border:3px solid var(--green); display:flex; align-items:center; justify-content:center;}
  .wc-logo img{width:74%; height:74%; object-fit:contain;}
  .wc-title{font-size:22px; font-weight:900; color:var(--green-deep); line-height:1.35; margin:0 0 8px;}
  .wc-lead{color:var(--muted); font-size:14px; margin:0 0 18px;}
  .wc-list{list-style:none; padding:0; margin:0 0 20px; text-align:left; display:flex; flex-direction:column; gap:12px;}
  .wc-list li{display:flex; align-items:center; gap:13px; background:var(--bg); border-radius:16px; padding:13px 15px; font-size:14px; color:var(--ink); line-height:1.5;}
  .wc-list li b{color:var(--green-deep);}
  .wc-note{font-size:13px; color:var(--muted); line-height:1.7; margin:0 0 16px; text-align:center;}
  .wc-ic{width:40px; height:40px; flex:0 0 40px; border-radius:12px; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;}
  .wc-ic svg{width:22px; height:22px;}
  /* あそびかたボタン */
  .help-btn{display:inline-flex; align-items:center; gap:6px; margin:14px auto 0; background:var(--card); border:1.5px solid var(--green-line); color:var(--green-deep); font-family:inherit; font-weight:800; font-size:13px; padding:9px 18px; border-radius:999px; cursor:pointer; box-shadow:var(--shadow-sm);}
  .help-btn svg{width:16px; height:16px; color:var(--green);}

  /* ===== コンプリート全画面演出 ===== */
  .celebrate{position:fixed; inset:0; z-index:90; display:none; pointer-events:none;}
  .celebrate.show{display:block;}
  #confettiCanvas{position:absolute; inset:0; width:100%; height:100%;}
  .celebrate-center{position:absolute; left:50%; top:24%; transform:translate(-50%,-50%); text-align:center; opacity:0; width:100%;}
  .celebrate.show .celebrate-center{animation:ccIn .6s cubic-bezier(.34,1.56,.64,1) forwards;}
  @keyframes ccIn{0%{opacity:0; transform:translate(-50%,-50%) scale(.3);}100%{opacity:1; transform:translate(-50%,-50%) scale(1);}}
  .cc-thumb{width:128px; height:128px; margin:0 auto; border-radius:50%; background:#fff; border:4px solid var(--gold); box-shadow:0 0 0 8px rgba(230,169,60,.2), 0 12px 40px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; position:relative; z-index:2;}
  .celebrate.show .cc-thumb{animation:ccThump 1.1s ease-in-out infinite, ccShake .5s ease-in-out 3;}
  @keyframes ccThump{0%,100%{transform:scale(1) rotate(0);}25%{transform:scale(1.12) rotate(-4deg);}50%{transform:scale(1.05) rotate(3deg);}}
  @keyframes ccShake{0%,100%{margin-left:0;}20%{margin-left:-7px;}40%{margin-left:7px;}60%{margin-left:-5px;}80%{margin-left:5px;}}
  .cc-thumb img{width:74%; height:74%; object-fit:contain;}
  .cc-text{display:inline-block; margin-top:18px; font-size:28px; font-weight:900; color:#fff; letter-spacing:.04em; background:rgba(44,122,73,.82); padding:8px 22px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.3);}
  .cc-rings{position:absolute; left:50%; top:64px; transform:translate(-50%,-50%); z-index:1;}
  .cc-rings span{position:absolute; left:50%; top:50%; width:128px; height:128px; margin:-64px 0 0 -64px; border-radius:50%; border:3px solid var(--gold);}
  .celebrate.show .cc-rings span{animation:ccRing 1.4s ease-out infinite;}
  .celebrate.show .cc-rings span:nth-child(2){animation-delay:.45s;}
  .celebrate.show .cc-rings span:nth-child(3){animation-delay:.9s;}
  @keyframes ccRing{0%{transform:scale(.6); opacity:.9;}100%{transform:scale(2.6); opacity:0;}}
  /* フルコンプ(7個)はゴージャスに */
  .celebrate.full .cc-thumb{border-color:#FFCF4D; box-shadow:0 0 0 10px rgba(255,207,77,.28), 0 0 60px rgba(255,207,77,.6), 0 12px 40px rgba(0,0,0,.3); animation:ccThump 1.1s ease-in-out infinite, ccShake .4s ease-in-out 6 !important;}
  .celebrate.full .cc-text{font-size:30px; background:linear-gradient(90deg,#E6A93C,#FFCF4D); color:#5A3D00;}
  .celebrate.full .cc-rings span{border-color:#FFCF4D; border-width:4px;}
  .cc-flash{position:absolute; inset:0; background:#fff; opacity:0;}
  .celebrate.full .cc-flash{animation:ccFlash .5s ease-out;}
  @keyframes ccFlash{0%{opacity:.85;}100%{opacity:0;}}

  .toast{position:fixed; left:50%; bottom:100px; transform:translateX(-50%) translateY(20px); z-index:80; background:var(--green-deep); color:#fff; font-weight:800; font-size:15px; padding:14px 22px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; display:flex; align-items:center; gap:9px; max-width:90%;}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .toast svg{width:20px; height:20px;}
  .pin-input{width:100%; font-family:inherit; font-size:26px; text-align:center; letter-spacing:.4em; padding:14px; border-radius:14px; border:1.5px solid var(--green-line); outline:none; margin-bottom:10px;}
  .pin-error{display:none; text-align:center; color:#B0524C; font-size:13px; font-weight:700; margin-bottom:10px;}
  .danger{background:#FBEDEC !important; color:#B0524C !important;}
  .hr{height:1px; background:#EEF3EB; margin:18px 0;}
  @media print{ body *{visibility:hidden;} #qrPrintArea,#qrPrintArea *{visibility:visible;} #qrPrintArea{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;} #qrcode{transform:scale(2); margin:40px 0;} }
  .measurement-note{margin:24px 0 8px;color:#506554;font-size:13px;line-height:1.7;}
  .measurement-note summary{cursor:pointer;font-weight:700;padding:8px 0;}
  .measurement-note p{margin:8px 0;}
  .participant-card{margin:18px 0;padding:18px;background:#fff;border:2px solid #3E9E63;border-radius:18px;text-align:center;}
  .participant-card h3{font-size:17px;margin:0 0 8px;}
  .participant-card p{font-size:13px;color:#506554;}
  .participant-card code{display:block;font-family:monospace;overflow-wrap:anywhere;font-size:14px;margin-top:12px;}
  .participant-qr{width:168px;min-height:0;margin:14px auto;}
  @media (max-width:340px){.app{padding-inline:12px;}.reward{gap:9px;padding:12px;}.reward .badge{width:40px;height:40px;flex-basis:40px;}.reward .state{padding:6px 8px;}.sheet{padding-inline:16px;}.pill{padding-inline:12px;font-size:14px;}}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important;}.celebrate{display:none !important;}}