@import url('./assets/depth-tokens.css');

body.ag-depth-art[data-pip-frame] .game-wrap {
  background: var(--ag-art-paper) url('./assets/depth-paper.webp') center / 512px 512px;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
body.ag-depth-art .game-title h1 { color: var(--ag-art-ink); }
body.ag-depth-art[data-pip-frame] .facts span {
  color: var(--ag-art-raspberry);
  background: var(--ag-art-pink);
  border-color: var(--ag-art-rule);
  border-radius: 6px;
}
body.ag-depth-art[data-pip-frame] .hud { flex-wrap: wrap; color: var(--ag-art-ink); }
body.ag-depth-art .ag-how,
body.ag-depth-art #ag-bonus,
body.ag-depth-art #input-row .hint { color: var(--ag-art-quiet); }
body.ag-depth-art #ag-wheel {
  background: var(--ag-art-paper) url('./assets/depth-wheel-rubbing.svg') center / 240px 240px;
}
/* Native58px faces, order, transform, ring, polyline and touch-action stay exact. */
body.ag-depth-art .ag-tile:not(.on) { background: var(--ag-art-raspberry); color: #fff; }
body.ag-depth-art .ag-tile.on { color: var(--ag-art-raspberry); }
body.ag-depth-art #input-row span:not(.hint) { background: var(--ag-art-paper); color: var(--ag-art-ink); }
body.ag-depth-art .wslot i { background: var(--ag-art-paper); color: var(--ag-art-ink); }
body.ag-depth-art .wslot i.h { color: var(--ag-art-raspberry); }
body.ag-depth-art .wslot.done i { background: var(--ag-art-raspberry); color: #fff; }
body.ag-depth-art[data-pip-frame] .game-wrap .btn,
body.ag-depth-art #win-overlay .btn,
body.ag-depth-art #ag-radar summary,
body.ag-depth-art #ag-radar input,
body.ag-depth-art #ag-radar select { min-height: var(--ag-art-touch); }
/* Keep the native utility symbols and role colors; use darker readable faces. */
body.ag-depth-art[data-pip-frame] .game-wrap .btn:not(.ag-go):not(.ag-back):not(.ag-hint) { background: var(--ag-art-raspberry); color: #fff; }
body.ag-depth-art[data-pip-frame] #ag-ctrls .ag-go { background: #166534; color: #fff; }
body.ag-depth-art[data-pip-frame] #ag-ctrls .ag-back { background: #475569; color: #fff; }
body.ag-depth-art[data-pip-frame] #ag-ctrls .ag-hint { background: #f3cb77; color: #432c31; }
body.ag-depth-art #win-overlay .btn { background: var(--ag-art-raspberry); color: #fff; }
body.ag-depth-art #win-stars { color: #f3cb77; }
body.ag-depth-art #win-overlay .btn:focus-visible { outline-color: #fff; }
@media (max-height: 520px) {
  body.ag-depth-art #win-overlay { justify-content: flex-start; overflow-y: auto; }
}