*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:#06142f;font-family:Arial,sans-serif;touch-action:none;-webkit-tap-highlight-color:transparent}
body{display:grid;place-items:center;background:radial-gradient(circle at 50% 12%,#0ea5b733,#06142f 48%,#030716 100%)}
#wrap{position:relative;width:min(100vw,calc(100dvh * 16 / 9),1280px);height:min(100dvh,calc(100vw * 9 / 16),720px);aspect-ratio:16/9;box-shadow:0 30px 90px #000b;overflow:hidden;border-radius:12px}
canvas{display:block;width:100%;height:100%;cursor:pointer;object-fit:contain}
#sound{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));border:1px solid #b7eef5;background:#ffffffee;color:#06324c;border-radius:999px;width:48px;height:48px;font-size:21px;cursor:pointer;z-index:3;box-shadow:0 12px 32px #00152d55}
#result-modal{position:fixed;inset:0;background:#06142fe8;display:none;place-items:center;padding:clamp(10px,3vw,22px);color:#123;z-index:5}
#result-modal.open{display:grid}.card{width:min(760px,94vw);max-height:92%;overflow:auto;background:#f8fbff;border:1px solid #9de7ef;border-radius:18px;padding:28px;box-shadow:0 25px 80px #0009}
.brand-kicker{margin:0 0 6px;text-align:center;color:#008ca1;font-size:12px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase}.card h2{font-size:clamp(23px,4vw,34px);margin:0 0 6px;text-align:center;color:#082f49}.card .summary{text-align:center;color:#38566b;margin:0 0 22px}
.action{border:0;background:#03c5d9;color:#052235;padding:13px 18px;border-radius:10px;font-weight:800;cursor:pointer;box-shadow:0 10px 22px #03a7bd33}.action:disabled{opacity:.6;cursor:not-allowed}.secondary{background:#e8f2f8;color:#082f49}
.modal-actions{display:flex;justify-content:center;margin-top:20px}
#ecotic-reward{display:none;margin:0 0 16px;padding:11px 14px;border:1px solid #03c5d955;border-radius:10px;background:#e8fbfd;color:#07586b;text-align:center;font-weight:700}
#ecotic-reward.visible{display:block}
@media(max-width:700px){#wrap{border-radius:0}.card{padding:18px;border-radius:18px}.card .summary{margin-bottom:14px}.modal-actions{margin-top:12px}}
@media(min-width:601px){
  body{display:block;padding:0}
  #wrap{width:100vw;height:100dvh;max-width:none;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
  canvas{width:100%;height:100%;object-fit:fill}
}
@media(orientation:portrait) and (max-width:600px){
  body{display:block;padding:0}
  #wrap{width:100vw;height:100dvh;max-width:none;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
  canvas{width:100%;height:100%;object-fit:fill}
  #sound{width:42px;height:42px;right:10px;bottom:10px;font-size:18px}
  #result-modal{align-items:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
  .card{width:100%;max-width:520px;max-height:calc(100dvh - 24px);padding:20px 16px;border-radius:20px}
  .action{width:100%;min-height:46px}
  .modal-actions .action{width:auto;min-width:190px}
}
@media(orientation:landscape) and (max-height:500px){.card{width:min(720px,94vw);padding:14px 22px}.card h2{font-size:24px}.card .summary{margin:2px 0 9px}.modal-actions{margin-top:8px}.action{padding:9px 14px}}