/* いちごちゃん 3Dゲーム共通UI */
:root{--k-pink:#ff5c8a;--k-pink2:#ff8fb1;--k-deep:#d6336c;--k-ink:#4a2a36;--k-cream:#fff9fb;--k-gold:#ffc53d;--k-mint:#3ddc97;--k-sky:#5cc8ff;--k-purple:#9b6bff;--k-shadow:rgba(120,30,70,.28)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:'M PLUS Rounded 1c','Zen Maru Gothic',system-ui,sans-serif;color:var(--k-ink);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;background:#ffe3ec}
canvas.k-gl{position:fixed;inset:0;width:100%!important;height:100%!important;display:block}
button{font-family:inherit}
/* 画面 */
.k-screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;z-index:20;flex-direction:column}
.k-screen.on{display:flex;animation:kFade .35s ease}
.k-screen.dim{background:linear-gradient(180deg,rgba(60,10,35,.25),rgba(60,10,35,.55));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@keyframes kFade{from{opacity:0}to{opacity:1}}
.k-card{background:rgba(255,255,255,.92);border-radius:28px;padding:22px 18px 18px;max-width:390px;width:100%;box-shadow:0 20px 60px var(--k-shadow),inset 0 0 0 2px rgba(255,255,255,.8);text-align:center;max-height:calc(100% - 12px);overflow-y:auto;touch-action:pan-y;animation:kPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes kPop{from{transform:scale(.85) translateY(20px);opacity:0}to{transform:none;opacity:1}}
/* タイトルロゴ */
.k-logo{font-weight:900;line-height:1.05;letter-spacing:.02em;font-size:clamp(34px,10vw,52px);color:#fff;text-shadow:0 3px 0 var(--k-deep),0 6px 0 #a3214f,0 12px 24px rgba(120,20,60,.45);transform:rotate(-3deg);margin:0}
.k-logo small{display:block;font-size:.36em;letter-spacing:.2em;color:#fff;text-shadow:0 2px 0 var(--k-deep);margin-bottom:6px}
.k-sub{font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(120,20,60,.5);font-size:14px;margin:12px 0 0;letter-spacing:.06em}
.k-title-bottom{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 20px}
.k-title-top{position:absolute;top:calc(8vh + env(safe-area-inset-top));left:0;right:0;text-align:center;padding:0 12px}
/* ボタン（押し込み感） */
.k-btn{position:relative;display:block;width:100%;max-width:340px;border:none;border-radius:20px;padding:15px 18px;font-weight:900;font-size:19px;letter-spacing:.06em;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,#ff7aa2,#ff4d7e);box-shadow:0 6px 0 #c42a5c,0 12px 22px rgba(196,42,92,.35);transition:transform .08s,box-shadow .08s}
.k-btn:active{transform:translateY(5px);box-shadow:0 1px 0 #c42a5c,0 4px 10px rgba(196,42,92,.3)}
.k-btn.big{font-size:23px;padding:18px;border-radius:24px}
.k-btn.white{background:linear-gradient(180deg,#fff,#ffeef4);color:var(--k-deep);box-shadow:0 5px 0 #f0b3c7,0 10px 18px rgba(196,42,92,.18)}
.k-btn.white:active{box-shadow:0 1px 0 #f0b3c7}
.k-btn.gold{background:linear-gradient(180deg,#ffd666,#ffb020);color:#6b3b00;box-shadow:0 6px 0 #c77f00,0 12px 22px rgba(199,127,0,.35)}
.k-btn.mint{background:linear-gradient(180deg,#5eeab0,#1fc47f);box-shadow:0 6px 0 #0f8f5a,0 12px 22px rgba(15,143,90,.3)}
.k-btn.sky{background:linear-gradient(180deg,#7fd6ff,#35a8f0);box-shadow:0 6px 0 #1f78b8,0 12px 22px rgba(31,120,184,.3)}
.k-btn.dark{background:linear-gradient(180deg,#3a3036,#1c1519);box-shadow:0 5px 0 #000,0 10px 18px rgba(0,0,0,.25);font-size:15px}
.k-btn.sm{font-size:14px;padding:10px 12px;border-radius:14px}
.k-row{display:flex;gap:10px;width:100%;max-width:340px}.k-row .k-btn{flex:1}
.k-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.9);border-radius:999px;padding:6px 14px;font-weight:900;font-size:14px;box-shadow:0 4px 12px var(--k-shadow)}
.k-link{color:#fff;font-weight:800;font-size:13px;text-decoration:none;text-shadow:0 1px 4px rgba(120,20,60,.6);opacity:.95}
/* HUD */
.k-hud{position:fixed;left:0;right:0;top:0;z-index:10;display:none;justify-content:space-between;align-items:flex-start;padding:calc(10px + env(safe-area-inset-top)) 12px 0;pointer-events:none;gap:8px}
.k-hud.on{display:flex}
.k-hud .k-chip{pointer-events:auto}
.k-score{font-weight:900;font-size:44px;line-height:1;color:#fff;text-shadow:0 3px 0 var(--k-deep),0 8px 20px rgba(120,20,60,.4);text-align:center}
.k-iconbtn{pointer-events:auto;width:44px;height:44px;border-radius:14px;border:none;background:rgba(255,255,255,.9);box-shadow:0 4px 0 #f0b3c7;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.k-iconbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #f0b3c7}
/* ポップ文字 */
.k-pop{position:fixed;z-index:30;transform:translate(-50%,-50%);font-weight:900;font-size:26px;color:#fff;text-shadow:0 2px 0 var(--k-deep),0 4px 12px rgba(120,20,60,.5);pointer-events:none;animation:kPopUp 1.1s ease-out forwards;white-space:nowrap}
.k-pop.gold{color:#ffe07a;text-shadow:0 2px 0 #b36b00,0 4px 12px rgba(150,80,0,.5)}
.k-pop.big{font-size:40px}
.k-pop.bad{color:#bfc6ff;text-shadow:0 2px 0 #5058a8}
@keyframes kPopUp{0%{transform:translate(-50%,-30%) scale(.4);opacity:0}15%{transform:translate(-50%,-50%) scale(1.25);opacity:1}30%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-140%) scale(1);opacity:0}}
.k-banner{position:fixed;left:0;right:0;top:32%;z-index:31;text-align:center;pointer-events:none;animation:kBan 1.7s cubic-bezier(.2,1.4,.4,1) forwards}
.k-banner b{display:block;font-size:clamp(40px,13vw,66px);font-weight:900;color:#fff;text-shadow:0 4px 0 var(--k-deep),0 8px 0 #a3214f,0 14px 30px rgba(120,20,60,.5);transform:rotate(-4deg)}
.k-banner small{display:block;font-weight:900;color:#fff;font-size:16px;margin-top:8px;text-shadow:0 2px 6px rgba(120,20,60,.6)}
.k-banner.gold b{color:#ffe07a;text-shadow:0 4px 0 #c77f00,0 8px 0 #8a5200,0 14px 30px rgba(150,80,0,.45)}
@keyframes kBan{0%{transform:scale(2.2);opacity:0}18%{transform:scale(1);opacity:1}80%{transform:scale(1);opacity:1}100%{transform:scale(.9) translateY(-30px);opacity:0}}
#k-toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:rgba(40,20,30,.88);color:#fff;font-weight:800;font-size:14px;padding:10px 18px;border-radius:999px;z-index:40;opacity:0;transition:.3s;pointer-events:none;white-space:nowrap}
#k-toast.on{opacity:1;transform:translate(-50%,0)}
/* 結果 */
.k-res-h{font-size:15px;font-weight:900;color:var(--k-deep);letter-spacing:.2em}
.k-res-num{font-size:64px;font-weight:900;line-height:1.05;background:linear-gradient(180deg,#ff7aa2,#d6336c);-webkit-background-clip:text;background-clip:text;color:transparent}
.k-best{display:inline-block;font-weight:900;font-size:13px;background:linear-gradient(90deg,#ffd666,#ff8fb1);color:#fff;border-radius:999px;padding:4px 14px;margin-top:4px;text-shadow:0 1px 2px rgba(150,60,0,.4)}
.k-best.new{animation:kGlow 1s ease-in-out infinite alternate}
@keyframes kGlow{from{box-shadow:0 0 0 rgba(255,200,80,.0)}to{box-shadow:0 0 20px rgba(255,200,80,.9)}}
.k-pose{width:120px;height:120px;object-fit:contain;display:block;margin:0 auto 4px;filter:drop-shadow(0 6px 10px rgba(160,60,100,.25));animation:kFloat 2.4s ease-in-out infinite}
@keyframes kFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.k-box{background:#fff4f8;border-radius:18px;padding:10px 12px;margin-top:12px;text-align:left}
.k-box h4{margin:0 0 6px;font-size:13px;color:var(--k-deep);letter-spacing:.06em}
.k-mis{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:5px 0}
.k-mis i{width:20px;height:20px;border-radius:50%;border:2px solid #f0b3c7;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;color:#fff;flex:none}
.k-mis.done i{background:var(--k-mint);border-color:var(--k-mint)}
.k-mis span{flex:1}.k-mis em{font-style:normal;font-size:12px;color:#b27a8f}
.k-mis.done span{color:#9a8a90;text-decoration:line-through}
.k-stats{display:flex;gap:8px;margin-top:10px}
.k-stats div{flex:1;background:#fff4f8;border-radius:14px;padding:8px 4px}
.k-stats b{display:block;font-size:20px;font-weight:900;color:var(--k-deep)}
.k-stats span{font-size:11px;font-weight:700;color:#b27a8f}
.k-hint{font-size:12px;color:#9a7584;font-weight:700;margin-top:8px;line-height:1.6}
.k-center-msg{position:fixed;left:0;right:0;bottom:calc(18% + env(safe-area-inset-bottom));text-align:center;z-index:9;pointer-events:none;font-weight:900;color:#fff;font-size:18px;text-shadow:0 2px 8px rgba(120,20,60,.6);animation:kBlink 1.2s ease-in-out infinite}
@keyframes kBlink{50%{opacity:.35}}
.k-load{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;background:#ffe3ec;transition:opacity .5s}
.k-load.off{opacity:0;pointer-events:none}
.k-load i{width:48px;height:48px;border-radius:50%;border:5px solid #ffc2d4;border-top-color:var(--k-pink);animation:kSpin .8s linear infinite}
@keyframes kSpin{to{transform:rotate(360deg)}}