:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans TC", sans-serif;
  color: #f8fafc;
  background: #050914;
  --lime: #dfff63;
  --blue: #74dfff;
  --glass: rgba(7, 12, 25, .58);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { min-width: 320px; background: #050914; }
button { color: inherit; font: inherit; }

.ar-app, .camera-stage { position: relative; width: 100%; height: 100%; height: 100dvh; overflow: hidden; }
.camera-stage { isolation: isolate; background: radial-gradient(circle at center, #172341, #050914 68%); }
#webcam, #outputCanvas, .camera-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
#webcam, #outputCanvas { object-fit: cover; transform: scaleX(-1); }
#outputCanvas { pointer-events: none; z-index: 2; }
.camera-vignette { z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(3,7,17,.76), transparent 23%, transparent 62%, rgba(3,7,17,.86)), radial-gradient(circle, transparent 38%, rgba(3,7,17,.28) 100%); }
.ar-app.is-environment #webcam, .ar-app.is-environment #outputCanvas { transform: none; }

.camera-placeholder { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); text-align: center; background: radial-gradient(circle at 50% 35%, #1c315f 0, #0b1429 30%, #050914 68%); }
.camera-placeholder::before { content: ""; position: absolute; width: min(70vw, 540px); aspect-ratio: 1; border: 1px solid rgba(116,223,255,.14); border-radius: 50%; box-shadow: 0 0 0 45px rgba(116,223,255,.025), 0 0 0 100px rgba(116,223,255,.018); }
.placeholder-mark { position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 26px; font-size: clamp(48px, 10vw, 76px); filter: drop-shadow(0 15px 25px rgba(0,0,0,.35)); }
.placeholder-mark i { color: var(--blue); font-size: 12px; font-style: normal; font-weight: 900; letter-spacing: .16em; }
.camera-placeholder .eyebrow { position: relative; margin: 0 0 10px; color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.camera-placeholder h1 { position: relative; margin: 0; font-size: clamp(34px, 7vw, 62px); line-height: 1.08; letter-spacing: -.065em; }
.camera-placeholder p:not(.eyebrow) { position: relative; margin: 16px 0 26px; color: #a9b7d1; font-size: 13px; }
.start-button { position: relative; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 14px 23px; color: #101722; background: var(--lime); box-shadow: 0 10px 35px rgba(223,255,99,.22); cursor: pointer; font-weight: 900; transition: transform .2s, opacity .2s; }
.start-button:hover:not(:disabled) { transform: translateY(-2px) scale(1.02); }
.start-button:disabled { cursor: wait; opacity: .65; }
.camera-icon { width: 15px; height: 11px; border: 2px solid currentColor; border-radius: 3px; }
.camera-icon::after { content: ""; display: block; width: 4px; height: 4px; margin: 1.5px auto; border: 1.5px solid currentColor; border-radius: 50%; }

.top-hud { position: absolute; z-index: 10; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: max(17px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left)); pointer-events: none; }
.brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 900; letter-spacing: -.03em; pointer-events: auto; }
.brand-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #101722; background: var(--lime); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.status { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 99px; padding: 7px 10px; color: #d6deed; background: var(--glass); backdrop-filter: blur(14px); font-size: 10px; font-weight: 800; }
.status i { width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #96a1b8; }
.status-live i { background: #67efa2; box-shadow: 0 0 10px #67efa2; }
.status-error { color: #ffd0c8; }.status-error i { background: #ff766f; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: var(--glass); backdrop-filter: blur(14px); cursor: pointer; pointer-events: auto; }
.icon-button[hidden] { display: none; }
.icon-button:disabled { opacity: .45; cursor: wait; }
.icon-button svg { width: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }

.score-hud { position: absolute; z-index: 9; top: max(74px, calc(env(safe-area-inset-top) + 66px)); left: 50%; display: grid; grid-template-columns: 70px 82px 70px; align-items: center; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 8px 13px; background: rgba(5,9,20,.62); box-shadow: 0 10px 30px rgba(0,0,0,.22); backdrop-filter: blur(16px); text-align: center; }
.score-hud div { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.score-hud span { color: #9faec8; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.score-hud strong { font-size: clamp(30px, 4vw, 38px); line-height: .9; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px currentColor; }
.score-hud .player-score strong { color: #69d8ff; }
.score-hud .computer-score strong { color: #ff6478; }
.score-hud .score-pop { animation: score-pop .75s cubic-bezier(.15,.9,.3,1.45); }
.round-counter { border-right: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); }
.round-counter span { color: var(--lime); font-size: 9px; }.round-counter small { display: none; }
.score-hud .draw-count { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; color: rgba(255,255,255,.55); font-size: 8px; }

.gesture-badge { position: absolute; z-index: 8; left: max(18px, env(safe-area-inset-left)); top: 50%; display: none; flex-direction: column; gap: 2px; transform: translateY(-50%); border-left: 2px solid var(--lime); padding: 7px 10px; background: linear-gradient(90deg, rgba(5,9,20,.68), transparent); text-shadow: 0 2px 10px #000; }
.gesture-badge span, .ar-label { color: #c0cbdd; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.gesture-badge strong { color: var(--lime); font-size: 18px; }

.computer-ar { --ar-x: 72%; --ar-y: 46%; position: absolute; z-index: 7; left: var(--ar-x); top: var(--ar-y); display: grid; justify-items: center; width: 144px; transform: translate(-50%, -50%) scale(.5); opacity: 0; pointer-events: none; transition: left .22s ease-out, top .22s ease-out, transform .38s cubic-bezier(.2,.9,.25,1.3), opacity .25s; }
.computer-ar.is-visible { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.computer-ar::before, .computer-ar::after { content: ""; position: absolute; inset: 13px; z-index: -1; border: 1px solid rgba(116,223,255,.58); border-radius: 50%; animation: ar-ring 1.8s linear infinite; }
.computer-ar::after { inset: 3px; border-style: dashed; animation-direction: reverse; animation-duration: 5s; }
.computer-hand { display: grid; place-items: center; width: clamp(92px, 16vw, 130px); aspect-ratio: 1; border: 1px solid rgba(116,223,255,.65); border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(67,145,194,.74), rgba(8,22,43,.8) 68%); box-shadow: inset 0 0 25px rgba(116,223,255,.25), 0 0 35px rgba(52,175,233,.28); font-size: clamp(48px, 8vw, 68px); }
.computer-hand span { display: inline-block; line-height: 1; will-change: transform; }
.computer-ar strong { margin-top: 10px; border-radius: 99px; padding: 5px 9px; background: rgba(5,9,20,.65); text-shadow: 0 2px 8px #000; font-size: 11px; }
.ar-app.is-revealing .computer-ar { animation: ar-charge .7s ease-in-out infinite alternate; }
.ar-app.is-revealing .computer-hand span { animation: cpu-fist-shake .3s ease-in-out infinite alternate; }
.ar-app.result-computer .computer-hand { border-color: #ff7f8d; box-shadow: inset 0 0 25px rgba(255,91,111,.35), 0 0 45px rgba(255,91,111,.5); }
.ar-app.result-player .computer-hand { border-color: rgba(255,255,255,.82); filter: saturate(.72); box-shadow: inset 0 0 32px rgba(255,255,255,.22), 0 0 52px rgba(255,255,255,.42); }
.ar-app.result-player .computer-ar, .ar-app.result-computer .computer-ar, .ar-app.result-draw .computer-ar { z-index: 14; transform: translate(-50%, -50%) scale(1.32); }
.ar-app.result-player .computer-hand, .ar-app.result-computer .computer-hand, .ar-app.result-draw .computer-hand { font-size: clamp(70px, 12vw, 104px); }

.camera-stage::before, .camera-stage::after { content: ""; position: absolute; inset: -20%; z-index: 11; opacity: 0; pointer-events: none; }
.ar-app.result-player .camera-stage::before { background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.56) 0 9%, rgba(224,249,255,.48) 20%, rgba(114,223,255,.28) 43%, rgba(255,255,255,.08) 62%, transparent 76%); animation: result-wash 1.55s cubic-bezier(.12,.68,.2,1) both; }
.ar-app.result-player .camera-stage::after { background: repeating-radial-gradient(circle at 50% 48%, transparent 0 8%, rgba(255,255,255,.92) 8.4% 8.8%, transparent 9.2% 15%); mix-blend-mode: screen; animation: victory-rings 1.7s cubic-bezier(.08,.72,.18,1) both; }
.ar-app.result-computer .camera-stage::before { background: radial-gradient(circle at 50% 48%, rgba(255,57,79,.58) 0 9%, rgba(117,7,25,.52) 29%, rgba(7,3,8,.34) 56%, rgba(0,0,0,.1) 66%, transparent 78%); animation: result-wash 1.55s cubic-bezier(.12,.68,.2,1) both; }
.ar-app.result-computer .camera-stage::after { background: repeating-radial-gradient(circle at 50% 48%, transparent 0 10%, rgba(255,44,69,.46) 10.4% 11%, transparent 11.4% 18%); mix-blend-mode: multiply; animation: defeat-rings 1.55s cubic-bezier(.08,.72,.18,1) both; }
.ar-app.result-player .score-hud, .ar-app.result-computer .score-hud, .ar-app.result-player .message-hud, .ar-app.result-computer .message-hud { z-index: 13; }

.message-hud { position: absolute; z-index: 10; left: 50%; bottom: max(26px, calc(env(safe-area-inset-bottom) + 16px)); width: min(560px, calc(100% - 36px)); transform: translateX(-50%); text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.result-text { display: inline-block; min-width: min(360px, 90%); border: 1px solid rgba(255,255,255,.14); border-radius: 99px; padding: 11px 18px; background: rgba(5,9,20,.66); backdrop-filter: blur(16px); color: #e8edf7; font-size: clamp(13px, 2.2vw, 16px); font-weight: 800; transition: color .3s, background .3s, transform .3s; }
.result-text.is-arming { color: #182112; background: rgba(223,255,99,.92); text-shadow: none; }
.result-text.is-revealing { color: #eafaff; border-color: rgba(116,223,255,.55); background: rgba(15,66,91,.75); }
.result-text.win { color: #15200c; background: var(--lime); text-shadow: none; animation: result-pop .6s cubic-bezier(.16,.84,.34,1.35); }
.result-text.lose { color: #fff; background: rgba(183,46,70,.9); animation: result-pop .6s cubic-bezier(.16,.84,.34,1.35); }
.result-player .result-text.win { border-color: #fff; background: linear-gradient(100deg, #fff, #dff9ff 42%, #dfff63); box-shadow: 0 0 0 5px rgba(255,255,255,.1), 0 0 42px rgba(255,255,255,.75), 0 0 80px rgba(105,216,255,.35); }
.auto-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; max-width: 370px; margin: 10px auto 0; color: #d4dcec; font-size: 9px; font-weight: 800; }
.progress-track { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.18); }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--lime)); box-shadow: 0 0 12px var(--lime); transition: width .12s linear; }
.hint-text { margin: 8px 0 0; color: rgba(228,234,245,.7); font-size: 10px; }

.gesture-guide { position: absolute; z-index: 8; right: max(18px, env(safe-area-inset-right)); top: 50%; display: flex; flex-direction: column; gap: 8px; transform: translateY(-50%); }
.gesture-guide span { display: grid; grid-template-columns: 26px auto; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 6px 8px; background: rgba(5,9,20,.45); backdrop-filter: blur(10px); font-size: 18px; }
.gesture-guide small { color: #bdc8da; font-size: 9px; font-weight: 700; }
.celebration { position: absolute; inset: 0; z-index: 12; overflow: hidden; pointer-events: none; }
.celebration span { position: absolute; left: var(--x); top: var(--start-y, 65%); color: var(--color, var(--lime)); opacity: 0; text-shadow: 0 0 18px currentColor; font-size: var(--size); }
.result-computer .celebration span { color: #ff8995; }.result-draw .celebration span { color: #9cbbff; }
.celebration.burst span { animation: confetti var(--duration, 1.35s) cubic-bezier(.14,.76,.25,1) var(--delay) both; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes ar-ring { to { transform: rotate(360deg); } }
@keyframes ar-charge { from { translate: 0 3px; filter: brightness(.92); } to { translate: 0 -7px; filter: brightness(1.28); } }
@keyframes cpu-fist-shake { from { transform: translateX(-10px) rotate(-8deg); } to { transform: translateX(10px) rotate(8deg); } }
@keyframes score-pop { 0% { transform: scale(.55); filter: brightness(2.5); } 55% { transform: scale(1.5); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes result-wash { 0% { opacity: 0; clip-path: circle(0 at 50% 48%); } 14% { opacity: 1; } 66% { opacity: .78; clip-path: circle(82% at 50% 48%); } 100% { opacity: 0; clip-path: circle(110% at 50% 48%); } }
@keyframes victory-rings { 0% { opacity: 0; transform: scale(.08) rotate(0); } 18% { opacity: 1; } 72% { opacity: .72; } 100% { opacity: 0; transform: scale(1.15) rotate(22deg); } }
@keyframes defeat-rings { 0% { opacity: 0; transform: scale(.05); } 22% { opacity: .9; } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes result-pop { 0% { transform: scale(.84); opacity: .4; } 70% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
@keyframes confetti { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.2) rotate(0); } 14% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--rise, -210px)) scale(1.35) rotate(var(--spin, 320deg)); } }

@media (max-width: 620px) {
  .top-hud { padding-top: max(13px, env(safe-area-inset-top)); }
  .status { display: none; }
  .score-hud { top: max(65px, calc(env(safe-area-inset-top) + 54px)); grid-template-columns: 60px 76px 60px; padding: 8px 10px; }
  .score-hud strong { font-size: 30px; }
  .gesture-guide { top: auto; right: max(13px, env(safe-area-inset-right)); bottom: max(130px, calc(env(safe-area-inset-bottom) + 118px)); flex-direction: row; }
  .gesture-guide span { grid-template-columns: auto; justify-items: center; gap: 1px; width: 43px; padding: 5px; font-size: 18px; }
  .gesture-badge { top: auto; bottom: max(132px, calc(env(safe-area-inset-bottom) + 120px)); }
  .computer-ar { width: 112px; }
  .computer-hand { width: 92px; font-size: 48px; }
  .ar-app.result-player .computer-ar, .ar-app.result-computer .computer-ar, .ar-app.result-draw .computer-ar { transform: translate(-50%, -50%) scale(1.2); }
  .ar-app.result-player .computer-hand, .ar-app.result-computer .computer-hand, .ar-app.result-draw .computer-hand { font-size: 72px; }
  .hint-text { display: none; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .score-hud { top: 16px; }
  .top-hud .brand { display: none; }
  .gesture-guide { display: none; }
  .message-hud { bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}