/* Jewelria: a midnight jewel cabinet, with the board at the heart of play. */
:root { --gold: #edcf8b; --gold-2: #fff0c1; --ink-soft: #c5d5d7; --line: #bca36c40; --radius: 16px; }
.app-shell { height: 100dvh; }
.archerlab-link { left: max(18px,env(safe-area-inset-left)); transform: none; min-height: 44px; padding: 10px 16px; letter-spacing: .02em; box-shadow: none; display: inline-flex; align-items: center; }
.title-screen { padding: max(74px,calc(env(safe-area-inset-top) + 64px)) max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
.title-bg { filter: saturate(.72); opacity: .66; }
.title-shade { background: linear-gradient(90deg,#06131cf5 5%,#071923c9 42%,#06131c3d 100%),linear-gradient(0deg,#041018e6,transparent 55%); }
.title-content { width: min(100%,1160px); padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto 1fr; grid-template-areas: 'headline gems' 'actions gems' '. gems'; gap: 32px 70px; text-align: left; }
.title-headline { grid-area: headline; align-self: end; justify-items: start; }
.title-headline .eyebrow { color: #b7a37a; font-size: 10px; letter-spacing: .24em; margin-bottom: 24px; }
.title-plaque { width: 100%; aspect-ratio: auto; background: none; filter: none; display: block; margin: 0 0 24px; }
.title-plaque::after { display: none; }
.title-content h1 { color: #fff0c1; font-size: clamp(58px,6.5vw,94px); letter-spacing: -.06em; line-height: 1.1; font-weight: 900; text-shadow: 0 3px 0 #947449,0 12px 36px #0007; }
.subtitle { max-width: 390px; font-size: 16px; font-weight: 450; line-height: 1.9; color: #b8cdd0; margin: 0 0 20px; word-break: keep-all; }
.title-mantra { padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; font-size: 9px; letter-spacing: .16em; gap: 14px; color: #8ea8ad; }
.title-bottom { grid-area: actions; width: min(100%,380px); justify-items: stretch; margin: 0; }
.record-strip { width: 100%; gap: 16px; margin: 0 0 18px; }
.record-strip > div { border: 0; border-left: 1px solid #ad925e70; border-radius: 0; background: none; box-shadow: none; padding: 4px 18px; text-align: left; }
.record-strip span { color: #8ea8ad; font-size: 10px; letter-spacing: .08em; }
.record-strip strong { font-size: 28px; font-variant-numeric: tabular-nums; color: #f0dfb9; }
.title-actions { width: 100%; }
.button { min-height: 48px; border-radius: 12px; background-image: none; font-size: 14px; }
.button::before,.icon-button::before { display: none; }
.button-primary { background: linear-gradient(135deg,#f4dda1,#d7b76b); color: #263036; border: 1px solid #fff0bf; box-shadow: 0 4px 0 #8a7345,0 12px 32px #0004; text-shadow: none; }
.button-primary:hover { background: #f7e5b5; }
.button-secondary,.button-ghost { background: #102a35; border: 1px solid #637c7f80; color: #d3e4df; box-shadow: 0 3px 0 #031019; }
.title-actions #play-btn { min-height: 64px; background: linear-gradient(135deg,#f4dda1,#d7b76b); border-radius: 13px; }
#play-btn::before { display: none; }
#play-btn .btn-label { font-size: 19px; font-weight: 850; }
#play-btn .btn-sub { color: #52604e; font-size: 10px; letter-spacing: .08em; }
.icon-button { min-width: 44px; min-height: 44px; width: 48px; height: 48px; padding: 0; border: 1px solid #af95536b; border-radius: 13px; background: #102832ed; box-shadow: 0 3px 0 #030f18; color: #e4d4a3; font-size: 10px; }
.topbar { top: max(12px,env(safe-area-inset-top)); right: max(18px,env(safe-area-inset-right)); gap: 10px; }
.jewel-showcase { grid-area: gems; position: relative; width: 100%; max-width: 510px; aspect-ratio: 1; align-self: center; display: grid; place-items: center; }
.jewel-showcase::before,.jewel-showcase::after { content: ''; position: absolute; inset: 6%; border: 1px solid #d4b66a4d; transform: rotate(45deg); border-radius: 25%; background: radial-gradient(ellipse,#31bca525,transparent 65%); }
.jewel-showcase::after { inset: 14%; transform: rotate(30deg); border-color: #6ecac033; background: none; }
.jewel-showcase img { position: absolute; width: 34%; filter: drop-shadow(0 22px 18px #0008); z-index: 1; }
.jewel-showcase img:nth-child(1) { width: 48%; left: 26%; top: 21%; transform: rotate(-9deg); }
.jewel-showcase img:nth-child(2) { width: 28%; left: 1%; top: 50%; transform: rotate(-18deg); }
.jewel-showcase img:nth-child(3) { width: 28%; right: 0; top: 43%; transform: rotate(16deg); }
.jewel-showcase span { position: absolute; bottom: 0; color: #c3ad7a; letter-spacing: .28em; font-size: 9px; }
.game-screen { padding: max(66px,calc(env(safe-area-inset-top) + 56px)) max(14px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); gap: 12px; background: radial-gradient(ellipse at 50% 44%,#153b45,#07151f 70%); }
.game-hud { width: min(100%,650px); grid-template-columns: 48px minmax(0,1fr) minmax(0,1fr) 48px; gap: 12px; align-items: center; }
.hud-stat { border: 1px solid #b5a46a38; background: #102a34; padding: 10px 12px; border-radius: 16px; box-shadow: inset 0 1px #ffffff0a; }
.hud-stat span { color: #a9c1c3; font-size: 10px; }
.hud-stat strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.board-wrap { align-content: center; }
.board-frame { width: min(100%,660px,calc(100dvh - 232px)); aspect-ratio: 1; margin: 0; border: 1px solid #b59a6280; border-radius: 24px; background: #0d2c35; box-shadow: inset 0 0 0 5px #153c42,inset 0 0 0 6px #b59a622e,0 8px 0 #05171f; filter: drop-shadow(0 18px 26px #0005); }
.board { inset: 12px; border-radius: 14px; padding: 2px; }
.modal-card { min-width: 0; width: min(100%,540px); }
.game-controls { width: min(100%,400px); margin: 0 auto; gap: 12px; }
.game-controls .button { min-height: 44px; }
.modal { padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); touch-action: pan-y; }
.modal-card { max-height: calc(100dvh - 40px); overflow-y: auto; background: #0e2530; border: 1px solid #be9e5b80; border-radius: 22px; box-shadow: 0 24px 80px #0009,inset 0 1px #ead8a31a; padding: 28px; }
.rank-row { border-radius: 12px; background: #15313a; }
.rank-submit-row input { min-height: 48px; font-size: 16px; border-radius: 10px; }
.button:focus-visible,.icon-button:focus-visible { outline: 3px solid #fff0bf; outline-offset: 4px; }
@media (max-width: 900px) and (max-height: 900px) {
  .archerlab-link { left: 50%; transform: translateX(-50%); top: max(12px,env(safe-area-inset-top)); }
}
@media (orientation: portrait) {
  .title-content { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) auto; grid-template-areas: 'headline' 'gems' 'actions'; gap: 18px; justify-items: center; text-align: center; }
  .title-headline { justify-items: center; }
  .title-headline .eyebrow { margin-bottom: 14px; font-size: 8px; }
  .title-content h1 { font-size: clamp(48px,13vw,72px); }
  .title-plaque { margin-bottom: 16px; }
  .subtitle { font-size: 13px; max-width: 290px; line-height: 1.6; margin-bottom: 14px; }
  .jewel-showcase { height: min(100%,34dvh); width: auto; max-width: 75vw; }
  .record-strip strong { font-size: 24px; }
  .title-shade { background: linear-gradient(180deg,#061722cf,#06172272 50%,#061722f5); }
  .game-hud { gap: 7px; }
  .hud-stat { padding: 8px 5px; }
  .hud-stat strong { font-size: 24px; }
}
@media (orientation: portrait) and (max-height: 650px) {
  .title-screen { padding: max(70px,calc(env(safe-area-inset-top) + 60px)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
  .title-content { gap: 10px; }
  .title-headline .eyebrow,.title-mantra,.jewel-showcase span { display: none; }
  .title-plaque { margin-bottom: 10px; }
  .subtitle { margin-bottom: 0; font-size: 12px; }
  .record-strip { margin-bottom: 12px; }
  .title-actions #play-btn { min-height: 56px; }
  .game-screen { padding-top: 62px; gap: 8px; }
  .board-frame { width: min(100%,calc((100dvh - 206px) * .9516)); }
}
@media (orientation: landscape) and (max-height: 620px) {
  .title-screen { padding: max(66px,calc(env(safe-area-inset-top) + 56px)) max(32px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(32px,env(safe-area-inset-left)); }
  .title-content { grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr auto; grid-template-areas: 'headline gems' 'actions gems'; gap: 16px 50px; }
  .title-headline .eyebrow,.subtitle,.title-mantra,.jewel-showcase span { display: none; }
  .title-content h1 { font-size: clamp(34px,6vw,60px); }
  .title-plaque { margin: 0; }
  .jewel-showcase { width: min(100%,56dvh); justify-self: center; }
  .record-strip { margin-bottom: 10px; }
  .record-strip strong { font-size: 22px; }
  .title-actions #play-btn { min-height: 54px; }
  .game-screen { grid-template-columns: minmax(165px,.75fr) minmax(0,1.25fr); grid-template-rows: 1fr auto 1fr; padding: max(16px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); gap: 12px 22px; }
  .game-hud { grid-column: 1; grid-row: 2; grid-template-columns: 1fr 1fr; }
  .hud-stat-time { grid-column: 1; grid-row: 1; }
  .hud-stat-score { grid-column: 2; grid-row: 1; }
  .game-hud .icon-button { width: 100%; }
  .board-wrap { grid-column: 2; grid-row: 1 / -1; }
  .board-frame { width: min(100%,calc((100dvh - 38px) * .9516)); }
  .game-controls { grid-column: 1; grid-row: 3; align-self: start; display: grid; grid-template-columns: 1fr 1fr; }
  .game-controls .button { padding: 8px 4px; font-size: 11px; }
  body:has(.game-screen.is-active) .archerlab-link { top: 12px; left: max(24px,env(safe-area-inset-left)); transform: none; }
}
/* Authored artwork: wide jewel buttons and a separate frame for compact controls. */
:root { --crafted-frame: url('../images/ui/crafted-frame-v1.webp'); }
.title-bg { opacity: .72; filter: saturate(.9); }
.title-plaque { margin-bottom: 0; }
.title-content h1 { background: linear-gradient(#fff9da 20%,#f5dfa4 48%,#bb8b46 90%); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 3px #513713); text-shadow: none; }
.button,.button:hover,.button:active,.icon-button,.icon-button:hover,.archerlab-link { position: relative; isolation: isolate; background: none; border: 0; box-shadow: none; color: #fff2c9; text-shadow: 0 2px 2px #001c18; }
.button { min-height: 52px; padding: 12px 24px; font-weight: 800; }
.button::before,.icon-button::before { content: ''; display: block; position: absolute; inset: -2px; z-index: -1; border: 14px solid transparent; border-image: var(--crafted-frame) 290 fill / 14px / 0 stretch; background: none; opacity: 1; transform: none; filter: drop-shadow(0 3px 2px #0005); transition: filter .15s; }
.button:hover::before,.icon-button:hover::before { filter: brightness(1.18) drop-shadow(0 4px 3px #0005); }
.button:active,.icon-button:active { transform: translateY(2px); }
.title-actions #play-btn { min-height: 78px; background: none; padding: 14px 42px; border: 0; }
.title-actions #play-btn::before { display: block; border: 0; inset: -2px -8px; background: url('../images/ui/crafted-button-v1.webp') center / 100% 158% no-repeat; }
#play-btn .btn-label { font-size: 24px; letter-spacing: .02em; }
.icon-button { display: grid; place-items: center; }
.icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is-muted .sound-waves { opacity: .2; }
.archerlab-link { position: fixed; border: 12px solid transparent; border-image: var(--crafted-frame) 290 fill / 12px / 0 stretch; padding: 4px 12px; }
.record-strip > div { border: 14px solid transparent; border-image: var(--crafted-frame) 290 fill / 14px / 0 stretch; padding: 2px 8px; text-align: center; }
.hud-stat { border: 12px solid transparent; border-image: var(--crafted-frame) 290 fill / 12px / 0 stretch; background: none; box-shadow: none; padding: 0 4px; }
.modal-card { border: 18px solid transparent; border-image: var(--crafted-frame) 290 fill / 18px / 0 stretch; background: none; border-radius: 0; padding: 18px; }
.board-frame { border: 0; background: none; box-shadow: none; }
.board-frame::before { content: ''; position: absolute; inset: -3px; border: 18px solid transparent; border-image: var(--crafted-frame) 290 fill / 18px / 0 stretch; pointer-events: none; }
.board { inset: 16px; }
.modal-actions { gap: 12px; }
.modal-actions .button { flex: 1 1 110px; }
@media (orientation: portrait) {
  .title-content { grid-template-rows: auto minmax(0,1fr) auto; gap: 20px; }
  .jewel-showcase { width: min(80vw,420px); height: auto; max-height: 44dvh; }
  .title-content h1 { font-size: clamp(52px,15vw,76px); }
}
@media (orientation: portrait) and (max-height: 650px) {
  .title-content { gap: 8px; }
  .jewel-showcase { width: min(62vw,29dvh); }
  .title-actions #play-btn { min-height: 66px; }
  #play-btn .btn-label { font-size: 21px; }
  .record-strip strong { font-size: 21px; }
}
@media (orientation: landscape) and (max-height: 620px) {
  .title-actions #play-btn { min-height: 64px; }
  #play-btn .btn-label { font-size: 19px; }
  .record-strip > div { padding: 0 3px; }
  .hud-stat strong { font-size: 22px; }
  .hud-stat { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }