/* GR Arcade shell (Claude 2026-10-11). Claude 2026-10-11 white pass (owner: "keep the white background but work on the
   design and the games design"): the white of the site's editorial sections. The gold perfumer emblem over a title
   set like "New Arrivals" (Montserrat 300, tracked) with the site's small gold diamond under it; Cormorant capitals for
   the games; deep gold tracked labels; the site's black square buttons; warm hairlines; every board an engraved plate
   (core.js plate()); the decants as the site's product cards. Square corners everywhere, hairlines instead of shadows.
   No gradients, glass, blur, sheens, glows or entrance choreography. Cards may fade in within 150 ms. */
:root{
  --bg:#ffffff;
  --ink:#2c2c2c;             /* the site's ink */
  --mute:#6b6b6b;
  --gold:#b8913a;            /* what you collect, the ornament */
  --gold-deep:#83660b;       /* the site's deep gold: tracked labels */
  --line:rgba(44,44,44,.10);
  --line-icon:rgba(44,44,44,.22);
  --line-field:rgba(44,44,44,.4);
  --rule:#e8e2d5;            /* the warm hairlines that split the lobby into plates */
  --paper:#ffffff;           /* the decant cards: the site's white product card */
  --paper-ink:#2c2c2c;
  --paper-gold:#83660b;
  --err:#a12a2a;
  --sans:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  /* Cormorant has no Arabic: Noto Naskh Arabic sets the Arabic serif lines (titles, names, numerals) */
  --serif:'Cormorant Garamond','Cormorant','Noto Naskh Arabic',Garamond,Georgia,'Times New Roman',serif;
  --gutter:12px;             /* the one side margin: bar, masthead, HUD, board, pad (24px on a desktop) */
}
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;height:100%;background:#ffffff;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
/* the lobby scrolls as a plain page (so a swipe can carry on into the store page around the frame);
   the game screen is pinned to the frame and never scrolls or drags the store page */
html.is-play,html.is-play body{overflow:hidden;overscroll-behavior:none;}
html.is-play .bar,html.is-play .game{touch-action:none;}
button,input,a{font-family:inherit;}
button,a,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}

#app{min-height:100%;display:flex;flex-direction:column;background:var(--bg);}
html.is-play #app{height:100%;}

/* ============================ top bar ============================ */
.bar{
  flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;
  min-height:48px;
  padding-block:calc(6px + env(safe-area-inset-top)) 6px;
  padding-inline:max(12px, calc((100% - 1040px) / 2));
  -webkit-user-select:none;user-select:none;
}
.bar-start{display:flex;align-items:center;min-width:0;}
.bar-back{
  appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;
  min-height:40px;padding-block:0;padding-inline:4px 8px;margin:0;
  background:transparent;color:var(--ink);border:0;border-radius:0;
  font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:color .15s;
}
.bar-back .arw{width:16px;height:16px;flex:none;display:block;}
.bar-back-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-title{
  font:600 16px/1.1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:46vw;
}
.bar-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.bar-tools #soundBtn{order:2;}   /* the grafted full-screen control sits on its inner side */
/* Claude 2026-10-11 FULL SCREEN (owner: "doesnt use the full screen"): on the lobby the bar holds only the two
   corner buttons, so it floats over the top corner instead of reserving an empty band above the title */
html:not(.is-play) .bar{position:absolute;top:0;inset-inline:0;z-index:4;min-height:0;padding:calc(4px + env(safe-area-inset-top)) 8px 0;pointer-events:none;}
html:not(.is-play) .bar-tools{pointer-events:auto;}

/* the bar's icons: deep gold strokes on a 40 px square target, no box around them (Claude 2026-10-12, P1); a press
   turns the icon ink inside a hairline ink square, at once. gr-embed-fs.js grafts its full-screen button in here
   with this same class */
#app .corner-btn{
  position:static;appearance:none;-webkit-appearance:none;flex:none;
  width:40px;height:40px;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:#83660b;border:0;border-radius:0;box-shadow:none;
  cursor:pointer;transform:none;
}
#app .corner-btn .cbi{width:18px;height:18px;display:block;}
/* the grafted full-screen icon draws round caps at 1.8; square them to match the sound icon */
#app .corner-btn .cbi{stroke-linecap:square;stroke-linejoin:miter;stroke-width:1.6;}
#app .corner-btn .snd-off{display:none;}
#app .corner-btn.muted .snd-on{display:none;}
#app .corner-btn.muted .snd-off{display:block;}
/* fallback: the embed script draws its own round chip when it finds no .corner-btn. Square it. */
html body > button.grfs{
  top:calc(6px + env(safe-area-inset-top)) !important;width:40px !important;height:40px !important;
  border-radius:0 !important;background:transparent !important;color:#83660b !important;
  border:0 !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;transform:none !important;
}
html[dir="rtl"] body > button.grfs{right:auto !important;left:56px !important;}

/* ============================ buttons ============================ */
/* one primary per card, the site's EXPLORE button (champagne hairline, ivory tracked capitals, a champagne fill
   on press); everything else is an understated word (btn-text) or a hairline half */
.btn{
  appearance:none;-webkit-appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:52px;margin:0;padding:14px 20px;
  border-radius:0;border:1px solid var(--line-field);
  font:600 12.5px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-align:center;text-decoration:none;text-wrap:balance;
  cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;
}
/* a perfume name inside a sentence never breaks across lines, and keeps its own direction in Arabic */
.nw{white-space:nowrap;unicode-bidi:isolate;}
.btn-primary{background:#000000;color:#f8f8f8;border-color:#000000;}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line-field);}
.btn-text{
  width:auto;min-height:44px;margin-inline:auto;padding:10px 14px;
  background:transparent;color:var(--ink);border-color:transparent;font-weight:400;font-size:13.5px;letter-spacing:.03em;text-transform:none;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:#2c2c2c;
}
.card-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
.btn-half{min-height:48px;padding:12px 6px;background:transparent;color:var(--ink);border-color:var(--line-field);font-size:10.5px;letter-spacing:.1em;}
.btn-half + .btn-half{border-inline-start-width:0;}
/* a disabled button stays readable: the dark ground, mute words, a hairline (never a grey slab) */
.btn:disabled{cursor:default;background:transparent;color:var(--mute);border-color:var(--line);}
.btn-text:disabled{background:transparent;border-color:transparent;text-decoration-color:currentColor;}
/* the shelf's button before a pick: an outlined instruction, "Pick a decant" */
.btn.is-idle:disabled{color:var(--ink);border-color:var(--line-field);}
.btn[aria-busy="true"]:disabled{opacity:.72;cursor:progress;}
.btn-primary[aria-busy="true"]:disabled{background:#000000;color:#f8f8f8;border-color:#000000;}
/* a press shows at once (no ease in): a quiet button fills black, the black primary turns to paper, as the
   site's buttons do (fix round 3: #000 to #2c2c2c over 150 ms was all but invisible); the release eases back */
.btn:not(:disabled):active{background:#000000;color:#f8f8f8;border-color:#000000;transition:none;}
.btn-primary:not(:disabled):active{background:#ffffff;color:#000000;border-color:#000000;}
.btn-text:not(:disabled):active{background:transparent;color:var(--gold-deep);border-color:transparent;text-decoration-color:var(--gold-deep);}
#app .corner-btn:active,html body > button.grfs:active{color:#2c2c2c !important;outline:1px solid #2c2c2c !important;outline-offset:-3px !important;}
.bar-back:active{color:#83660b;}
.btn-compact{min-height:40px;width:auto;padding:9px 14px;font-size:11px;letter-spacing:.18em;white-space:nowrap;flex:none;}
@media (hover:hover){
  .btn-primary:not(:disabled):hover{background:#ffffff;color:#000000;border-color:#000000;}
  .btn-secondary:not(:disabled):hover,.btn-half:not(:disabled):hover{background:#000000;color:#f8f8f8;border-color:#000000;}
  /* with a mouse the hover already shows paper (or black): the press itself is its own state, after the hover */
  .btn-primary:not(:disabled):active{background:#f6f2e9;color:#000000;border-color:#000000;}
  .btn-secondary:not(:disabled):active,.btn-half:not(:disabled):active{background:#2c2c2c;color:#f8f8f8;border-color:#2c2c2c;}
  .btn-text:not(:disabled):hover{text-decoration-color:var(--gold-deep);}
  #app .corner-btn:hover{color:#2c2c2c;}
  .bar-back:hover .bar-back-t{text-decoration:underline 1px #83660b;text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:#83660b;text-underline-offset:6px;}
}
/* the keyboard's ring: one gold hairline, 3px out (inside the plates and the shelf, which touch each other) */
.btn:focus-visible,.bar-back:focus-visible,#app .corner-btn:focus-visible,.check input:focus-visible,
.claim-code:focus-visible{outline:1px solid var(--gold);outline-offset:3px;}
.tile:focus-visible,.shelf-item:focus-visible{outline:1px solid var(--gold);outline-offset:-5px;}
.btn:focus:not(:focus-visible),.bar-back:focus:not(:focus-visible),#app .corner-btn:focus:not(:focus-visible){outline:none;}
/* (a plate or a shelf cell focused by a mouse press keeps its own outline: the press and the chosen rule) */
/* app.js puts a finger's or a mouse's focus on the card itself (so a screen reader lands in it): no ring there */
.card:focus{outline:none;}

/* ============================ lobby ============================ */
/* Claude 2026-10-12 (the fit; owner: "the page doesnt look good and you have to scroll to see evething"): one
   screen. A pure flex chain: the masthead takes its height, the 2x2 sheet takes the rest, and each preview is
   the largest square its cell allows (core.js fits the canvas to min(w, h)), bottom centred over its caption.
   Height tiers (inside the frame vh is the frame): phone tall 700+, compact 561 to 699, tiny 560 and under;
   desktop full 760+, compact under 760. */
html:not(.is-play) #app{height:100%;min-height:0;}
.lobby{
  flex:1 1 auto;min-height:440px;display:flex;flex-direction:column;
  --intro-mt:10px;--cap-gap:8px;--name-fs:16px;--name-ls:.08em;--goal-mt:3px;--goal-fs:9.5px;--link-mt:6px;--link-lh:16px;--tiles-pb:20px;
  --row-gap:clamp(12px, 2.5vh, 24px);
}
/* Claude 2026-10-12 (fix round 1): the sheet asks for exactly its two rows (app.js equalCaps sets --plate, the
   column's width, and --cap) and the height left over is shared evenly above the masthead, between it and the
   sheet, and under the sheet, so the page never reads top heavy; a short frame has none left and the plates
   give way exactly as before */
.lobby-in{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;width:100%;padding-bottom:env(safe-area-inset-bottom);}
/* the masthead, as the site's white sections: the gold perfumer, the title set like "New Arrivals" (Montserrat 300,
   tracked), the small gold diamond under it, one quiet sentence */
.lobby-head{flex:none;padding:calc(14px + env(safe-area-inset-top)) var(--gutter) 14px;text-align:center;background:#ffffff;}
.emblem{display:block;width:auto;height:40px;margin:0 auto 8px;}
.title{
  margin:0;
  font:300 24px/1.15 var(--sans);letter-spacing:.14em;color:var(--ink);text-wrap:balance;
}
/* the site's ornament under a section title */
.orn{display:block;width:6px;height:6px;margin:10px auto 0;background:var(--gold);transform:rotate(45deg);}
.intro{margin:var(--intro-mt) auto 0;max-width:31em;font-size:12px;line-height:1.5;letter-spacing:.01em;color:var(--mute);text-wrap:balance;}

/* a returning winner: the sentence under the diamond becomes "Royal Oud reserved until 25 Nov  Open my basket",
   the basket an underlined word with a 38 px touch target that costs no height */
.lobby.has-held .intro{display:none;}
.held{margin:var(--intro-mt) auto 0;max-width:31em;font:400 12px/1.5 var(--sans);color:var(--ink);text-wrap:balance;}
.held-t{display:inline;margin:0;}
.held-t b{font-weight:600;}
.btn-link{
  appearance:none;-webkit-appearance:none;display:inline;background:none;border:0;border-radius:0;
  margin:-10px -4px;padding:10px 4px;
  font:500 12px/1.5 var(--sans);letter-spacing:.02em;color:#2c2c2c;white-space:nowrap;cursor:pointer;
  text-decoration:underline 1px #2c2c2c;text-decoration-line:underline;text-decoration-thickness:1px;
  text-decoration-color:#2c2c2c;text-underline-offset:6px;
}
/* the link takes its own line under the sentence (the intro it replaces is two lines, so it costs no height) */
.held .btn-link{display:table;margin:-6px auto -10px;}
.btn-link:active{color:#83660b;text-decoration-color:#83660b;}
.btn-link:focus-visible{outline:1px solid var(--gold);outline-offset:0;}

/* the sheet: four plates on white, each preview drawing its own engraved plate */
.tiles{
  flex:0 1 calc(2 * (var(--plate, 160px) + var(--cap, 80px)) + var(--row-gap) + var(--tiles-pb));min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:var(--row-gap);padding:0 12px var(--tiles-pb);
  background:var(--bg);
}
.tiles-empty{grid-column:1 / -1;grid-row:1 / -1;align-self:stretch;margin:0;padding:24px var(--gutter);
  display:flex;align-items:center;justify-content:center;background:var(--bg);text-align:center;color:var(--mute);font-size:13px;}
.tile{
  appearance:none;-webkit-appearance:none;position:relative;min-width:0;min-height:0;margin:0;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  padding:0;background:transparent;color:var(--ink);border:0;border-radius:0;
  font:inherit;text-align:center;cursor:pointer;
  -webkit-user-select:none;user-select:none;
}
/* the preview: the largest square the cell allows, bottom centred, any spare height above it */
.tile-art{flex:1 1 0;min-height:72px;margin:0;aspect-ratio:auto;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;}
.tile-art canvas{display:block;flex:none;}
/* the caption: all four as tall as the tallest (--cap, app.js equalCaps) so the plates line up, and the Play
   link at the foot of its row's tallest caption so a row's links sit level when one goal takes two lines; what
   the row is shorter than the tallest (--cap-under) falls under its links, so each link stays with its own goal
   (Claude 2026-10-12, fix round 2) */
.tile-cap{display:flex;flex-direction:column;align-items:center;flex:none;min-height:var(--cap,auto);padding-top:var(--cap-gap);padding-bottom:var(--cap-under,0px);}
.tile-name{display:table;margin:0 auto;white-space:nowrap;font:600 var(--name-fs)/1.2 var(--serif);letter-spacing:var(--name-ls);text-transform:uppercase;color:var(--ink);}
/* the goal keeps 6 px from the column's edges; inside the store page (html.is-embed) the bottom right plate's goal ends
   28 px short of the edge, exactly where Le Nez's vial begins on a phone (the fourth plate, the third in Arabic; in
   one row of four the last, or the first in Arabic); on its own page there is no vial, so it keeps the full width */
.tile-goal{display:block;margin:var(--goal-mt) auto 0;max-width:calc(100% - 12px);font:600 var(--goal-fs)/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#83660b;text-wrap:balance;}
html.is-embed .tile:nth-child(4) .tile-goal,html.is-embed[dir="rtl"] .tile:nth-child(3) .tile-goal{max-width:calc(100% - 56px);}
html.is-embed[dir="rtl"] .tile:nth-child(4) .tile-goal{max-width:calc(100% - 12px);}
.tile-goal.is-best{font-variant-numeric:lining-nums tabular-nums;}
/* the tap cue: the site's "View all ->" link, one solid ink rule under the word and the arrow together, drawn
   inside the link's own box (the next row's plate can never paint over it) */
.tile-cta{
  display:table;margin:auto auto 0;padding-top:var(--link-mt);font:400 12px/var(--link-lh) var(--sans);letter-spacing:.04em;color:#2c2c2c;white-space:nowrap;
  padding-bottom:4px;border-bottom:1px solid #2c2c2c;text-decoration:none;
}
.tile-cta .arw{display:inline-block;width:12px;height:12px;margin-inline-start:6px;vertical-align:-1px;}
/* a press shows at once: an ink rule inside the plate, the link and its rule in deep gold */
.tile:active .tile-art canvas{outline:1px solid #2c2c2c;outline-offset:-6px;}
.tile:active .tile-cta{color:#83660b;border-bottom-color:#83660b;}
@media (hover:hover){
  .tile:hover .tile-art canvas{outline:1px solid #2c2c2c;outline-offset:-6px;}
  .tile:hover .tile-cta{border-bottom-color:#83660b;}
}
/* Le Nez's vial: the bottom right plate's name a size down, then two (app.js nezFit) */
.tile.nez-1 .tile-name{font-size:calc(var(--name-fs) - 2px);letter-spacing:.04em;}
.tile.nez-2 .tile-name{font-size:calc(var(--name-fs) - 4px);letter-spacing:.02em;}

/* a tall phone: the two rows further apart than a link is from its own goal (fix round 2) */
@media (max-width:899px) and (min-height:700px){
  .lobby{--row-gap:clamp(24px, 4.2vh, 36px);}
}
/* a large phone */
@media (max-width:899px) and (min-width:420px) and (min-height:700px){
  .lobby{--intro-mt:12px;--name-fs:17px;--name-ls:.1em;--goal-fs:10px;}
  .lobby-head{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:16px;}
  .emblem{height:48px;margin-bottom:10px;}
  .title{font-size:26px;}
  .orn{margin-top:12px;}
  .intro{font-size:12.5px;}
}
/* a compact phone frame */
@media (max-width:899px) and (max-height:699.98px){
  .lobby{--intro-mt:7px;--cap-gap:6px;--link-mt:5px;--link-lh:14px;--tiles-pb:8px;--row-gap:8px;}
  .lobby-head{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:8px;}
  .emblem{height:30px;margin-bottom:6px;}
  .title{font-size:22px;}
  .orn{margin-top:7px;}
  .intro{line-height:1.4;}
}
/* a tiny one (a 320 px phone, a phone on its side): the plates drop their link, the corner buttons rise */
@media (max-width:899px) and (max-height:560px){
  .lobby{--intro-mt:6px;--cap-gap:5px;--name-fs:14px;--name-ls:.06em;--goal-mt:2px;--goal-fs:8.5px;--tiles-pb:6px;--row-gap:4px;}
  .lobby-head{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:6px;}
  .emblem{height:26px;margin-bottom:5px;}
  .title{font-size:20px;letter-spacing:.1em;}
  .orn{margin-top:6px;}
  .intro{font-size:11.5px;}
  .tile-cta{display:none;}
  html:not(.is-play) .bar{padding-top:calc(2px + env(safe-area-inset-top));}
  html:not(.is-play) #app .corner-btn{width:36px;height:36px;}
}

/* four across in one row: desktop, and any wide landscape frame (one row of plate and caption asked for) */
@media (min-width:900px), (min-width:600px) and (min-aspect-ratio:4/3){
  .tiles{flex-basis:calc(var(--plate, 160px) + var(--cap, 80px) + var(--tiles-pb));grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);row-gap:0;padding:0 24px var(--tiles-pb);column-gap:24px;}
  .tile{justify-content:center;}
  html.is-embed .tile:nth-child(4) .tile-goal{max-width:calc(100% - 56px);}
  html.is-embed[dir="rtl"] .tile:nth-child(3) .tile-goal{max-width:calc(100% - 12px);}
  html.is-embed[dir="rtl"] .tile:nth-child(1) .tile-goal{max-width:calc(100% - 56px);}
}
/* a phone on its side: no emblem, and the masthead may sit closer than the usual floor */
@media (max-height:520px) and (min-aspect-ratio:4/3){
  .emblem{display:none;}
  .lobby{min-height:280px;}
}
@media (min-width:900px){
  :root{--gutter:24px;}
  .lobby{--intro-mt:16px;--cap-gap:16px;--name-fs:24px;--name-ls:.09em;--goal-mt:6px;--goal-fs:10.5px;--link-mt:14px;--link-lh:18px;--tiles-pb:0px;}
  /* the four plates in the site's content column, not the whole window */
  .tiles{width:100%;max-width:1240px;margin-inline:auto;}
  .lobby-head{padding:calc(28px + env(safe-area-inset-top)) var(--gutter) 28px;}
  .emblem{height:64px;margin-bottom:14px;}
  .title{font-size:34px;}
  .orn{width:7px;height:7px;margin-top:16px;}
  .intro{font-size:14px;line-height:1.6;max-width:46em;}
  .held{font-size:14px;max-width:46em;}
  .btn-link{font-size:14px;}
  .tile-art{flex:0 1 300px;}
  #tiles .tile .tile-goal{max-width:none;}
  .tile-cta{font-size:13px;}
}
@media (min-width:900px) and (max-height:759.98px){
  .lobby{--intro-mt:12px;--cap-gap:12px;--name-fs:21px;--goal-mt:5px;--goal-fs:10px;--link-mt:12px;}
  .lobby-head{padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:20px;}
  .emblem{height:48px;margin-bottom:10px;}
  .title{font-size:30px;}
  .orn{width:6px;height:6px;margin-top:12px;}
  .intro{line-height:1.5;}
  .tile-art{flex:0 1 260px;}
}
/* a large phone on its side reads as a short desktop: the tiny masthead */
@media (min-width:900px) and (max-height:560px){
  .lobby{--intro-mt:6px;--cap-gap:5px;--name-fs:16px;--name-ls:.06em;--goal-mt:2px;--goal-fs:9px;}
  .lobby-head{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:6px;}
  .title{font-size:20px;letter-spacing:.1em;}
  .orn{margin-top:6px;}
  .intro{font-size:12px;line-height:1.4;}
  .tile-art{flex:1 1 0;}
  .tile-cta{display:none;}
}

/* ============================ game screen ============================ */
/* Claude 2026-10-11 (owner, on his phone: "i want use of the full screen on phone the controls dont appear and are
   not ituitive"). Top to bottom: the bar (back arrow, title, sound, full screen), the HUD and its gold track, the
   board as wide as the frame allows, and on a touch screen the PAD, which takes every pixel the board leaves. */
.game{
  position:relative;flex:1 1 auto;min-height:0;width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
/* wide screens: the board grows to the frame's full height */
@media (min-width:900px){
  .game{max-width:none;}
  html.is-play .bar{padding-inline:max(12px, calc((100% - max(var(--bw, 1040px), var(--barw, 0px))) / 2));}
}
/* Claude 2026-10-12 (FINAL-SPEC P1): the HUD is one row over the board, exactly as wide as the canvas (--bw from
   app.js; never narrower than 296 px, so three cells always fit): SCORE 5 / 20, the lives as gold drops, BEST 12,
   each a small deep gold label set on the numeral's baseline. Under it the gold track, ending in the target's
   diamond, which fills gold once the target falls. Top block: bar 52 + HUD 28 + 8 + track 2 + 8 = 98 (a short
   frame 48 + 24 + 6 + 2 + 6 = 86; a desktop 48 + 32 + 8 + 2 + 12 = 102). */
.hud,.track{
  width:var(--bw, calc(100% - 2 * var(--gutter)));min-width:min(calc(100% - 2 * var(--gutter)), 296px);
  max-width:calc(100% - 2 * var(--gutter));margin-inline:auto;
}
.hud{
  flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:10px;
  height:28px;padding:0;
  -webkit-user-select:none;user-select:none;
}
.hud-cell{display:flex;align-items:baseline;gap:8px;min-width:0;}
.hud-score{justify-content:flex-start;}
.hud-lives{justify-content:center;}
.hud-best{grid-column:3;justify-content:flex-end;}   /* the end column even when the lives cell is hidden */
.hud-k{font:600 9px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#83660b;white-space:nowrap;}
.hud-n{
  font:500 22px/1 var(--serif);color:var(--ink);white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1;
  unicode-bidi:isolate;
}
/* the score as a bold serif numeral with its target quieter; a life is a small gold drop, filled while it is
   left and a gold hairline once it is lost (the drops stand on the baseline) */
.hud-big{font-weight:600;}
.hud-of{font-weight:500;font-size:.62em;color:#a59d8c;}
.hud-sq{display:flex;gap:5px;align-items:flex-end;}
.hud-drop{display:block;flex:none;width:11px;height:15px;overflow:visible;}
.hud-drop path{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;}
.hud-drop.on path{fill:var(--gold);}
.track{position:relative;flex:none;height:2px;margin-top:8px;overflow:visible;}
.track::before{content:"";position:absolute;left:0;right:0;top:.5px;height:1px;background:rgba(44,44,44,.14);}
.track i{position:relative;display:block;height:2px;width:0;background:#b8913a;transition:width .15s linear;}
.track::after{
  content:"";position:absolute;inset-inline-end:-3px;top:-2px;width:6px;height:6px;
  background:#ffffff;border:1px solid #83660b;transform:rotate(45deg);
}
.track.is-done::after{background:#b8913a;border-color:#b8913a;}

/* the stage: the board box, the pad under it (touch) and the card overlay over both */
.stage{flex:1 1 0;min-height:0;position:relative;display:flex;flex-direction:column;margin-block:8px 0;}
/* core.js fits the canvas to this box every resize, at the top. Without a pad the box takes the whole stage
   and app.js lifts the key legend to just under the canvas; the whole box takes swipes and drags. */
.board{
  position:relative;flex:1 1 0;min-width:0;min-height:0;margin-inline:12px;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:center;
  touch-action:none;-ms-touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
.board canvas{display:block;flex:none;}
/* with the pad: the box asks for the board's full-width height (--ideal, app.js) and gives way only so the pad
   keeps its minimum (--padmin); the pad grows into everything left */
.game.has-pad .board{flex:0 1 var(--ideal, 60%);min-height:120px;}
.pad{
  position:relative;flex:1 0 var(--padmin, 150px);min-width:0;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
  touch-action:none;-ms-touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
/* a phone on its side: the board on the left, the pad beside it */
.game.pad-side .stage{flex-direction:row;}
.game.pad-side .board{flex:1 1 0;}
.game.pad-side .pad{flex:0 0 min(44%, 380px);}
.game.pad-side .ov[data-card="ready"]{inset-inline-end:min(44%, 380px);}
/* ...and the HUD and its track over the board's column, not the whole width (fix round 3: centred on the game
   they floated over the gap between board and pad): the column is what the pad leaves, the canvas centred in it */
.game.pad-side .hud,.game.pad-side .track{
  margin-inline:max(var(--gutter), calc((100% - min(44%, 380px) - max(var(--bw, 0px), min(calc(100% - 2 * var(--gutter)), 296px))) / 2)) auto;
}
/* under any card but the target card the pad presses nothing and shows nothing (the card has the room) */
.pad[data-state="off"] > *{visibility:hidden;}
/* the target card covers the board only: the pad under it is live, and a press on it is Play */
.game.has-pad .ov[data-card="ready"]{bottom:auto;height:auto;min-height:var(--boardh, 50%);max-height:100%;}

/* ---------------- the instruments (Claude 2026-10-12, FINAL-SPEC P1) ----------------
   Each is a plate drawn like the boards' (app.js draws the SVG at its exact pixel size): the paper field inside a
   1 px ink rule, a deep gold rule 4.4 px in, a gold diamond on each corner, and its word set into the gold rule
   at the top like an engraved inscription. Presses show at once (nothing here transitions). The pad is dir="ltr":
   left stays left in Arabic. */
.pad-inst{position:relative;flex:none;}
.pad-inst > svg{position:absolute;left:0;top:0;display:block;overflow:visible;pointer-events:none;}
.pl-field{fill:#fcfaf5;stroke:#2c2c2c;stroke-width:1;}
.pl-rule{fill:none;stroke:#83660b;stroke-width:.75;}
.pl-dia{fill:#83660b;}
.pad-word{
  position:absolute;top:1.5px;left:50%;transform:translateX(-50%);padding:0 8px;background:#fcfaf5;
  font:600 9px/12px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#83660b;white-space:nowrap;pointer-events:none;
}
.pw-d{display:inline-block;width:4px;height:4px;margin:0 8px;background:#b8913a;transform:rotate(45deg);vertical-align:2px;}
/* La Rose (Snake, Maze): four sectors around a dead hub and an engraved compass rose. A press lights the
   instrument's own marks, at once: the sector takes a pale gold wash under the gold rule and the rose, that
   direction's needle turns solid ink and its chevron is drawn heavier in ink (Claude 2026-10-12, fix round 1:
   a solid ink wedge flashed a shape the idle drawing never shows). Each key is the box inside its own sector
   (where a screen reader's click lands). */
.pad-rose .pk{
  appearance:none;-webkit-appearance:none;position:absolute;margin:0;padding:0;width:50%;height:25%;
  background:transparent;color:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
.pad-rose .pk:focus{outline:none;}
.pad-rose .pk-up{left:25%;top:0;}
.pad-rose .pk-down{left:25%;bottom:0;}
.pad-rose .pk-left,.pad-rose .pk-right{top:25%;width:25%;height:50%;}
.pad-rose .pk-left{left:0;}
.pad-rose .pk-right{right:0;}
.rose-art .sec{fill:transparent;}
.rose-art .pt-i,.rose-art .pt-p{fill:#fcfaf5;}
.rose-art .pt-i,.rose-art .pt-e{stroke:#83660b;stroke-width:.75;stroke-linejoin:miter;}
.rose-art .pt-e{fill:none;}
.rose-art .pt-g{fill:#83660b;}
.rose-art .chev{fill:none;stroke:#2c2c2c;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;}
.rose-art .hub{fill:#b8913a;stroke:#83660b;stroke-width:.75;}
.pk-up.on ~ .rose-art .sec-up,.pk-right.on ~ .rose-art .sec-right,
.pk-down.on ~ .rose-art .sec-down,.pk-left.on ~ .rose-art .sec-left{fill:#f1e7cf;}
.pk-up.on ~ .rose-art .pt-p-up,.pk-up.on ~ .rose-art .pt-g-up,.pk-right.on ~ .rose-art .pt-p-right,.pk-right.on ~ .rose-art .pt-g-right,
.pk-down.on ~ .rose-art .pt-p-down,.pk-down.on ~ .rose-art .pt-g-down,.pk-left.on ~ .rose-art .pt-p-left,.pk-left.on ~ .rose-art .pt-g-left{fill:#2c2c2c;}
.pk-up.on ~ .rose-art .chev-up,.pk-right.on ~ .rose-art .chev-right,
.pk-down.on ~ .rose-art .chev-down,.pk-left.on ~ .rose-art .chev-left{stroke:#2c2c2c;stroke-width:2.6;}
/* La Regle (Ping Pong, Invaders): a ruler under the board, your piece riding its gold line. Held, the field
   warms, the gold rule turns ink and a short ink needle with a gold index crosses the line at the finger
   (Claude 2026-10-12, fix round 2: not a hairline through the whole plate). */
.pad-rail{align-self:flex-start;}
.game.pad-side .pad-rail{align-self:center;}
.rail-art .rl-line{fill:none;stroke:#83660b;stroke-width:.75;}
.rail-art .rl-tick{fill:none;stroke:#a59d8c;stroke-width:1;}
.pad-rail.on .pl-field{fill:#f6f2e9;}
.pad-rail.on .pl-rule{stroke:#2c2c2c;stroke-width:1;}
.pad-rail.on .pad-word{background:#f6f2e9;}
.rail-aim{display:none;position:absolute;left:0;top:calc(var(--ly, 40px) - 14px);width:1px;height:24px;background:#2c2c2c;pointer-events:none;will-change:transform;}
.rail-aim::after{content:"";position:absolute;left:-2px;top:11px;width:5px;height:5px;background:#b8913a;transform:rotate(45deg);}
.pad-rail.on .rail-aim{display:block;}
.pad-knob{position:absolute;left:0;display:block;background:#2c2c2c;pointer-events:none;will-change:transform;}
.pad-knob::after{content:"";position:absolute;}
/* Ping Pong: the paddle, gold at its ends, a paper cut along it */
/* (fix round 3: the carriage grows with the plate; app.js sets --kh, and --kw for the atomiser, from its height) */
.pad-knob.is-paddle{top:calc(var(--ly, 40px) - var(--kh, 10px) / 2);height:var(--kh, 10px);border-left:4px solid #b8913a;border-right:4px solid #b8913a;}
.pad-knob.is-paddle::after{left:2px;right:2px;top:calc(50% - .5px);height:1px;background:#fcfaf5;}
/* Invaders: the atomiser as the board draws it, in miniature: the ink flacon and its paper label, the gold
   collar, the nozzle and the gold bulb at its side (app.js atomArt, 26 x 28 on an 88 px plate, standing on the line) */
.pad-knob.is-atom{top:calc(var(--ly, 40px) - var(--kh, 28px));width:var(--kw, 26px);height:var(--kh, 28px);background:transparent;}
.pad-knob.is-atom::after{display:none;}
.pad-knob.is-atom svg{display:block;overflow:visible;width:100%;height:100%;}
.pad-knob .at-ink{fill:#2c2c2c;}
.pad-knob .at-gold{fill:#b8913a;}
.pad-knob .at-lab{fill:none;stroke:#fcfaf5;stroke-width:1;}
.pad-knob .at-tube{fill:none;stroke:#2c2c2c;stroke-width:1;}

/* inside the store page on a phone (not full screen) Le Nez's vial sits over the frame's bottom right corner:
   the pad and the card buttons keep clear of it (app.js sets is-nez); the rose keeps its centre on the board's */
#game.is-nez .pad{padding-right:max(46px, env(safe-area-inset-right));}
#game.is-nez .pad[data-kind="rose"]{padding-left:max(46px, env(safe-area-inset-left));}
#game.is-nez .card-actions{padding-inline:22px;}
/* the claim card: Reserve can reach down to the vial (a long locale, an error line, a 320 px phone), so the whole
   card keeps the 22 px inset (fix round 2: the card, not only the form, so the line above the field shares its
   measure) and its buttons are one width with the field (Claude 2026-10-12, fix round 1); the
   claimed card's buttons end above the vial in every locale, so they stay one width with the code, and only its
   centred until line stops short of the vial. A tiny frame (560 and under) has no width to spare: its form stays
   full width and only the buttons keep the inset, as before. */
@media (min-height:561px){
  #game.is-nez .card-claim{padding-inline:calc(var(--gutter) * 2 + 22px);}
  #game.is-nez .card-claim .card-actions{padding-inline:0;}
}
#game.is-nez .card-claimed .card-actions{padding-inline:0;}
/* the target card sits on the board, above the pad and so above the vial: its button keeps the card's width */
#game.is-nez.has-pad .card-ready .card-actions{padding-inline:0;}
#game.is-nez .card-claimed .card-until{padding-inline:22px;}
/* on a short frame the shelf would reach down under the vial (H - 97): its buttons keep the gap free */
@media (max-width:899px) and (max-height:699.98px){#game.is-nez .card-pick .card-actions{margin-top:43px;}}

/* a computer (no touch): the keys as paper keycaps and a gold word, right under the board, the groups split
   by small gold diamonds; everything sits on the keycaps' bottom row (the inverted T's up key stands above it).
   A key held down lights its cap in ink, at once (Claude 2026-10-12, FINAL-SPEC P2) */
.hint{
  flex:none;position:relative;z-index:6;margin:0;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;row-gap:8px;
  padding-block:10px 14px;padding-inline:var(--gutter);
  -webkit-user-select:none;user-select:none;pointer-events:none;
}
.game[data-card]:not([data-card="ready"]) .hint{visibility:hidden;}
.kg{display:inline-flex;align-items:flex-end;gap:10px;white-space:nowrap;}
.kcs{display:inline-flex;align-items:center;gap:3px;}
.kcs-t{display:inline-grid;grid-template-columns:repeat(3,24px);grid-template-rows:24px 24px;gap:3px;}
.kcs-t .kc{grid-row:2;}
.kcs-t .kc:first-child{grid-row:1;grid-column:2;}
.kc{
  box-sizing:border-box;min-width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(44,44,44,.35);border-radius:0;background:#fcfaf5;color:#2c2c2c;
}
.kc-w{padding:0 7px 0 8px;font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;}
.kc.on{background:#2c2c2c;border-color:#2c2c2c;color:#fcfaf5;}
.kc .kc-i{display:block;width:13px;height:13px;overflow:visible;}
.kc-or{align-self:center;padding-inline:3px;font:400 12px/1 var(--sans);color:#a59d8c;}
.kw{display:block;margin-inline-end:-.22em;font:600 9.5px/24px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#83660b;}
.ksep{flex:none;display:block;width:5px;height:5px;margin:0 18px 9.5px;background:#b8913a;transform:rotate(45deg);}
.hint.is-wrap{column-gap:28px;}
.hint.is-wrap .ksep{display:none;}
/* the board's control sentence, for a screen reader */
.sr-only{
  position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
@media (min-width:900px){
  html.is-play .bar{min-height:48px;padding-block:calc(4px + env(safe-area-inset-top)) 4px;}
  .hud{height:32px;}
  .hud-k{font-size:10px;}
  .hud-n{font-size:26px;}
  .stage{margin-top:12px;}
  .hint{padding-block:14px 16px;}
}
/* a phone: one compact top row (a square back arrow instead of the worded button) */
@media (max-width:899px){
  html.is-play .bar{min-height:52px;padding-block:calc(6px + env(safe-area-inset-top)) 6px;}
  html.is-play .bar-back{width:40px;height:40px;min-height:0;padding:0;gap:0;justify-content:center;color:#83660b;}
  html.is-play .bar-back .arw{width:20px;height:20px;}
  html.is-play .bar-back-t{display:none;}
  html.is-play .bar-back:active{color:#2c2c2c;outline:1px solid #2c2c2c !important;outline-offset:-3px !important;}
}
/* a short phone frame (under 700): bar 48, HUD 24 */
@media (max-width:899px) and (max-height:699.98px){
  html.is-play .bar{min-height:48px;padding-block:calc(4px + env(safe-area-inset-top)) 4px;}
  .hud{height:24px;}
  .hud-k{font-size:8.5px;}
  .hud-n{font-size:20px;}
  .track{margin-top:6px;}
  .stage{margin-top:6px;}
}

/* ============================ overlay cards ============================ */
/* Claude 2026-10-11 design pass: a card is a solid page of the white ground over the play area (no veil), its
   content centred, no box inside a box. It is its own scroller and never chains a scroll to the store page.
   Claude 2026-10-12 (the fit): cards appear at once (no fade). */
.ov{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:0;
  background:#ffffff;touch-action:manipulation;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.ov-in{flex:1 0 auto;display:flex;flex-direction:column;}
.card{
  flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:stretch;
  width:100%;max-width:480px;margin:0 auto;padding:24px calc(var(--gutter) * 2) 20px;
  background:transparent;border:0;border-radius:0;text-align:center;
}
/* a touch screen: a card over the board AND the pad keeps its buttons at thumb height and centres the rest
   in the room above them */
.game.has-pad .card-dock > :first-child{margin-top:auto;}
.game.has-pad .card-dock > .card-actions{margin-top:auto;margin-bottom:0;padding-top:28px;}

/* The prize cards (win, pick, claim, claimed) COVER the HUD, the track, the board and the pad below the bar:
   the stage stops being their frame, so the board never resizes under them and Keep playing comes back to
   the same board. Each fills exactly that area; its pictures give way before anything scrolls (the scroll
   stays only as the safety net for a phone keyboard). Auto margins centre them, so an overflow is never cut
   off at the top. */
.game[data-card="win"] .stage,.game[data-card="pick"] .stage,
.game[data-card="claim"] .stage,.game[data-card="claimed"] .stage{position:static;}
.ov[data-card="win"] .ov-in,.ov[data-card="pick"] .ov-in,.ov[data-card="claim"] .ov-in,.ov[data-card="claimed"] .ov-in{height:100%;}
.card-win,.card-pick,.card-claim,.card-claimed{height:100%;justify-content:flex-start;}
.card-win > :first-child,.card-claim > :first-child,.card-claimed > :first-child{margin-top:auto;}
.card-win > :last-child,.card-claim > :last-child,.card-claimed > :last-child{margin-bottom:auto;}

.card-title{margin:0;font:600 26px/1.18 var(--serif);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);text-wrap:balance;}
/* every card title carries the site's small gold diamond under it */
.card-title::after{content:"";display:block;width:6px;height:6px;margin:16px auto 2px;background:var(--gold);transform:rotate(45deg);}
.card-title.is-large{font-size:34px;}
/* the target card (Claude 2026-10-12, fix round 1): no white page over the board, the board's engraved plate
   reads around the card (flat: no veil, no blur, no shadow). Its title in the tracked capitals of every other card.
   Fix round 2: the game's first frame cut at the card's edges (half a drop, a tail stub, maze walls stopping dead)
   read as a box pasted on, so the plate's own paper (opaque, not a veil) fills it inside its gold rule (app.js
   --bpx/--bpy, at the canvas's scale), and the card is a cartouche drawn like the plates: an ink rule and a deep
   gold rule 6 px inside it. */
.ov[data-card="ready"]{background:transparent;}
.ov[data-card="ready"]::before{
  content:"";position:absolute;top:var(--bpy, 6px);height:calc(var(--bh, 100%) - 2 * var(--bpy, 6px));
  left:calc((100% - var(--bw, 100%)) / 2 + var(--bpx, 6px));right:calc((100% - var(--bw, 100%)) / 2 + var(--bpx, 6px));
  background:#fcfaf5;pointer-events:none;
}
/* never wider than the board under it (--bw, the canvas's width, less the plate's margin): a narrow court (Ping
   Pong on a 320 px phone) keeps its plate showing at both sides */
.card.card-ready{position:relative;z-index:1;flex:0 0 auto;width:calc(100% - 48px);max-width:min(400px, calc(var(--bw, 448px) - 24px));margin:auto;padding:24px 20px 20px;background:#ffffff;border:1px solid #2c2c2c;outline:1px solid #83660b;outline-offset:-6px;}
.card-ready .card-actions{margin-top:22px;}
.game.has-pad .card-ready .card-padnote{margin-top:12px;}
.card-title.is-ready{font-size:22px;line-height:1.24;letter-spacing:.08em;}
.card-line{margin:12px auto 0;max-width:30em;font-size:14px;line-height:1.55;color:var(--ink);text-wrap:balance;}
.card-line.is-mute{color:var(--mute);font-size:13.5px;}
.card-line b{font-weight:600;}
.card-note{margin-top:12px;font:600 10.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);}
/* the target card's "or tap the controls below": only where there is a pad */
.card-padnote{display:none;margin-top:14px;font-size:12.5px;color:var(--mute);}
.game.has-pad .card-padnote{display:block;}
.game.pad-side .card-padnote{display:none;}
.card-err{margin:10px 0 0;min-height:0;font-size:12.5px;line-height:1.45;color:var(--err);text-wrap:pretty;}
.card-err:empty{display:none;}
.card-actions{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:28px;}

/* OVER: "12 of 20", the score large and the target quieter */
.card-score{margin:16px 0 0;font:500 26px/1 var(--serif);color:var(--mute);}
.card-score-n{font-weight:500;font-size:96px;letter-spacing:-.02em;color:var(--ink);}
/* a short frame (a phone on its side, a low window): the cards that are not prize cards come down so their
   buttons stay on screen (the prize cards have their own tiers below) */
@media (max-height:520px){
  .card-over,.card-paused,.card-error{padding-block:14px 12px;}
  .card.card-ready{padding-block:14px 12px;}
  .card-score{margin-top:8px;}
  .card-score-n{font-size:64px;}
  .card-title.is-large{font-size:28px;}
  .card-over .card-title{font-size:22px;}
  .card-over .card-title::after{margin:8px auto 1px;}
  .card-over .card-line{margin-top:8px;}
  .game.has-pad .card-over > .card-actions,.game.has-pad .card-paused > .card-actions,.game.has-pad .card-error > .card-actions{padding-top:14px;}
}

/* WIN: the gold perfumer emblem, then the final score, large, in deep gold; the buttons docked at thumb height */
.card-win{padding:20px calc(var(--gutter) * 2) 16px;}
.card-emblem{display:block;flex:none;width:auto;height:64px;margin:0 auto 12px;}
.card-big{margin:0 0 10px;font:500 120px/.86 var(--serif);letter-spacing:-.02em;color:var(--gold-deep);}
.card-win .card-title{font-size:24px;}
.card-win .card-title::after{margin:12px auto 2px;}
.card-win .card-line{margin-top:8px;font-size:13.5px;line-height:1.5;}
.card-win .card-actions{margin-top:20px;}
.game.has-pad .card-win > .card-actions{padding-top:20px;}
.card-win .btn-text{min-height:44px;}

/* PICK: the seven packshots as the site's white product cards (deep gold house over the name), four over three
   on a 12-track grid at every width, split by 1px warm rules. The photos give way (down to nothing) before the
   card scrolls, and never grow past 1.5x the narrow cell (--shot-max). */
.ov[data-card="pick"] .ov-in,.card-pick{height:100%;}
.card-pick{
  max-width:none;padding:16px calc(var(--gutter) * 2) 8px;
  --shot-max:min(calc(37.5vw - 1px), 170px);--cell-fixed:69px;
}
.pick-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;}
.pick-body > :first-child{margin-top:auto;}
.pick-body > :last-child{margin-bottom:auto;}
.card-pick .card-title{flex:none;font-size:22px;}
.card-pick .card-title::after{margin:10px auto 2px;}
.card-pick .card-err{flex:none;}
.shelf{
  flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rule);border-block:1px solid var(--rule);margin:12px calc(var(--gutter) * -2) 0;
  max-height:calc(2 * (var(--shot-max) + var(--cell-fixed)) + 3px);
}
.shelf > *{grid-column:span 3;}
.shelf > :nth-child(n+5){grid-column:span 4;}
.shelf-item{
  appearance:none;-webkit-appearance:none;position:relative;margin:0;min-width:0;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:8px 4px 10px;text-align:center;cursor:pointer;
  background:var(--paper);color:var(--paper-ink);border:0;border-radius:0;
}
.shot{position:relative;display:block;overflow:hidden;}
/* the studio shots leave wide white around the bottle: 128% and a nudge down trims only white. Centred on the
   frame's axis, each bottle stands on the axis of its cell, the claim card and the product-page column (Claude
   2026-10-12, fix round 2: the old 54% nudge set every bottle 5 to 16 px left of its axis; measured on all seven).
   Only a phone's first row, cells 73 to 99 px wide, keeps a 2% nudge: there the Creed bottles' soft shadow, falling
   right, would meet the clip box edge as a faint grey line; at 52% it fades out first (edge 244 to 251 of 255,
   the bottle about 2 px left of its axis) */
.shot img{position:absolute;left:50%;top:50%;display:block;height:128%;width:auto;max-width:none;object-fit:contain;transform:translate(-50%,-44.5%);}
@media (max-width:899px){.shelf > :nth-child(-n+4) .shot img{transform:translate(-52%,-44.5%);}}
.shot-fb{display:none;width:16px;height:21px;color:var(--gold);}
.shot.no-shot .shot-fb{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.shelf-shot{flex:1 1 auto;width:100%;min-height:0;max-height:var(--shot-max);}
.shelf-house{
  display:block;flex:none;max-width:100%;margin-top:6px;overflow:hidden;
  font:600 9px/12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-gold);white-space:nowrap;
}
.shelf-name{
  display:block;flex:none;max-width:100%;min-height:30px;margin-top:3px;
  font:400 12px/15px var(--sans);letter-spacing:.02em;color:var(--paper-ink);text-wrap:balance;
}
/* chosen: a 2px deep gold rule inside the card, at once */
.shelf-item[aria-pressed="true"]{outline:2px solid var(--gold-deep);outline-offset:-2px;}
.shelf-item:disabled{cursor:default;}
.shelf-item:disabled .shot{opacity:.3;}
.shelf-item:disabled .shelf-house,.shelf-item:disabled .shelf-name{color:#8a8a8a;}
@media (hover:hover){
  .shelf-item:not(:disabled):hover .shelf-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;}
}
.card-pick .card-actions{flex:none;margin-top:12px;gap:2px;}
.card-pick .card-actions .btn-primary{min-height:48px;padding-block:10px;}
.card-pick .card-actions .btn-text{min-height:40px;padding-block:8px;}

/* CLAIM: the chosen bottle over its name and the form. A tall phone stacks them and the bottle gives way
   first; a short phone sets bottle and name as one summary row; a desktop takes the product page's split. */
.card-claim{padding:16px calc(var(--gutter) * 2) 12px;}
.claim-head{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;}
.card-shot{flex:0 1 200px;width:100%;min-height:0;margin:0 0 10px;}
.card-shot.no-shot{display:none;}
.claim-id{flex:none;min-width:0;}
.card-house{margin:0 0 4px;font:500 10.5px/14px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);}
.card-claim .card-title{font-size:24px;line-height:28px;}
.card-claim .card-title::after{margin:10px auto 2px;}
.card-claim .claim-id .card-line{margin-top:8px;font-size:13px;line-height:19px;}
.claim-form{flex:none;margin:14px 0 0;text-align:start;}
.field{
  display:block;width:100%;min-height:48px;margin:0;padding:12px 14px;
  font:400 16px/1.2 var(--sans);color:var(--ink);background:#ffffff;
  border:1px solid var(--line-field);border-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none;
}
.field:focus{border-color:#2c2c2c;box-shadow:inset 0 0 0 1px #2c2c2c;outline:none;}
.field::placeholder{color:#9a9a9a;}
/* the 18+ line is one full-width row under the field: the whole row is the tap target */
.check{
  display:flex;align-items:center;gap:12px;min-height:48px;margin:0;padding:10px 14px;
  border:1px solid var(--line-field);border-top-width:0;
  font-size:12.5px;line-height:1.45;color:var(--ink);cursor:pointer;
}
.check span{text-wrap:pretty;}
.check input{
  -webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;
  border:1px solid var(--ink);border-radius:0;background:#ffffff;cursor:pointer;
}
.check input:checked{
  background:#2c2c2c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.2l3.2 3.1L14 5.6' fill='none' stroke='%23ffffff' stroke-width='1.8'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.card-rule{margin:12px 0 0;max-width:none;font-size:12px;color:var(--mute);text-align:start;}
.claim-form .card-actions{margin-top:16px;}
.claim-form .card-actions .btn-text{min-height:44px;}

/* CLAIMED: the bottle and "Royal Oud is yours.", then the code large between two hairlines (a tap copies it),
   the basket, Copy code | Play again, and the date it holds until */
.card-claimed{padding:20px calc(var(--gutter) * 2) 16px;}
.card-claimed .card-shot{flex:none;height:132px;margin:0 0 12px;}
.card-claimed .card-title{font-size:24px;}
.card-claimed .card-title::after{margin:12px auto 2px;}
.claimed-body{flex:none;}
.claim-code{
  margin:12px 0 0;padding:16px 6px;border-block:1px solid var(--rule);
  font:500 22px/1.2 var(--sans);letter-spacing:.2em;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;word-break:break-all;-webkit-user-select:all;user-select:all;cursor:copy;
}
.card-claimed .card-actions{margin-top:20px;}
.card-until{font-size:12.5px;line-height:1.45;margin-top:12px;}

/* a tall phone: the shelf's primary set smaller and less tracked, so "Continue with Ombre Nomade" holds one
   line (a long name still takes a balanced second); the house rule centred in the centred column */
@media (max-width:899px) and (min-height:700px){
  .card-pick .card-actions .btn-primary{font-size:12px;letter-spacing:.12em;padding-inline:12px;}
  [dir="rtl"] .card-pick .card-actions .btn-primary{font-size:16px;letter-spacing:0;}
  .card-claim .card-rule{text-align:center;}
}
/* a compact phone frame (561 to 699) */
@media (max-width:899px) and (max-height:699.98px){
  .card-win{padding-block:12px 10px;}
  .card-emblem{height:44px;margin-bottom:8px;}
  .card-big{font-size:96px;}
  .card-win .card-title{font-size:22px;}
  .card-win .card-title::after,.card-claimed .card-title::after{margin:7px auto 1px;}
  .card-win .card-line{margin-top:6px;font-size:13px;line-height:1.45;}
  .card-win .card-actions,.card-claimed .card-actions{margin-top:16px;}
  .game.has-pad .card-win > .card-actions{padding-top:16px;}
  .card-win .btn-primary,.card-claimed .btn-primary{min-height:48px;padding-block:10px;}
  .card-win .btn-text{min-height:40px;padding-block:8px;}

  .card-pick{padding-block:10px 6px;--cell-fixed:60px;}
  .card-pick .card-title{font-size:20px;}
  .card-pick .card-title::after{margin:8px auto 2px;}
  .shelf{margin-top:10px;}
  .shelf-item{padding:6px 4px 8px;}
  .shelf-house{margin-top:5px;font-size:8.5px;line-height:11px;}
  .shelf-name{min-height:28px;margin-top:2px;font-size:11.5px;line-height:14px;}
  /* one 48 px row: Back a word at the inline start, the primary takes the rest (two lines allowed) */
  .card-pick .card-actions{flex-direction:row-reverse;align-items:center;gap:12px;margin-top:10px;}
  .card-pick .card-actions .btn-primary{flex:1 1 auto;width:auto;min-width:0;min-height:48px;padding:6px 10px;font-size:11px;letter-spacing:.14em;line-height:1.25;}
  .card-pick .card-actions .btn-text{flex:none;width:auto;min-height:48px;margin:0;padding:6px 4px;}

  .card-claim{padding-block:12px 10px;}
  .card-claim .claim-head{flex:none;flex-direction:row;align-items:center;gap:14px;text-align:start;padding-bottom:14px;border-bottom:1px solid var(--rule);}
  .card-claim .card-shot{flex:none;width:76px;height:95px;margin:0;}
  .card-claim .claim-id{flex:1 1 auto;}
  .card-claim .card-title{font-size:20px;line-height:24px;}
  .card-claim .card-title::after{margin:8px 0 2px;}
  .card-claim .claim-id .card-line{margin-top:6px;font-size:12.5px;line-height:17px;}
  .claim-form .card-actions{margin-top:14px;}

  .card-claimed{padding-block:12px 10px;}
  .card-claimed .card-shot{height:96px;margin-bottom:10px;}
  .card-claimed .card-title{font-size:22px;}
  .claim-code{margin-top:10px;padding-block:14px;}
  .card-claimed .btn-half{min-height:44px;padding-block:10px;}
  .card-claimed .card-until{margin-top:8px;}
}
/* a tiny one (560 and under) */
@media (max-width:899px) and (max-height:560px){
  .card-emblem{display:none;}
  .card-big{margin-bottom:8px;font-size:80px;}
  .card-win .card-title,.card-claimed .card-title{font-size:20px;}

  .card-pick{padding-block:8px 6px;--cell-fixed:54px;}
  .card-pick .card-title{font-size:18.5px;}
  .card-pick .card-title::after{margin:7px auto 1px;}
  .shelf{margin-top:8px;}
  .card-pick .card-actions{margin-top:8px;}

  .card-claim .claim-head{gap:12px;padding-bottom:10px;}
  .card-claim .card-shot{width:64px;height:80px;}
  .card-claim .card-title{font-size:18px;line-height:22px;}
  .card-claim .card-title::after{margin:6px 0 1px;}
  .claim-form{margin-top:10px;}
  .field{min-height:44px;padding-block:10px;}
  .claim-form .card-actions{margin-top:12px;}
  .claim-form .btn-primary{min-height:46px;padding-block:10px;}
  .claim-form .card-actions .btn-text{min-height:40px;padding-block:8px;}
  .card-rule{margin-top:10px;}

  .card-claimed .card-shot{display:none;}
  .claim-code{margin-top:8px;padding-block:12px;}
  .card-claimed .card-actions{margin-top:14px;}
  .card-claimed .btn-primary{min-height:46px;}
  .card-claimed .card-until{margin-top:6px;font-size:12px;line-height:1.4;}
}
/* tiny and narrow: the target card a size down (it sits on a court as narrow as 214 px) */
@media (max-width:899px) and (max-height:560px), (max-width:359px){
  .card.card-ready{padding:16px 14px 14px;}
  .card-title.is-ready{font-size:17px;letter-spacing:.06em;}
  .card-ready .card-title::after{margin:10px auto 2px;}
  .card-ready .card-actions{margin-top:14px;}
  .card-ready .btn-primary{min-height:46px;padding-block:10px;}
  .game.has-pad .card-ready .card-padnote{margin-top:10px;font-size:12px;}
}
/* tiny and narrow: the shelf's captions a size down */
@media (max-width:899px) and (max-height:560px), (max-width:359px){
  .shelf-item{padding:5px 3px 7px;}
  .shelf-house{margin-top:4px;font-size:8px;line-height:10px;letter-spacing:.08em;}
  .shelf-name{min-height:26px;margin-top:2px;font-size:10px;line-height:13px;letter-spacing:.01em;}
  .card-pick{--cell-fixed:54px;}
}
/* a phone on its side: the shelf beside its title and buttons (34% / 66%) */
@media (min-aspect-ratio:4/3) and (max-height:520px){
  .card-pick{
    display:grid;grid-template-columns:34% 66%;grid-template-rows:minmax(0,1fr) auto auto;
    grid-template-areas:"title shelf" "err shelf" "acts shelf";padding:10px var(--gutter) 8px;--shot-max:240px;
  }
  .pick-body{display:contents;}
  .card-pick .card-title{grid-area:title;align-self:center;margin:0;padding-inline-end:var(--gutter);}
  .card-pick .card-err{grid-area:err;margin:0 0 8px;padding-inline-end:var(--gutter);}
  .card-pick .shelf{grid-area:shelf;margin:0;max-height:none;border:0;}
  .card-pick .card-actions{grid-area:acts;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding-inline-end:var(--gutter);}
  .card-pick .card-actions .btn-text{min-height:40px;margin:0 auto;}
}

@media (min-width:900px){
  .card{padding-block:32px 28px;}
  .card-title{font-size:30px;}
  .card-title.is-large{font-size:40px;}
  .card:not(.card-pick){max-width:540px;}
  .card-line{font-size:15px;}

  .card-win{padding-block:32px 28px;}
  .card-emblem{height:88px;margin-bottom:14px;}
  .card-big{margin-bottom:12px;font-size:150px;}
  .card-win .card-title{font-size:30px;}
  .card-win .card-title::after,.card-claimed .card-title::after{margin:14px auto 2px;}
  .card-win .card-line{margin-top:12px;font-size:15px;line-height:1.55;}
  .card-win .card-actions,.card-claimed .card-actions{margin-top:28px;}

  .card-pick{padding-block:24px 20px;}
  .card-pick .card-title{font-size:30px;}
  .card-pick .card-title::after{margin:15px auto 2px;}
  .card-pick{--shot-max:220px;--cell-fixed:69px;}
  .shelf{width:100%;max-width:1040px;margin:16px auto 0;}
  .shelf-item{padding:12px 10px 14px;}
  .shelf-house{margin-top:8px;font-size:10px;line-height:13px;letter-spacing:.14em;}
  .shelf-name{min-height:18px;margin-top:4px;font-size:13.5px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* a 420 px primary in the middle, Back at its inline end */
  .card-pick .card-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px) minmax(0,1fr);align-items:center;column-gap:20px;margin-top:16px;}
  .card-pick .card-actions .btn-primary{grid-column:2;min-height:52px;padding-block:12px;}
  .card-pick .card-actions .btn-text{grid-column:3;justify-self:start;margin:0;}

  /* claim and claimed: the product page's split, the bottle at the inline start, the words beside it */
  .card.card-claim,.card.card-claimed{
    display:grid;grid-template-columns:minmax(0,340px) minmax(0,420px);grid-template-rows:auto auto;
    grid-template-areas:"shot id" "shot form";column-gap:56px;max-width:calc(816px + 4 * var(--gutter));align-content:center;justify-content:center;text-align:start;
  }
  .card.card-claimed{grid-template-areas:"shot id" "shot body";}
  .card-claim .claim-head,.card-claimed .claim-head{display:contents;}
  .card-claim .card-shot,.card-claimed .card-shot{grid-area:shot;align-self:center;width:100%;height:min(400px, calc(100vh - 112px));margin:0;}
  .card-claim .claim-id,.card-claimed .claim-id{grid-area:id;align-self:end;margin:0;}
  .card-claim .claim-form{grid-area:form;align-self:start;margin:18px 0 0;}
  .card-claimed .claimed-body{grid-area:body;align-self:start;margin:0;}
  .card-claim .card-title,.card-claimed .card-title{font-size:30px;line-height:36px;}
  .card-claim .card-title::after,.card-claimed .card-title::after{margin-inline:0;}
  .card-claim .claim-id .card-line{margin-inline:0;font-size:14px;line-height:21px;}
  .card-claimed .card-until{margin-inline:0;}
  .claim-code{margin-top:12px;padding-block:18px;}
  /* in the start-aligned split the diamond would read as a stray bullet: a short gold rule under the name instead
     (the site's rule under a start-aligned title); the code and Back start on the column's edge too */
  .card-claim .card-title::after,.card-claimed .card-title::after{width:32px;height:1px;transform:none;margin:14px 0 2px;}
  .card-claimed .claim-code{padding-inline:0;}
  .card-claim .card-actions .btn-text{align-self:flex-start;margin-inline:0;padding-inline:0;}
  .card.card-ready{max-width:min(460px, calc(var(--bw, 508px) - 48px));padding:32px 28px 28px;}
  .card-title.is-ready{font-size:30px;}
}
@media (min-width:900px) and (max-height:759.98px){
  .card-emblem{height:64px;}
  .card-big{font-size:120px;}
  .card-pick{padding-block:16px 14px;}
  .card-pick .card-title{font-size:26px;}
  .card-pick .card-title::after{margin:11px auto 2px;}
  .shelf{margin-top:12px;}
  .card-pick .card-actions{margin-top:12px;}
}
/* a wide but short frame (a large phone on its side, a low window): the phone's tiny card tier */
@media (min-width:900px) and (max-height:560px){
  .card{padding-block:14px 12px;}
  .card-title{font-size:24px;}
  .card-title.is-large{font-size:28px;}
  .card-score{margin-top:8px;}
  .card-score-n{font-size:64px;}
  .game.has-pad .card-dock > .card-actions{padding-top:14px;}
  .card-emblem{display:none;}
  .card-win{padding-block:12px 10px;}
  .card-big{margin-bottom:8px;font-size:80px;}
  .card-win .card-title,.card-claimed .card-title{font-size:22px;}
  .card-win .card-title::after{margin:7px auto 1px;}
  .card-win .card-line{margin-top:6px;font-size:13.5px;}
  .card-win .card-actions,.card-claimed .card-actions{margin-top:14px;}
  .game.has-pad .card-win > .card-actions{padding-top:14px;}
  .card-win .btn-primary,.card-claimed .btn-primary,.claim-form .btn-primary{min-height:46px;padding-block:10px;}
  .card-win .btn-text,.claim-form .card-actions .btn-text{min-height:40px;padding-block:8px;}
  .card-pick{padding-block:8px 6px;}
  .card-pick .card-title{font-size:20px;}
  .card-pick .card-title::after{margin:7px auto 1px;}
  .shelf{margin-top:8px;}
  .card-pick .card-actions{margin-top:8px;}
  .card-pick .card-actions .btn-primary{min-height:46px;padding-block:8px;}
  .card-claim .card-title,.card-claimed .card-title{font-size:24px;line-height:30px;}
  .card-claim .card-title::after,.card-claimed .card-title::after{margin:10px 0 2px;}
  .card-claim .card-shot,.card-claimed .card-shot{height:min(400px, calc(100vh - 96px));}
  .card-claim .claim-form{margin-top:12px;}
  .field{min-height:44px;padding-block:10px;}
  .check{min-height:44px;padding-block:8px;}
  .card-rule{margin-top:8px;}
  .claim-form .card-actions{margin-top:12px;}
  .claim-code{margin-top:8px;padding-block:12px;}
  .card-claimed .card-until{margin-top:6px;}
  .card.card-ready{padding:16px 20px 14px;}
  .card-title.is-ready{font-size:24px;}
}

[dir="rtl"] .arw{transform:scaleX(-1);}

/* Cormorant sets old-style figures by default and the font shorthand above resets the body's lining
   request, so every serif line asks again: "20" in a sentence sits on the line like the HUD's */
.title,.tile-name,.bar-title,.card-big,.card-score,.card-title,.shelf-name{font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;}
/* each line takes its direction from its own first letter: an English line in the Arabic frame (a key
   not translated yet) keeps its full stop at its end, and Arabic copy is unaffected */
.title,.intro,.tile-name,.tile-goal,.tiles-empty,.held-t,.bar-title,.card-note,.card-padnote,.card-rule,.card-score,
.card-title,.card-line,.card-err,.check span,.hint{unicode-bidi:plaintext;}

/* Arabic: tracked capitals mean nothing to its script (and spacing breaks the joins), and its small text
   reads a size up */
[dir="rtl"] .hud-k,[dir="rtl"] .kw,[dir="rtl"] .kc,[dir="rtl"] .card-note,[dir="rtl"] .pad-word,[dir="rtl"] .title,[dir="rtl"] .tile-name,
[dir="rtl"] .tile-goal,[dir="rtl"] .tile-cta,[dir="rtl"] .bar-title,[dir="rtl"] .card-title,[dir="rtl"] .btn,[dir="rtl"] .bar-back{letter-spacing:0;}
[dir="rtl"] .intro{font-size:14px;}
[dir="rtl"] .btn{font-size:16px;}
[dir="rtl"] .btn-text,[dir="rtl"] .btn-half,[dir="rtl"] .btn-compact{font-size:15px;}
[dir="rtl"] .tile-goal{font-size:12px;font-weight:500;}
[dir="rtl"] .tile-cta{font-size:13px;}
[dir="rtl"] .card-padnote,[dir="rtl"] .check,[dir="rtl"] .card-until{font-size:13.5px;}
[dir="rtl"] .held-t{font-size:14px;}
[dir="rtl"] .btn-link{letter-spacing:0;font-size:14px;}
[dir="rtl"] .tile.nez-1 .tile-name,[dir="rtl"] .tile.nez-2 .tile-name{letter-spacing:0;}
[dir="rtl"] .card-line{font-size:15px;}
[dir="rtl"] .card-line.is-mute{font-size:14.5px;}
[dir="rtl"] .card-note,[dir="rtl"] .hud-k,[dir="rtl"] .kw{font-size:12px;}
/* the house rule a size up in Arabic, level with the 18+ line above it (12 px Arabic read as a different face) */
[dir="rtl"] .card-rule{font-size:13.5px;}
[dir="rtl"] .kw{margin-inline-end:0;}
[dir="rtl"] .kc-tr{font-size:12px;}
[dir="rtl"] .shelf-house{letter-spacing:0;}
[dir="rtl"] .pad-word{font-size:11px;line-height:14px;top:.5px;}
/* the masthead and the small gold labels in the house's Arabic face, Noto Naskh, like the plate names, the bar
   and the card titles over them (fix round 3: Montserrat has no Arabic, so the system face stood in for the
   page's largest line). Latin letters and figures stay Montserrat. */
[dir="rtl"] .title{font-family:'Montserrat','Noto Naskh Arabic',var(--sans);font-weight:500;line-height:1.35;}
[dir="rtl"] .tile-goal,[dir="rtl"] .hud-k,[dir="rtl"] .pad-word{font-family:'Montserrat','Noto Naskh Arabic',var(--sans);font-weight:600;}
@media (max-width:899px){
  [dir="rtl"] .lobby{--name-fs:18px;}
  /* the Arabic intro in two balanced lines like the others, not one line from edge to edge */
  [dir="rtl"] .intro{max-width:21em;}
}
/* a perfume's name (Latin letters only) keeps its capitals' tracking in the Arabic frame (app.js heading) */
[dir="rtl"] .card-title.is-latin{letter-spacing:.07em;}
/* a 320 px phone: the bar's title tracked a little less; a name still too long to stay centred between the two
   side columns takes the room between the back arrow and the tools (app.js fitTight), never running under them */
@media (max-width:359px){.bar-title{letter-spacing:.1em;}}
html.is-play .bar.is-tight{grid-template-columns:auto minmax(0,1fr) auto;}
html.is-play .bar.is-tight .bar-title{max-width:none;}
@media (max-width:899px) and (max-height:699.98px){[dir="rtl"] .card-pick .card-actions .btn-primary{font-size:14px;}}
@media (min-width:900px){
  [dir="rtl"] .intro{font-size:16px;}
  [dir="rtl"] .tile-goal{font-size:14px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
}