* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: Arial, Helvetica, sans-serif; background: #111827; color: #fff; }
#app, #gameCanvas { position: fixed; inset: 0; width: 100%; height: 100%; }
#gameCanvas { display: block; touch-action: none; }
.panel { position: fixed; z-index: 20; border: 1px solid rgba(255,255,255,.18); background: rgba(17,24,39,.78); backdrop-filter: blur(12px); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.top-panel { left: 12px; right: 12px; top: 10px; min-height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand img { width: 42px; height: 42px; border-radius: 12px; }
.brand strong { display: block; font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand span { display: block; color: #d1d5db; font-size: 11px; margin-top: 2px; }
.statRow { display: flex; gap: 7px; overflow-x: auto; }
.scoreBox { min-width: 70px; border-radius: 15px; padding: 7px 10px; background: rgba(251,191,36,.18); text-align: center; }
.scoreBox span { display:block; font-size: 11px; color: #fde68a; }
.scoreBox b { display:block; font-size: 18px; }
.story-panel { left: 12px; top: 78px; width: min(520px, calc(100vw - 24px)); border-radius: 16px; padding: 10px 12px; line-height: 1.32; font-size: 12px; }
#storyText { color: #f9fafb; margin-bottom: 6px; }
#questText { color: #bfdbfe; }
.toolbar { left: 10px; right: 10px; bottom: 96px; min-height: 44px; border-radius: 16px; display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 7px; }
.toolBtn, .assetBtn { border: 0; border-radius: 14px; color: white; background: rgba(59,130,246,.85); padding: 9px 11px; font-weight: 700; white-space: nowrap; min-height: 40px; box-shadow: 0 5px 14px rgba(0,0,0,.18); }
.toolBtn:active, .assetBtn:active { transform: scale(.97); }
.toolBtn.danger { background: rgba(239,68,68,.84); }
.toolBtn.success { background: rgba(22,163,74,.9); }
.toolBtn.muted { background: rgba(75,85,99,.88); }
.palette { position: fixed; z-index: 20; left: 10px; right: 10px; bottom: 10px; height: 74px; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px; }
.assetBtn { min-width: 92px; height: 68px; background: rgba(31,41,55,.88); border: 2px solid rgba(255,255,255,.14); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; position: relative; }
.assetBtn.recommended { border-color: #facc15; box-shadow: 0 0 0 2px rgba(250,204,21,.22), 0 0 18px rgba(250,204,21,.35); animation: pulseGuide 1.1s infinite alternate; }
.assetBtn.active { border-color: #22c55e; background: rgba(34,197,94,.28); }
.assetBtn .assetIcon { display:block; font-size: 26px; line-height: 1; margin-bottom: 1px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.28)); }
.assetBtn small { font-size: 10px; opacity: .86; }
.assetBtn b { font-size: 10px; line-height: 1.05; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help { left: 12px; right: 12px; bottom: 174px; border-radius: 16px; padding: 9px 11px; color: #e5e7eb; font-size: 12px; line-height: 1.35; max-width: 650px; }
#toast { position: fixed; z-index: 40; left: 50%; top: 140px; transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 10px 14px; border-radius: 999px; background: rgba(17,24,39,.92); color: white; font-weight: 700; box-shadow: 0 10px 28px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; text-align:center; }
@keyframes pulseGuide { from { transform: scale(1); } to { transform: scale(1.04); } }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(8px); }
#guideHand { position: fixed; z-index: 45; width: 28px; height: 28px; display: grid; place-items: center; font-size: 26px; pointer-events: none; opacity: 0; transform: translateY(0); transition: opacity .2s ease; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
#guideHand.show { opacity: 1; animation: guideHandBounce .9s infinite alternate; }
@keyframes guideHandBounce { from { transform: translateY(0); } to { transform: translateY(-10px); } }
#ARButton { position: fixed !important; z-index: 50 !important; right: 12px !important; left: auto !important; bottom: 192px !important; border-radius: 999px !important; padding: 12px 18px !important; border: 0 !important; background: #16a34a !important; color: white !important; font-weight: 800 !important; }
body.xr-active .help, body.xr-active .top-panel, body.xr-active .story-panel { display: none; }
@media (max-height: 720px) {
  .help { display:none; }
  .story-panel { top: 72px; font-size: 11px; max-height: 82px; overflow: hidden; }
  .toolbar { bottom: 88px; }
  .palette { height: 68px; }
  .assetBtn { height: 62px; min-width: 84px; }
  .assetBtn .assetIcon { font-size: 23px; }
}
@media (max-width: 760px) {
  .top-panel { align-items: flex-start; }
  .brand strong { font-size: 13px; }
  .brand span { display: none; }
  .scoreBox { min-width: 58px; padding: 6px 8px; }
  .scoreBox span { font-size: 10px; }
  .scoreBox b { font-size: 15px; }
}