@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Russo+One&display=swap'); *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* 初始尺寸用 vw/vh；實際尺寸由 JS 在 resize/orientationchange 時 主動讀取 window.innerWidth/innerHeight 並覆寫為 px， 避免某些 Android 瀏覽器在橫向切換瞬間 viewport 單位寬高互換的 bug */ html,body{width:100vw;height:100vh;overflow:hidden;background:#000;font-family:system-ui,sans-serif;color:#fff} /* ── 旋轉提示遮罩：直向時顯示，橫向時隱藏，蓋住整個遊戲畫面 ── */ #rotate-hint{ display:none;position:fixed;inset:0;z-index:999; background:linear-gradient(160deg,#0d0020,#1a0040,#0d0020); flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:24px;gap:18px; } #rotate-hint .ri-icon{font-size:64px;animation:riRotate 1.6s ease-in-out infinite} #rotate-hint .ri-text{font-size:15px;font-weight:700;letter-spacing:.08em;line-height:1.8; color:rgba(255,255,255,.85)} #rotate-hint .ri-sub{font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.1em} @keyframes riRotate{ 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(90deg)} } /* CSS media query 作為初始 fallback；實際判定由 JS 在 resize 時 依 window.innerWidth/innerHeight 比較後，加上 .force-portrait / .force-landscape class 到 上做最終覆蓋（優先權更高）。 */ @media (orientation: portrait){ #rotate-hint{display:flex} #game-root{display:none} } html.force-landscape #rotate-hint{display:none !important} html.force-landscape #game-root{display:block !important} html.force-portrait #rotate-hint{display:flex !important} html.force-portrait #game-root{display:none !important} /* 按鈕影片層（chromakey後的按鈕，純視覺，不接收事件） canvas 內部繪圖緩衝區固定 360x360（正方形）。 實際 width/height/left/bottom 由 JS 的 applyViewportFix() 直接算 px 設定， 完全避開 vmin/vw/vh/% 在某些瀏覽器橫向切換時計算錯誤的問題。 這裡的值僅作為 JS 執行前極短暫的初始 fallback。 */ #btn-canvas{position:fixed;left:50%;bottom:2%;transform:translateX(-50%);z-index:14;display:none; cursor:pointer;touch-action:none;width:180px;height:180px;transition:transform .08s; pointer-events:none} #btn-canvas.flick{} #btn-canvas.pressed{transform:scale(0.92) !important} /* 觸控熱區層：撐滿整個遊戲畫面的透明 div，實際接收 touch/mouse 事件。 TAP/FLICK 進行中顯示；結算時隱藏，避免擋住 #result-card 的熱區（z-index:21）。 z-index 介於 #btn-canvas(14) 與 #result-card(21) 之間。 */ #touch-layer{position:fixed;inset:0;z-index:16;display:none; cursor:pointer;touch-action:none;background:transparent} /* ── 影片層 ── */ #vid-bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:none} #vid-ck{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;display:none;pointer-events:none} #cvs-ck{position:fixed;inset:0;width:100%;height:100%;z-index:3;display:none;pointer-events:none} /* ── 畫面 ── */ .screen{display:none;position:fixed;inset:0;z-index:10;flex-direction:column;align-items:center;justify-content:center;padding:20px} .screen.on{display:flex} /* ── INTRO ── */ #s-intro{background:linear-gradient(160deg,#0d0020,#1a0040,#0d0020)} .badge{font-size:11px;letter-spacing:.26em;color:#f0c060;border:1px solid rgba(240,192,96,.3);padding:5px 16px;border-radius:100px;margin-bottom:20px} .title{font-size:32px;font-weight:900;background:linear-gradient(135deg,#FF2D95,#B24BF3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px} .sub{font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.12em;margin-bottom:28px} .desc-box{background:rgba(255,45,149,.07);border:1px solid rgba(255,45,149,.2);border-radius:14px;padding:14px 20px;max-width:300px;font-size:13px;line-height:1.9;color:rgba(255,255,255,.6);text-align:center;margin-bottom:32px} .desc-box span{color:#FF2D95;font-weight:700} .btn-start{background:linear-gradient(135deg,#FF2D95,#B24BF3);border:none;border-radius:50px;padding:15px 48px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 0 30px rgba(255,45,149,.5);letter-spacing:.1em} /* ── 對戰中通用 ── */ /* HP 條固定在頂部 */ #hud{position:fixed;top:0;left:0;right:0;z-index:20;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 70%,transparent 100%); padding:calc(env(safe-area-inset-top,0px) + 14px) 14px 24px;display:none} .hud-row1{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px} .hud-name{font-size:10px;font-weight:700;letter-spacing:.12em} .hud-round{font-size:9px;color:#f0c060;letter-spacing:.2em;text-align:center} .hud-timer-row{text-align:center;margin-bottom:8px} .hud-timer{display:inline-block;font-family:monospace;font-size:22px;font-weight:900;line-height:1; padding:2px 14px;border-radius:8px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);min-width:54px} .hp-bar-wrap{flex:1;height:8px;background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden;margin:0 8px} .hp-bar-fill{height:100%;border-radius:8px;transition:width .2s} /* COMBO（SVG 三階段變色） top/right 由 JS 的 applyViewportFix() 直接算 px 設定（避開 % 計算問題）。 這裡僅作初始 fallback；用 scale 整體縮小避免在矮螢幕溢出。 */ #combo{position:fixed;top:24px;right:8px;z-index:22;pointer-events:none;display:none; transform-origin:top right;transform:scale(0.75)} #combo-burst{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);width:200px;height:200px;z-index:0;opacity:.5;animation:cbspin 9s linear infinite;filter:blur(1px)} @keyframes cbspin{to{transform:translate(-50%,-55%) rotate(360deg)}} #combo-svg{position:relative;z-index:1;overflow:visible;transform:rotate(-5deg)} #combo-svg text{font-family:'Bungee',sans-serif;font-style:italic;paint-order:stroke fill;stroke-linejoin:round} /* FLICK 進度 */ #flick-dots{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);z-index:20;pointer-events:none; display:none;gap:8px} .fdot{width:36px;height:7px;border-radius:7px;background:rgba(255,255,255,.1);transition:background .3s} .fdot.done{background:linear-gradient(90deg,#FF2D95,#B24BF3);box-shadow:0 0 8px rgba(255,45,149,.5)} /* FLICK 結果 */ #flick-result{position:fixed;inset:0;z-index:25;display:none;align-items:center;justify-content:center;pointer-events:none} /* WIN/LOSE 結算卡片 */ /* ── WIN/LOSE 結算疊加層：座標為估算值，依 Image3 截圖比例設定 ── */ #result-card{position:fixed;inset:0;z-index:21;display:none} /* 折扣碼：疊在影片左側、85折圖示下方留白區（WIN專用，LOSE時隱藏） */ .result-code-box{ position:absolute;left:4%;top:48%;width:34%; display:flex;justify-content:space-between;align-items:center; background:rgba(255,255,255,.08);border:1px dashed rgba(240,192,96,.4); border-radius:8px;padding:8px 12px;cursor:pointer; } .result-code-box #discount-code{font-size:clamp(12px,1.6vw,16px);font-weight:700;letter-spacing:.1em;color:#fff} .result-code-box #copy-hint{font-size:clamp(10px,1.2vw,12px);color:#f0c060;margin-left:8px;flex-shrink:0} #result-card.lose .result-code-box{display:none} /* EXP / 好感度：疊在折扣碼下方 */ .result-stats{position:absolute;left:4%;top:60%;width:34%; background:rgba(0,0,0,.35);border-radius:8px;padding:8px 12px} .exp-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .exp-label{font-size:clamp(11px,1.4vw,13px);color:#f0c060;font-weight:700} .exp-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden;margin:0 10px} .exp-bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#f0c060,#ffaa00);width:20%} .exp-val{font-size:clamp(9px,1.1vw,11px);color:rgba(255,255,255,.5)} .like-row{display:flex;align-items:center;gap:6px;font-size:clamp(11px,1.4vw,13px);color:rgba(255,255,255,.6)} #like-val{font-weight:700;margin-left:auto} /* 三個透明熱區：疊在 winUI/loseUI 影片自帶的「返回地圖／再來一局／領取獎勵」按鈕上 估算：水平 45%~83%，垂直 83%~95%，三等分（每個約12.7%寬） */ .result-hotzone{position:absolute;top:83%;height:12%;width:12.7%; /* 開發時可暫時打開背景色檢查對位，正式上線改為 transparent */ background:transparent;cursor:pointer} #hotzone-left {left:45.0%} #hotzone-mid {left:57.7%} #hotzone-right{left:70.4%} /* 動畫 */ @keyframes bigIn{0%{opacity:0;transform:scale(2.2)}50%{opacity:1;transform:scale(.9)}100%{opacity:1;transform:scale(1)}} @keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}} @keyframes sparks{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}} @keyframes fly{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes comboHit{ 0%{transform:rotate(-5deg) scale(1)} 30%{transform:rotate(-5deg) scale(1.3)} 60%{transform:rotate(-5deg) scale(0.9)} 100%{transform:rotate(-5deg) scale(1)} } .shaking{animation:shk .34s ease} #sparks-wrap{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}