/* Pin Drop skin: an enamel pegboard instrument under a lamp. The board's materials (enamel face, brass pins and bezel,
   glass) are SVG gradients from js/art.js; this file styles the room, the bucket plaques, the switches, the HUD's brass
   rail and the drop button. Righteous for display, Rubik for the interface. Colour tokens come from skin.js themeMap
   (readable on light and dark presets). Light: one lamp above the board — lit top edges, shade and contact shadows
   below. Motion on transform / opacity only. */
:root{--display:"Righteous",system-ui,sans-serif;--ui:"Rubik",system-ui,sans-serif;--radius:16px;--radius-sm:12px;--prim-radius:30px}
/* Righteous has one weight: never let the browser fake a bold */
.logo h1,.spin.tprim,.ovcard h2,.panel h2,.panel h3,.btn{font-weight:400}
/* the title sits under the same lamp: a contact shadow below the letters, nothing else (centring stays the shell's) */
.logo h1{text-shadow:0 2px 0 rgb(0 0 0 / .28)}

/* the room: a perforated wall that falls into the dark away from the lamp — no holes behind the board (art direction
   §5.5: no small repeating pattern right behind the frame) — and one static grain layer over the whole scene */
.pd-wall{background:radial-gradient(circle at 50% 42%,var(--wall-hole) 0 1.8px,transparent 2.4px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 44%,transparent 46%,#000 92%);mask-image:radial-gradient(ellipse 72% 68% at 50% 44%,transparent 46%,#000 92%)}
.pd-grain{opacity:.06;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px}

/* the board fills the stage between the results strip and the rows / risk choice (main.js fits the pitch to the room it
   gets); it never takes taps, so nothing it draws can cover a control */
.table-game #board{flex:1 1 auto;align-self:stretch;position:relative;min-height:0}
/* main.js keeps the cabinet, its foot and its cast shadow inside the board's box; the result line still stacks above the
   board, so a bucket's passing glow (or any paint the board lets spill) never dims the text */
.table-game #message{position:relative;z-index:1}
.pd{position:absolute;inset:0;pointer-events:none}
.pd-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pd-gate{transition:opacity var(--t-fast) var(--ease-in)}
.pd-gate.open{opacity:0}
.pd-peg,.pd-spark{transform-box:fill-box;transform-origin:center}
.pd-spark{fill:none;stroke-width:1.2;opacity:0}
/* the ball's trace: a fine line of its light, with a faint wider glow under it (static strokes) */
.pd-trace{fill:none;stroke:var(--ball);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.12}
.pd-trail{fill:none;stroke:var(--trace);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
body[data-variant="open"] .pd-cab{display:none}

/* the bucket rail: glazed enamel plaques sitting in the brass-divided tray, colour by multiplier (main.js sets the
   colour with black or white ink, whichever reads better). The glaze is a lit top lip and a shaded lower edge drawn
   with inset shadows only, so the label sits on the plain colour (and an accessibility checker can still measure it). */
.pd-rail{position:absolute;inset:0;pointer-events:none}
.pd-b{position:absolute;display:grid;place-items:center;border-radius:4px 4px 10px 10px;font-family:var(--ui);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 7px 7px -5px rgb(255 255 255 / .24),inset 0 -3px 0 rgb(0 0 0 / .2),inset 0 -9px 8px -7px rgb(0 0 0 / .16),0 2px 3px rgb(0 0 0 / .35)}
.pd-b.v span{writing-mode:vertical-rl;transform:rotate(180deg)}
.pd-b.lit{outline:2px solid var(--primary-hi);outline-offset:2px}
.pd-glow{position:absolute;border-radius:50%;opacity:0;pointer-events:none}
/* the multiplier the ball found: a small enamel plaque with a brass rim, lifted off the board */
.pd-pop{position:absolute;z-index:2;padding:4px 11px 3px;border-radius:9px;background:var(--plaque);border:1px solid var(--plaque-line);color:var(--primary);font:400 19px/1.15 var(--display);white-space:nowrap;pointer-events:none;transform:translate(-50%,0);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 6px 14px -4px rgb(0 0 0 / .55)}

/* rows and risk: two enamel switch strips with a small caption (sentence case, art direction §3.2) */
.pd-setup{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:6px 16px}
.pd-seg{display:flex;flex-direction:column;align-items:center;gap:4px}
.pd-segl{font-size:13px;font-weight:600;color:var(--muted)}
.pd-opts{display:flex;gap:3px;padding:3px;border-radius:14px;background:var(--ibtn-bg);border:1px solid var(--line);box-shadow:inset 0 2px 4px rgb(0 0 0 / .22)}
.pd-opts button{min-width:48px;min-height:44px;padding:0 12px;border:0;border-radius:11px;background:none;color:var(--ink);font:700 15px/1 var(--ui);
  transition:background-color var(--t-fast) var(--ease-std),color var(--t-fast) var(--ease-std),transform var(--t-press) var(--ease-out)}
.pd-opts button[aria-pressed="true"]{background:var(--seg-on);color:var(--seg-on-ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .4),inset 0 -2px 0 rgb(0 0 0 / .2),0 1px 2px rgb(0 0 0 / .3)}
.pd-opts button:active:not([aria-disabled="true"]){transform:translateY(1px)}
/* locked during a drop or an autoplay session: the chosen switch keeps full strength (it shows the mode in play), the
   others turn muted and the strip's rim goes dashed */
.pd-opts button[aria-disabled="true"]{cursor:not-allowed}
.pd-opts button[aria-disabled="true"]:not([aria-pressed="true"]){color:var(--muted)}
.pd-opts:has(button[aria-disabled="true"]){border-style:dashed}
.pd-opts button:not([aria-pressed="true"]):not([aria-disabled="true"]):hover{box-shadow:inset 0 0 0 1px var(--line)}
.pd-opts .short{display:none}

/* HUD: the bucket rail — a dark bar under a thin brass rail, lit along its top edge */
.hud.thud{background:var(--hud-bg);border:0;border-top:3px solid var(--rail);border-radius:6px 6px var(--radius) var(--radius);
  box-shadow:inset 0 1px 0 rgb(0 0 0 / .35),0 -1px 0 var(--rail-lo),0 14px 30px -14px rgb(0 0 0 / .7)}

/* the main button: an enamel capsule with the ball resting on it (it bobs while a drop is in flight) */
.spin.tprim{background:var(--btn-bg);color:var(--btn-ink);grid-auto-flow:column;gap:10px}
.spin.tprim::before{content:"";width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--btn-ink) 25%,#fff) 0 11%,color-mix(in srgb,var(--btn-ink) 75%,var(--btn-bg)) 34%,var(--btn-ink) 72%);
  box-shadow:0 2px 2px rgb(0 0 0 / .28)}
.spin.tprim.busy::before{animation:pd-bob .5s cubic-bezier(.5,0,.5,1) infinite alternate}
@keyframes pd-bob{to{transform:translateY(5px)}}

/* the rules: one compact table per row count (a line per bucket, a column per risk); it fits from 320 px up and scrolls
   sideways only if the text is enlarged */
.pd-paycap{margin:14px 0 6px;font-size:14px;font-weight:700;color:var(--ink)}
.pd-paywrap{overflow-x:auto;margin:0 0 12px;border:1px solid var(--line);border-radius:10px}
.pd-pay{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-pay th,.pd-pay td{padding:6px 8px;text-align:center}
.pd-pay tbody tr{border-top:1px solid var(--line)}
.pd-pay th[scope="row"]{text-align:left;font-weight:600}
.pd-pay .on{background:color-mix(in srgb,var(--accent) 16%,transparent);font-weight:700}
.pd-pay .pd-chance{color:var(--muted);font-weight:400}
.pd-paynote{font-size:13px;color:var(--muted)}
@media (max-width:420px){.pd-pay{font-size:13px}.pd-pay th,.pd-pay td{padding:6px 5px}}
@media (max-width:340px){.pd-pay{font-size:12.5px}.pd-pay th,.pd-pay td{padding:6px 3px}}

/* big wins: small brass and gold balls fall onto the card's floor and bounce (none with reduced motion: skin.js) */
.pd-rain{position:absolute;top:-28px;left:var(--x);width:calc(18px * var(--z));height:calc(18px * var(--z));border-radius:50%;
  background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--c) 15%,#fff) 0 10%,var(--c) 38%,color-mix(in srgb,var(--c) 45%,#000) 82%,color-mix(in srgb,var(--c) 60%,var(--bg2)) 100%);
  pointer-events:none;animation:pd-bounce 2.4s var(--d) both}
@keyframes pd-bounce{
  0%{transform:translate(0,0);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  40%{transform:translate(calc(var(--dx) * .4),84vh);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  57%{transform:translate(calc(var(--dx) * .65),62vh);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  73%{transform:translate(calc(var(--dx) * .85),84vh);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  82%{transform:translate(calc(var(--dx) * .93),77vh);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  91%{transform:translate(var(--dx),84vh);opacity:1}
  100%{transform:translate(var(--dx),84vh);opacity:0}
}

/* narrow phones: shorter risk names, tighter switches (6 × 44 px still fits at 320 px); the message keeps room for two
   lines, so a long result does not shrink the board after the ball has landed. The stake's rows / risk line goes: the
   switches right above the HUD show both, and "16 rows, medium" would wrap there (66–93 px of meter), so the HUD and
   the board would change height whenever the risk changed */
@media (max-width:420px){
  .table-game .message{min-height:2.45em}
  .thud #mBetSub{display:none}
  .pd-setup{gap:4px 8px}
  .pd-opts{gap:1px;padding:2px}
  .pd-opts button{min-width:44px;padding:0 5px;font-size:14px}
  .pd-opts .full{display:none}.pd-opts .short{display:inline}
  .pd-pop{font-size:16px}
}
/* a phone held sideways: the HUD on one row and no results strip (the lit bucket and the message line show the drop),
   the board on the left, rows over risk on the right, captions beside the switches */
@media (max-height:440px) and (orientation:landscape){
  .hud.thud{grid-template-columns:1fr auto 1fr auto;grid-template-areas:"acts acts acts acts" "bal bet win spin";padding-top:6px;padding-bottom:6px;row-gap:0}
  body.lefty .hud.thud{grid-template-columns:auto 1fr auto 1fr;grid-template-areas:"acts acts acts acts" "spin bal bet win"}
  .table-game .spin.tprim{height:48px}
  .thud .meter b{font-size:19px}
  .tstrip{display:none}
  .table-game .stage.tstage{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);column-gap:12px;align-items:center}
  .table-game .boardarea.tboardarea{height:100%}
  .table-game .message{min-height:20px;font-size:14px;line-height:1.3}
  .tcontrols{margin:0;width:auto}
  .pd-setup{flex-direction:column;align-items:flex-end;gap:8px}
  .pd-seg{flex-direction:row;gap:8px}
  .pd-segl{min-width:3.6em;text-align:right}
}
/* a small phone sideways (≈ 568–667 px wide): the compact HUD of small phones, so the one-row HUD fits */
@media (max-height:440px) and (orientation:landscape) and (max-width:700px){
  .hud.thud{column-gap:8px;padding-left:10px;padding-right:10px}
  .betctl{gap:6px}.betctl .meter{min-width:64px}.pm{width:34px;height:34px;font-size:20px}
  .spinbox{gap:8px}.auto{width:46px;height:46px}.auto svg{width:21px;height:21px}
  .table-game .spin.tprim{min-width:104px}
  .thud .meter b{font-size:17px}
  .pd-opts button{min-width:44px;padding:0 6px;font-size:14px}
  .pd-opts .full{display:none}.pd-opts .short{display:inline}
}
/* very short (≈ 320 px): a slimmer HUD without the stake's rows / risk line (the switches beside the board show them) */
@media (max-height:340px) and (orientation:landscape){
  .hud.thud{padding-top:4px;padding-bottom:4px}
  .table-game .spin.tprim{height:44px}
  .thud #mBetSub{display:none}
}
@media (prefers-reduced-motion:reduce){.spin.tprim.busy::before{animation:none}.pd-gate,.pd-opts button{transition:none}}