[hidden]{display:none!important}
:root{--ink:#1b1b1b;--card:#b98b55;--red:#c42a1e;--night:#231e2e}
*{box-sizing:border-box;margin:0;padding:0}
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--night);height:100%}
body{height:100%;overflow:hidden;color:var(--ink);font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-weight:700;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button,a{font-family:inherit;color:inherit;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
button{border:0;background:none}
#view{position:fixed;inset:0;width:100vw;height:100svh;display:block;touch-action:none}
#flash{position:fixed;inset:0;pointer-events:none;background:#fff;opacity:0;z-index:15}
main{position:fixed;inset:0;height:100svh;overflow:hidden;z-index:3}

/* タイトル: 段ボールに油性ペンの看板 */
#vTitle{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 3svh) 16px calc(env(safe-area-inset-bottom) + 4svh);pointer-events:none;background:linear-gradient(rgba(20,16,30,.25),rgba(20,16,30,0) 40%,rgba(20,16,30,0) 58%,rgba(20,16,30,.62))}
#vTitle button{pointer-events:auto}
.board{position:relative;margin-left:2vw;padding:14px 20px 16px;width:min(80vw,320px);transform:rotate(-3deg);background:#c09160;
  background-image:repeating-linear-gradient(90deg,rgba(110,70,30,.16) 0 2px,transparent 2px 9px);box-shadow:0 10px 22px rgba(0,0,0,.45);clip-path:polygon(0 2%,6% 0,52% 1.5%,100% 0,99% 55%,100% 100%,40% 98.5%,1% 100%)}
.board p{font-family:"Yusei Magic",sans-serif;font-size:clamp(15px,4.3vw,18px);color:#3b2a18;letter-spacing:.06em}
.board h1{font-family:"Reggae One",sans-serif;font-weight:400;white-space:pre-line;font-size:clamp(38px,11.5vw,50px);line-height:1.08;color:#141414;margin-top:4px}
html[lang=en] .board h1{font-size:clamp(32px,9.4vw,42px)}
html[lang=en] #outLine{font-size:clamp(26px,8vw,44px)}
.tape{position:absolute;width:74px;height:22px;background:rgba(236,226,196,.82);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tape.a{left:-22px;top:-4px;transform:rotate(-38deg)}.tape.b{right:-18px;bottom:10px;transform:rotate(-34deg)}
.tsub{font-family:"Yusei Magic",sans-serif;font-size:clamp(15px,4.4vw,18px);color:#fff;background:rgba(20,16,30,.72);padding:5px 12px;border-radius:4px;text-wrap:balance;word-break:keep-all;max-width:92vw}
.tbtns{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.tbtns .row{display:flex;gap:10px}
/* いちばん押してほしいボタンだけ厚み */
.go{font-family:"Yusei Magic",sans-serif;font-size:23px;min-width:230px;min-height:60px;padding:0 28px;border-radius:8px;background:#f4e3c0;color:#1b1b1b;box-shadow:0 6px 0 #7a5530,0 9px 16px rgba(0,0,0,.4);position:relative}
.go:active{transform:translateY(5px);box-shadow:0 1px 0 #7a5530}
.small{font-size:15px;min-height:42px;padding:0 16px;border-radius:4px;background:rgba(20,16,30,.7);color:#f4eee2;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(244,238,226,.35)}

/* 遊び方: ライブのチラシ */
#vHow{display:flex;align-items:center;justify-content:center;background:rgba(14,12,20,.66);padding:16px}
.flyer{background:#f7f2e4;width:min(400px,100%);max-height:calc(100svh - 32px);padding:16px 16px 10px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 26px rgba(0,0,0,.45);transform:rotate(.6deg)}
.flyer h2{font-family:"Yusei Magic",sans-serif;font-size:26px;font-weight:400}
#howRules{list-style:none;display:flex;flex-direction:column;gap:10px}
#howRules li{display:flex;align-items:center;gap:10px;font-size:clamp(12.5px,3.6vw,14.5px);line-height:1.38;font-weight:700;color:#333}
#howRules img{flex:none;width:clamp(48px,14vw,62px);height:clamp(58px,17vw,74px);object-fit:contain}
#howRules b{display:block;font-family:"Yusei Magic",sans-serif;font-weight:400;font-size:clamp(17px,5vw,20px);color:var(--red)}
.flyer .warn{font-family:"Reggae One",sans-serif;font-weight:400;font-size:22px;line-height:1.3;text-align:center;color:#141414}
.small2{font-size:19px;min-height:50px;min-width:160px;align-self:center}
.foot{word-break:keep-all;display:flex;flex-direction:column;align-items:center;font-size:10.5px;color:#6e665a;text-align:center;line-height:1.35;font-weight:500}
.foot a{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;color:#2c4f78;font-size:13px}

/* 遊び中 */
#vPlay{pointer-events:none}
/* 相手: 顔と我慢の輪 */
#who{position:absolute;left:10px;top:calc(env(safe-area-inset-top) + 8px);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 150px)}
#who .face{position:relative;flex:none;width:64px;height:64px}
#who .face img{position:absolute;left:6px;top:6px;width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:#efe6d6}
#who.phone .face img{background:#dfe7ef}
#who .face svg{position:absolute;inset:-2px;width:68px;height:68px}
#who.angry .face{animation:jit .18s linear infinite}
@keyframes jit{50%{transform:translate(1px,-1px)}}
#who .meta{display:flex;flex-direction:column;color:#fff;text-shadow:0 1px 0 #000,0 0 6px rgba(0,0,0,.8);line-height:1.15}
#who b{font-size:15px}
#who span{font-family:"Yusei Magic",sans-serif;font-size:13px;opacity:.9}
#who em{font-style:normal;font-size:12px;opacity:.85}
/* 見つかった回数: ギターのピック3枚 */
#picks{position:absolute;right:62px;top:calc(env(safe-area-inset-top) + 18px);display:flex;gap:4px}
#picks i{display:block;width:20px;height:24px;background:#f2c94c;clip-path:path('M10 0C4 0 0 3 0 7c0 6 5 12 10 17C15 19 20 13 20 7 20 3 16 0 10 0z')}
#picks i:nth-child(2){background:#e0583a}#picks i:nth-child(3){background:#4aa0d8}
#picks i.lost{background:#3a3440;opacity:.55;transform:rotate(25deg) translateY(4px)}
.bubble{position:absolute;left:0;top:0;background:#fffdf4;color:#141414;font-size:clamp(16px,4.7vw,19px);line-height:1.25;padding:6px 12px;border-radius:16px;border:2.5px solid #141414;width:max-content;max-width:min(78vw,300px);white-space:normal;animation:pop .16s ease-out;z-index:3;word-break:keep-all;overflow-wrap:anywhere}
.bubble::after{content:"";position:absolute;left:var(--tail,50%);bottom:-12px;margin-left:-7px;border:7px solid transparent;border-top:9px solid #141414}
.bubble.up::after{bottom:auto;top:-12px;border-top-color:transparent;border-bottom:9px solid #141414}
.bubble.lyric{font-family:"Yusei Magic",sans-serif;font-weight:400;border-style:dashed;background:#fff8e6}
.bubble.loud{font-family:"Reggae One",sans-serif;font-weight:400;background:#ffe14a;border-width:3px;border-radius:4px;font-size:clamp(18px,5.4vw,23px);transform:rotate(-2deg)}
.bubble.angry{background:#fff;border-color:#b3241c;color:#b3241c}
.bubble.yell{font-family:"Reggae One",sans-serif;font-weight:400;font-size:clamp(22px,7vw,30px);background:#fff;border-width:3px}
.bubble.pat{background:#eaf2fb;border-color:#2c4f78;color:#1e3a5c}
.bubble.pat.done{background:#e9f6e6;border-color:#2f7a3a;color:#1f5a2a}
.bubble.pat.ng{background:#f3eeee;border-color:#555;color:#444}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.hint{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 238px);text-align:center;font-size:clamp(20px,5.8vw,25px);line-height:1.25;color:#fff;text-shadow:0 2px 0 #000,0 0 10px #000,0 0 3px #000;white-space:pre-line;z-index:4}
/* 場面の札: 駅の案内板 */
#card2{position:absolute;left:50%;top:34svh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 22px 12px;background:#173a6a;color:#fff;border-radius:3px;box-shadow:0 0 0 3px #d9e2ee inset,0 8px 20px rgba(0,0,0,.45);animation:card .35s ease-out;white-space:nowrap}
#card2 b{font-size:clamp(26px,8vw,34px);letter-spacing:.06em}
#card2 span{font-size:clamp(16px,4.8vw,20px)}
@keyframes card{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
/* 話すボタンと、言う言葉（カンペ） */
.talkbar{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 12px);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
#words{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;max-width:94vw;padding:6px 10px;background:#fbf8ef;border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,.4);transform:rotate(-1deg)}
#words span{position:relative;font-size:clamp(16px,4.8vw,20px);color:#6f685c;padding:0 2px 3px}
#words span i{position:absolute;left:0;right:0;bottom:0;height:4px;background:#c42a1e;transform-origin:0 50%;transform:scaleX(0)}
#words span.now{color:#141414}
#words span.said{color:#2c4f78}
#words span.said i{background:#2c4f78}
#words.loud span.now{font-family:"Reggae One",sans-serif;font-weight:400}
#talk{pointer-events:auto;touch-action:none;width:clamp(104px,30vw,124px);height:clamp(104px,30vw,124px);border-radius:50%;background:#efe4cd;color:#2a2018;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 7px 0 #6e4a28,0 10px 18px rgba(0,0,0,.45);transition:background .12s;-webkit-user-select:none;user-select:none}
#talk svg{width:42px;height:42px}
#talk span{font-size:clamp(14px,4vw,16px)}
#talk.down{transform:translateY(5px);box-shadow:0 2px 0 #6e4a28,0 4px 8px rgba(0,0,0,.4)}
#talk.loud{background:#ffe14a}
#talk.loud span{font-family:"Reggae One",sans-serif;font-weight:400;font-size:clamp(17px,5vw,20px)}
#talk.off{opacity:.55}
#talk.wind{background:#e0402c;color:#fff;animation:wob .16s linear infinite}
@keyframes wob{50%{transform:rotate(3deg)}}
#talk.danger{background:#e86a52;color:#fff}
#eye{position:absolute;width:62px;height:40px;margin:-46px 0 0 -31px;z-index:4;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
#eye svg{width:100%;height:100%}
#eye[data-k=near]{animation:blink .3s steps(2) infinite}
#eye[data-k=hit] path{fill:#ff5a3c}
#eye[data-k=hit]{transform:scale(1.25)}
@keyframes blink{50%{opacity:.25}}
.flyer .ui{font-size:12px;color:#444;text-align:center;line-height:1.4}

/* 追い出しの大ゴマ */
#outPanel{position:fixed;inset:0;z-index:12;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f5e9d0;pointer-events:none}
#outPanel .lines{position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg at 50% 44%,#141414 0 1.3deg,transparent 1.3deg 4.2deg);opacity:.9;animation:lines 2.4s linear infinite}
@keyframes lines{to{transform:rotate(5deg)}}
#outImg{position:relative;height:min(54svh,104vw);max-width:94vw;object-fit:contain;transform-origin:50% 90%}
#outLine{position:relative;white-space:pre-line;max-width:94vw;font-family:"Reggae One",sans-serif;font-size:clamp(30px,10.4vw,58px);line-height:1.05;color:#fff;text-align:center;-webkit-text-stroke:3px #141414;paint-order:stroke;text-shadow:5px 5px 0 #c42a1e;margin-top:-2svh;transform:rotate(-4deg)}
#outSub{position:relative;font-size:clamp(14px,4vw,17px);color:#141414;background:#fff;padding:2px 10px;margin-top:10px;border:2px solid #141414}
#outSub:empty{display:none}
#outPanel.on #outImg{animation:slam .4s cubic-bezier(.2,1.6,.4,1) both}
#outPanel.on #outLine{animation:slamT .35s .12s cubic-bezier(.2,1.5,.4,1) both}
@keyframes slam{from{transform:scale(1.8) rotate(6deg);opacity:0}to{transform:none;opacity:1}}
@keyframes slamT{from{transform:scale(2.4) rotate(-4deg);opacity:0}to{transform:rotate(-4deg);opacity:1}}
#outPanel.away{animation:away .6s ease-in forwards}
@keyframes away{to{opacity:0;transform:scale(1.15)}}

#bMute{position:fixed;z-index:6;right:12px;top:calc(env(safe-area-inset-top) + 10px);width:42px;height:42px;border-radius:21px;background:rgba(20,16,30,.55);color:#fff;display:flex;align-items:center;justify-content:center}
#bMute svg{width:24px;height:24px}
#bMute.off #mWave{display:none}#bMute:not(.off) #mX{display:none}

/* 結果: 段ボールに貼ったセットリスト */
#vResult{background:#2a2433;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 6px);gap:8px}
#card{flex:none;display:block;box-shadow:0 8px 22px rgba(0,0,0,.5)}
.cardbox{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.rbtns{display:flex;gap:12px;flex:none}
.rrow{display:flex;flex:none}
#vResult .go{min-height:52px;font-size:20px}

/* 読み込み: ギターの弦が震える */
#boot{position:fixed;inset:0;z-index:20;background:var(--night);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .4s;color:#f2e6cf}
#boot.gone{opacity:0;pointer-events:none}
#boot svg{width:170px;transform:rotate(-8deg)}
#boot .strings{animation:buzz .09s linear infinite}
@keyframes buzz{50%{transform:translateY(.8px)}}
#boot p{font-family:"Yusei Magic",sans-serif;font-size:18px}
.boot-bar{width:160px;height:3px;background:rgba(255,255,255,.15);overflow:hidden}
.boot-bar i{display:block;height:100%;background:#f2c94c;transform:scaleX(0);transform-origin:0 50%;transition:transform .25s}
#bootErr{position:fixed;left:8px;right:8px;bottom:8px;z-index:30;background:#fff;color:#b00;font:12px/1.4 monospace;white-space:pre-wrap;padding:10px;border-radius:8px}
@media (max-height:700px){
  .board{padding:10px 16px 12px}.go{min-height:52px}
  #howRules img{width:44px;height:52px}.flyer{gap:6px;padding:12px 14px 8px}
  #howRules li{font-size:12px}
  #talk{width:96px;height:96px}#talk svg{width:34px;height:34px}
  #card2{top:30svh}
  .hint{bottom:calc(env(safe-area-inset-bottom) + 214px)}
}

/* いたずらの的（見ていない隙に触れる機材）・疑いの？・しゃべっている通行人 */
#tmarks{position:absolute;inset:0;pointer-events:none}
#tmarks i{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2.5px dashed rgba(255,255,255,.9);box-shadow:0 0 0 2px rgba(0,0,0,.35);animation:tm 1.4s ease-in-out infinite}
#tmarks i.npc{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:rgba(255,255,255,.45)}
#tmarks i.npc.talk{border-color:#ffe14a;border-style:solid;animation-duration:.5s}
@keyframes tm{50%{transform:scale(1.15)}}
#sus{position:absolute;font-family:"Reggae One",sans-serif;font-size:26px;color:#ffe14a;-webkit-text-stroke:2px #141414;paint-order:stroke;transform:translate(-50%,-100%) rotate(8deg);z-index:3;letter-spacing:-.1em}
#chat{position:absolute;width:40px;height:24px;transform:translate(0,-100%);z-index:3;filter:drop-shadow(0 1px 2px #000);animation:tm .3s linear infinite}
#chat svg{width:100%;height:100%}