html, body { margin: 0; height: 100%; background: #111; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#ui { position: absolute; inset: 0; pointer-events: none; color: #eee; font-family: sans-serif; }
#ui > * { pointer-events: auto; }
#toasts { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; padding: 16px; gap: 8px; font-family: sans-serif; }
.screen { position: absolute; inset: 0; overflow: auto; padding: 40px 16px; box-sizing: border-box; background: rgba(8, 8, 12, 0.85);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.screen.title { justify-content: center; background: #0b0b10 center / cover no-repeat; }
.screen h1 { font-size: 64px; margin: 0; color: #ffcc33; text-shadow: 0 0 24px #ffcc3388; }
.screen button { min-width: 200px; padding: 10px 18px; font-size: 16px; color: #eee; background: #2a2a36; border: 1px solid #555; border-radius: 6px; cursor: pointer; }
.screen button:hover, .screen button.on { background: #444458; border-color: #ffcc33; }
.screen table { border-collapse: collapse; margin: 8px 0; }
.screen th, .screen td { padding: 4px 12px; border-bottom: 1px solid #333; text-align: left; }
.screen td button { min-width: 0; padding: 4px 12px; font-size: 14px; }
.stars { color: #ffcc33; letter-spacing: 2px; }
.rec { color: #ffcc33; font-weight: bold; }
.news { list-style: none; padding: 0; color: #ffcc33; }
.cols { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; text-align: left; }
.locked { opacity: 0.5; }
.titles { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.titles button { min-width: 0; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; width: 100%; max-width: 900px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; background: #1a1a22; border-radius: 6px; }
.badge.locked canvas { opacity: 0.35; }
.bar { width: 100%; height: 6px; background: #333; border-radius: 3px; overflow: hidden; }
.bar.wide { max-width: 400px; }
.bar i { display: block; height: 100%; background: #ffcc33; }
.toast { padding: 10px 16px; background: rgba(20, 20, 28, 0.95); border: 1px solid #ffcc33; border-radius: 6px; color: #ffcc33; animation: toast 3s forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateY(10px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.godspeed { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 120px; font-weight: bold;
  color: #fff7cc; text-shadow: 0 0 40px #ffcc33; background: radial-gradient(#ffcc3366, #ffcc3300 70%); animation: godspeed 1.5s forwards; }
@keyframes godspeed { 0% { opacity: 0; transform: scale(0.6); } 15% { opacity: 1; transform: scale(1.1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.screen td .on { border-color: #ffcc33; }
.screen .keys { font-size: 14px; color: #aaa; line-height: 1.7; margin-top: 18px; }
/* 三選一選卡:卡框圖 + 類別色頂帶;.open 由飛出位置展開,.chosen 放大後飛向 HUD,.gone 淡出(秒數由 Z.C.CHOICE 設在 inline style) */
.screen.choice { justify-content: center; background: rgba(8, 8, 12, 0.6); perspective: 1000px; }
.choice .cards { display: flex; gap: 2vw; justify-content: center; }
.choice .card { position: relative; width: min(220px, 27vw); min-width: 0; aspect-ratio: 32 / 40; padding: 0; border: 0; background: none;
  transform-style: preserve-3d; transition-property: transform, opacity; transition-timing-function: ease-out;
  transform: translate(var(--dx), var(--dy)) scale(0.1) rotateY(180deg); }
.choice .card.open { transform: none; }
.choice .card:hover { background: none; }
.choice .card.sel { transform: translateY(-12px) scale(1.05); }
.choice .card.gone { opacity: 0; transform: none; }
.choice .card.chosen { animation: chosen forwards ease-in; }
@keyframes chosen { 30% { transform: translateY(-12px) scale(1.2); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0.1); opacity: 0.2; } }
.choice .face { position: absolute; inset: 0; backface-visibility: hidden; image-rendering: pixelated;
  background: var(--frame) 0 0 / 100% 100% no-repeat, linear-gradient(var(--cat) 0 30%, #1a1a22 30%) center / 84% 92% no-repeat; }
.choice .back { transform: rotateY(180deg); background: var(--frame) 0 0 / 100% 100% no-repeat, #2a2a36 center / 84% 92% no-repeat; }
.choice .front { display: flex; flex-direction: column; align-items: center; padding: 8% 12% 10%; box-sizing: border-box; gap: 8%; color: #eee; }
.choice .front b { font-size: clamp(16px, 2.6vw, 26px); color: #111; height: 22%; display: flex; align-items: center; }
.choice .front span { font-size: clamp(12px, 1.6vw, 16px); line-height: 1.5; flex: 1; }
.choice .front kbd { font: bold 14px sans-serif; color: var(--cat); border: 1px solid var(--cat); border-radius: 4px; padding: 1px 7px; }
.choice .card.sel .front { filter: drop-shadow(0 0 10px var(--cat)); }