.pocket-door[hidden], .pocket-layer [hidden] { display: none !important; }
.pocket-door, .pocket-layer button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pocket-door {
  position: absolute; z-index: 6; top: max(20px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 13px; padding: 12px 18px 12px 12px;
  border: 2px solid #fcf8df; border-radius: 22px; color: #fff9e7; text-align: left;
  background: #173a38f2; box-shadow: 0 8px 28px #0005, inset 0 0 24px #bffaac18;
}
.pocket-door small, .pocket-door strong, .pocket-door-note { display: block; }
.pocket-door small { font-size: 10px; letter-spacing: 2px; font-weight: 800; color: var(--pocket-accent); }
.pocket-door strong { margin: 3px 0; font-size: 20px; }
.pocket-door-note { font-size: 12px; color: #e4e8d7; }
.pocket-door b { font-size: 25px; margin-left: 4px; }
.pocket-door-art { width: 44px; height: 56px; border: 4px solid #e6c99a; border-radius: 28px 28px 8px 8px; background: #153738; position: relative; box-shadow: 0 0 14px var(--pocket-accent); }
.pocket-door-art i { position: absolute; inset: 7px; border-radius: inherit; background: radial-gradient(ellipse at bottom, #fff9d5, var(--pocket-accent) 35%, #469eab 70%, #365764); animation: pocket-breathe 2.6s ease-in-out infinite alternate; }
.pocket-layer { position: absolute; inset: 0; z-index: 18; color: #fff; background: #142e36; overflow: hidden; --pocket-accent: #d5ffb0; }
.pocket-view { position: absolute; inset: 0; }
.pocket-view canvas { width: 100%; height: 100%; outline: none; }
.pocket-hud { position: absolute; inset: 0 0 auto; padding: max(22px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) 48px max(28px, env(safe-area-inset-left)); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; pointer-events: none; background: linear-gradient(#10222cda, #10222c65 70%, transparent); }
.pocket-hud button { pointer-events: auto; }
.pocket-back, .pocket-again, .pocket-done { min-height: 48px; padding: 12px 20px; border: 1px solid #ffffff75; border-radius: 16px; font-weight: 750 !important; color: #faffee; background: #15363bd9; }
.pocket-back::before { content: "\2190"; margin-right: 9px; }
.pocket-heading { text-align: center; }
.pocket-heading > small { color: var(--pocket-accent); font-size: 10px; font-weight: 800; letter-spacing: 3px; }
.pocket-heading h1 { font-size: clamp(22px, 2.5vw, 36px); letter-spacing: -.8px; margin: 5px 0; text-shadow: 0 2px 12px #0005; }
.pocket-heading p { font-size: 15px; margin: 0; color: #f4f7e6; }
.pocket-score { display: flex; align-items: baseline; gap: 7px; min-width: 88px; justify-content: center; padding: 10px 16px; border: 1px solid #ffffff66; border-radius: 18px; background: #132c3cbf; }
.pocket-score span { font-size: 28px; color: var(--pocket-accent); font-weight: 900; }
.pocket-score small { font-size: 16px; font-weight: 700; }
.pocket-bottom { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: max(28px, env(safe-area-inset-left)); right: max(28px, env(safe-area-inset-right)); display: flex; align-items: end; justify-content: space-between; gap: 20px; pointer-events: none; }
.pocket-help { padding: 12px 18px; border-radius: 16px; background: #102f3bdc; border: 1px solid #ffffff30; }
.pocket-help strong, .pocket-help small { display: block; }
.pocket-help strong { font-size: 16px; color: #fff8df; }
.pocket-help small { font-size: 11px; margin-top: 5px; color: #d6e7e5; }
.pocket-action { pointer-events: auto; min-width: 100px; min-height: 76px; padding: 15px 24px; border: 3px solid #fff4d3; border-radius: 26px; background: #fff3ce; color: #28434a; font-size: 22px !important; font-weight: 900 !important; box-shadow: 0 6px 0 #b38e56, 0 10px 32px #0004; transition: transform .15s; }
.pocket-action.is-near { background: var(--pocket-accent); box-shadow: 0 6px 0 #607d58, 0 0 30px var(--pocket-accent); }
.pocket-action:active { transform: translateY(4px); }
.pocket-target { position: absolute; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: transparent; transform: translate(-50%, -50%); }
.pocket-target:hover { border-color: #fff8c399; background: #ffffff12; }
.pocket-world-label { position: absolute; transform: translate(-50%, -100%); pointer-events: none; padding: 6px 10px; border: 2px solid #fff8d2; border-radius: 12px; background: #244b40ed; color: #fff8d2; font-size: 12px; letter-spacing: .8px; font-weight: 900; white-space: nowrap; box-shadow: 0 3px 10px #0003; }
.pocket-tag-label { background: #ec9f65; color: #402f37; }
.pocket-pebble-label { background: #675674; }
.pocket-action:disabled { cursor: default; opacity: .65; }
.pocket-layer button:focus-visible, .pocket-door:focus-visible { outline: 3px solid #fff9cc; outline-offset: 5px; }
.pocket-loading { position: absolute; inset: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; font-size: 22px; }
.pocket-loading-orb { width: 76px; height: 76px; border: 3px solid #fff7b5; border-radius: 40%; box-shadow: 0 0 60px var(--pocket-accent), inset 0 0 30px var(--pocket-accent); animation: pocket-unfold 1.4s ease-in-out infinite; }
.pocket-finish { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(480px, 90%); padding: 22px 28px; border: 2px solid #ffffdfa8; border-radius: 28px; text-align: center; background: #163b42ed; box-shadow: 0 12px 50px #0004; }
.pocket-finish > small { color: var(--pocket-accent); letter-spacing: 2px; font-size: 10px; font-weight: 800; }
.pocket-finish h2 { font-size: 25px; margin: 6px 0; }
.pocket-finish p { color: #dae8de; font-size: 13px; margin: 0 0 14px; }
.pocket-finish > div { display: flex; justify-content: center; gap: 12px; }
.pocket-done { color: #183c40; background: #e2ffb9; border-color: #e2ffb9; }
@keyframes pocket-breathe { to { opacity: .6; transform: scale(.88); } }
@keyframes pocket-unfold { 50% { transform: rotate(90deg) scale(.72); } 100% { transform: rotate(180deg); } }
@media (max-height: 540px), (max-width: 760px) {
  .pocket-door { top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); padding: 9px 12px; gap: 10px; border-radius: 17px; }
  .pocket-door-art { width: 32px; height: 44px; border-width: 3px; }
  .pocket-door strong { font-size: 16px; }
  .pocket-door-note { font-size: 10px; }
  .pocket-hud { padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); gap: 10px; }
  .pocket-heading > small { font-size: 8px; letter-spacing: 1.6px; }
  .pocket-heading h1 { font-size: 21px; margin: 3px 0; }
  .pocket-heading p { font-size: 12px; }
  .pocket-back { font-size: 12px !important; padding: 10px 12px; }
  .pocket-score { min-width: 67px; padding: 8px 12px; }
  .pocket-score span { font-size: 24px; }
  .pocket-bottom { left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .pocket-help { padding: 9px 13px; }
  .pocket-help strong { font-size: 13px; }
  .pocket-help small { font-size: 10px; }
  .pocket-action { min-width: 90px; min-height: 60px; padding: 10px 18px; font-size: 19px !important; border-radius: 22px; }
  .pocket-finish { bottom: 14px; padding: 14px 22px; }
  .pocket-finish h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .pocket-door-art i, .pocket-loading-orb { animation: none; } }