@import url('../shared/empire.css');
:root { color-scheme: dark; }
body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) .masthead,body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) main { --brass-corners:url('ornaments/brass-tl.svg'),url('ornaments/brass-tr.svg'),url('ornaments/brass-bl.svg'),url('ornaments/brass-br.svg'); background-image:var(--brass-corners); background-position:left top,right top,left bottom,right bottom; background-repeat:no-repeat; border:1px solid #d1ad6866; box-shadow:inset 0 0 0 5px #0a1e19,inset 0 0 0 6px #b4914e66,0 7px 24px #0003; }
body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) .masthead { margin:16px 2vw 0; padding:25px 45px; background-color:#102b24; background-size:70px 70px; }
body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) main { width:min(1100px,96vw); margin:24px auto; padding:48px clamp(24px,5vw,66px); background-color:#0b211c; background-size:125px 125px; }
body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) main:before,body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) main:after { content:''; position:absolute; left:50%; transform:translateX(-50%); width:180px; height:50px; background:url('ornaments/conservatory-crest.svg') center/contain no-repeat; pointer-events:none; }
body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) main:before { top:0; }
body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) main:after { bottom:0; transform:translateX(-50%) rotate(180deg); }
.invitation-crest img { display:block; width:100%; height:auto; }
@media(max-width:600px) { body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) .masthead { padding:22px 27px; gap:14px; flex-wrap:wrap; background-size:48px; } body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) main { padding:38px 18px; background-size:70px; } }
body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) { background:radial-gradient(ellipse at 50% 35%,#244b3b80,transparent 65%),#0c1e1c; }
body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) .masthead,body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) footer { font-family:'Cormorant Garamond',Georgia,serif; }
body:has(.captain-invitation,.auth-invitation,.captain-home,.captain-play) nav { font:500 16px 'Cormorant Garamond',Georgia,serif; }
.captain-invitation { position:relative; text-align:center; padding:28px clamp(20px,5vw,72px) 25px; border:1px solid #bca06a99; outline:1px solid #bca06a44; outline-offset:-9px; background:linear-gradient(135deg,#19372ee6,#102822ed 60%,#1e3b2be6); box-shadow:0 20px 65px #0004; font:500 20px/1.4 'Cormorant Garamond',Georgia,serif; }
.captain-invitation:before,.captain-invitation:after { content:'✧'; position:absolute; top:-18px; color:#e7c888; font-size:30px; background:#102822; padding:0 4px; }
.captain-invitation:before { left:24px; }.captain-invitation:after { right:24px; }
.invitation-crest { width:230px; max-width:65%; margin:auto; color:#d9b879; }
.invitation-crest svg { display:block; fill:none; stroke:currentColor; stroke-width:1.3; }
.invitation-kicker { font:400 12px 'Cinzel Decorative',Georgia,serif; letter-spacing:.22em; color:#d3b783; margin:7px 0 18px; }
.captain-invitation h1 { font:400 clamp(38px,5vw,62px)/1.14 'Cinzel Decorative',Georgia,serif; letter-spacing:0; margin:0 0 16px; color:#f1e5cc; }
.captain-invitation h1 span { color:#e5c58a; }
.invitation-intro { font-size:25px; color:#c9d2c2; margin:0; }
.invitation-divider { display:flex; align-items:center; justify-content:center; gap:16px; color:#d3b783; margin:18px auto 22px; }
.invitation-divider:before,.invitation-divider:after { content:''; height:1px; width:100px; background:linear-gradient(90deg,transparent,#bda574); }
.invitation-divider:after { transform:rotate(180deg); }
.invitation-choices { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.invitation-choice { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px 22px; border:1px solid #b89b6599; outline:1px solid #b89b6533; outline-offset:-5px; background:#0b211b55; text-decoration:none; transition:background .2s,border-color .2s; }
.invitation-choice.returning { background:linear-gradient(135deg,#72592b44,#b88b3c11); border-color:#d5b375; }
.invitation-choice:hover { background:#b9974b26; border-color:#f3d69a; }
.invitation-choice strong { font:400 clamp(19px,2.4vw,26px) 'Cinzel Decorative',Georgia,serif; color:#edcf94; }
.invitation-choice>span:last-of-type { font-size:18px; line-height:1.3; color:#c3cdbd; max-width:250px; }
.choice-kicker { text-transform:uppercase; font-size:12px; letter-spacing:.13em; color:#bfba9f; }
.invitation-choice b { position:absolute; right:13px; top:10px; font-weight:400; color:#c9ab70; }
.invitation-guest { display:inline-block; color:#e8d5af; margin-top:22px; padding:7px 20px; text-underline-offset:5px; font-size:22px; }
.invitation-note { margin:10px 0 0; font-size:17px; line-height:1.4; color:#aebda9; }
.invitation-seal { color:#c6a365; margin-top:13px; }
@media(max-width:600px) { .invitation-choices { grid-template-columns:1fr; gap:12px; }.invitation-choice{padding:20px 16px}.invitation-crest{width:180px}.invitation-intro{font-size:22px}.captain-invitation{padding:22px 20px}.invitation-note{font-size:16px} }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 75% 40%, #224c404d, transparent 55%), #0c1e1c; color: #efe8d6; font: 16px/1.6 Georgia, serif; }
a { color: inherit; }
button, input, select { font: inherit; }
a, button, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #f2c67a; outline-offset: 5px; }
.masthead, footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 5vw; position: relative; z-index: 1; }
.masthead { border-bottom: 1px solid #c1a46d38; }
.brand { text-decoration: none; letter-spacing: .17em; font-size: 14px; }
.brand span { display: block; font: 10px/1.8 system-ui, sans-serif; color: #a5b6aa; letter-spacing: .2em; text-transform: uppercase; }
nav { display: flex; gap: 28px; font: 12px system-ui, sans-serif; letter-spacing: .06em; }
nav a { text-decoration: none; padding: 10px 0; }
nav a:hover { color: #e4bb76; }
main { width: min(1160px, 90vw); margin: auto; padding: 58px 0; position: relative; z-index: 1; }
main:focus { outline: none; }
footer { font: 10px system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #9daea3; margin-top: auto; }
.eyebrow { display: block; color: #d4b57b; font: 11px/1.6 system-ui, sans-serif; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 22px; }
h1, h2, p { margin-top: 0; }
h1, .die span { overflow-wrap: anywhere; }
h1 { font-weight: 400; line-height: 1.06; font-size: clamp(42px, 6vw, 76px); margin-bottom: 24px; letter-spacing: -.03em; }
h2 { font-size: 26px; font-weight: 400; }
.intro { color: #b4c1b5; max-width: 500px; font-size: 18px; }
html:has(.title-screen) { overflow-x:hidden; }
body:has(.title-screen) { overflow-x:clip; }
.title-screen { --wheel-size:min(1250px,110vw); min-height:650px; display:flex; align-items:center; position:relative; isolation:isolate; }
.title-copy { position:relative; z-index:1; width:50%; padding:30px 0; text-shadow:0 2px 20px #0c1e1c; }
.title-copy::before { content:""; position:absolute; inset:-80px -80px -80px -10vw; background:linear-gradient(90deg,#0c1e1cf5 30%,#0c1e1cd9 65%,transparent); z-index:-1; pointer-events:none; }
.title-kaleidoscope { position:absolute; width:var(--wheel-size); height:var(--wheel-size); top:50%; right:calc((100% - 100vw)/2 - var(--wheel-size)*.4); transform:translateY(-50%); pointer-events:none; z-index:-1; }
.title-glass { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 24px #c0a87922); }
.title-wheel,.title-satellites,.title-wander { transform-origin:400px 400px; }
.title-wheel { animation:title-turn 240s linear infinite; }
.title-satellites { animation:title-orbit 180s linear infinite; }
.title-wander { animation:title-wander var(--wander) ease-in-out var(--delay) infinite alternate; }
.title-gem { animation:title-gem-drift var(--duration) ease-in-out var(--delay) infinite alternate; }
.title-sparkle { transform-box:fill-box; transform-origin:center; animation:title-sparkle 9s ease-in-out var(--delay) infinite; }
.motion-paused .title-kaleidoscope * { animation-play-state:paused; }
.title-motion { margin-top:24px; padding:10px 14px; border:1px solid #baa16d55; background:#0c1e1c99; color:#b4c1b5; font:12px system-ui,sans-serif; cursor:pointer; }
@keyframes title-turn { to { transform:rotate(-360deg); } }
@keyframes title-orbit { to { transform:rotate(360deg); } }
@keyframes title-wander { from { transform:rotate(-12deg); } to { transform:rotate(12deg); } }
@keyframes title-gem-drift { 0% { transform:translate(-3px,-8px) rotate(-6deg); } 50% { transform:translate(7px,3px) rotate(2deg); } 100% { transform:translate(-4px,10px) rotate(8deg); } }
@keyframes title-sparkle { 0%,75%,100% { opacity:0; transform:scale(.25); } 84% { opacity:.95; transform:scale(1); } 92% { opacity:.15; transform:scale(.5); } }
@media(prefers-reduced-motion:reduce) { .title-kaleidoscope * { animation:none !important; } }
@media(max-width:850px) { .title-screen { --wheel-size:180vw; min-height:650px; } .title-copy { width:85%; } .title-kaleidoscope { opacity:.6; } }
.title-screen h1 { font-size: clamp(70px, 10vw, 132px); line-height: .92; text-transform: uppercase; letter-spacing: -.045em; margin: 28px 0 34px; }
.title-screen h1 span { display: block; color: #e1c08c; }
.rule { width: 72px; height: 1px; background: #c8a76b; margin: 32px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 30px; padding: 14px 25px; border: 1px solid #baa16d72; background: #18322c; color: #f5ead3; text-decoration: none; cursor: pointer; font: 13px/1.5 system-ui, sans-serif; letter-spacing: .035em; min-height: 48px; }
.button:hover { background: #2c473b; border-color: #e2bc7d; }
.button.primary { color: #192b24; background: #dcba7d; border-color: #dcba7d; }
.button.primary:hover { background: #f0d49e; }
.button:disabled { opacity: .5; cursor: wait; }
.quiet { font: 13px system-ui, sans-serif; color: #bdc8bb; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.panel { padding: 30px; background: #102824e8; border: 1px solid #c1a46d40; }
.panel h2 { margin-bottom: 18px; }
label { display: block; font: 12px/1.5 system-ui, sans-serif; color: #c6d0c1; margin-bottom: 18px; }
input, select { display: block; width: 100%; padding: 12px; margin-top: 7px; background: #091c18; border: 1px solid #9ba78e65; border-radius: 0; color: #f2ead7; min-width: 0; }
.note, .error { font: 13px/1.6 system-ui, sans-serif; color: #afbdaf; }
.error { color: #ffd0b3; }
.error:empty { display: none; }
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 32px 0; }
.menu-card { position: relative; display: block; padding: 27px; text-decoration: none; border: 1px solid #c1a46d45; background: #102824df; transition: background .2s, transform .2s; }
.menu-card:hover { background: #254237; transform: translateY(-2px); border-color: #d4b57b; }
.menu-card .number { color: #c7a56e; font: 11px system-ui, sans-serif; letter-spacing: .15em; }
.menu-card h2 { margin: 14px 0 9px; }
.menu-card p { font: 14px/1.65 system-ui, sans-serif; color: #b8c3b5; margin-bottom: 0; max-width: 440px; }
/* An odd last card spans the row rather than leaving a hole. */
.menu-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.menu-card .arrow { position: absolute; top: 24px; right: 25px; color: #d6b779; }
.home-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.home-heading h1 { font-size: clamp(36px, 5vw, 62px); }
.stash { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 24px 0 16px; }
.die { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; text-align: center; min-height: 124px; padding: 12px 8px; border: 1px solid #c1a46d55; background: linear-gradient(135deg, #29453b, #132b25); }
.die b { color: #ddbe85; font-size: 30px; font-weight: 400; }
.die span { font: 12px/1.4 system-ui, sans-serif; margin-top: 8px; }
.stash-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.stash-heading h2 { margin: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 700px) { .split, .menu-grid { grid-template-columns: 1fr; gap: 18px; } main { padding: 35px 0; } .home-heading { display: block; } .stash { grid-template-columns: repeat(3, 1fr); } footer { flex-direction: column; align-items: start; gap: 7px; } .masthead { padding: 18px 5vw; } nav { gap: 14px; } .title-screen { padding: 20px 0; } }

/* The Captain's invitation continues into profile entry. */
.auth-invitation { gap:clamp(24px,4vw,54px); align-items:center; font:500 21px/1.4 'Cormorant Garamond',Georgia,serif; }
.auth-introduction { text-align:center; padding:24px 0; }
.auth-invitation .invitation-crest { width:260px; max-width:90%; }
.auth-invitation .eyebrow { margin:28px 0 16px; font:500 14px 'Cormorant Garamond',Georgia,serif; letter-spacing:.17em; }
.auth-invitation h1 { font:400 clamp(30px,3.6vw,47px)/1.22 'Cinzel Decorative',Georgia,serif; color:#ebd4a6; letter-spacing:0; }
.auth-invitation .intro { font-size:23px; color:#c9d2c2; margin:0 auto 24px; max-width:340px; }
.auth-invitation .panel { min-width:0; padding:32px clamp(22px,3vw,38px); border:1px solid #bca06a99; outline:1px solid #bca06a44; outline-offset:-7px; background:linear-gradient(135deg,#19372e,#102822 65%,#1e3b2b); box-shadow:0 16px 42px #0003; }
.auth-invitation h2 { font:400 25px/1.3 'Cinzel Decorative',Georgia,serif; color:#edcf94; text-align:center; padding-bottom:20px; border-bottom:1px solid #bca06a55; }
.auth-invitation label { font:600 19px/1.4 'Cormorant Garamond',Georgia,serif; color:#d8d9c5; }
.auth-invitation input,.auth-invitation select { font:500 20px/1.4 'Cormorant Garamond',Georgia,serif; border-color:#bca06a77; background:#091e19; min-height:48px; }
.auth-invitation .button { width:100%; font:700 16px/1.5 'Cinzel Decorative',Georgia,serif; outline:1px solid #5d482866; outline-offset:-5px; background:linear-gradient(120deg,#b9965b,#ecd29c 48%,#c5a367); }
.auth-invitation .button:hover { background:#f0d49e; }
.auth-invitation .quiet { display:inline-block; font:500 19px/1.5 'Cormorant Garamond',Georgia,serif; text-underline-offset:4px; }
.auth-invitation .note,.auth-invitation .error { font:500 18px/1.4 'Cormorant Garamond',Georgia,serif; }
.auth-invitation .note { margin:20px 0 12px; }
@media(max-width:800px) { .auth-invitation { grid-template-columns:1fr; gap:18px; } .auth-introduction { padding:6px 0 14px; } .auth-invitation h1 { font-size:34px; } .auth-invitation .eyebrow { margin-top:16px; } }

/* A conservatory for the Captain's company and next move. */
:is(.captain-home,.captain-play) { font:500 21px/1.4 'Cormorant Garamond',Georgia,serif; }
:is(.captain-home,.captain-play) .home-heading { padding:20px 0 26px; border-bottom:1px solid #bca06a66; }
:is(.captain-home,.captain-play) .home-heading>div:first-child { min-width:0; }
:is(.captain-home,.captain-play) .eyebrow { font:600 14px/1.5 'Cormorant Garamond',Georgia,serif; letter-spacing:.19em; }
:is(.captain-home,.captain-play) h1 { font:400 clamp(30px,4vw,48px)/1.2 'Cinzel Decorative',Georgia,serif; letter-spacing:0; color:#ecd5a9; }
:is(.captain-home,.captain-play) .intro { font-size:23px; color:#c9d2c2; margin-bottom:0; }
:is(.captain-home,.captain-play) h2 { font:400 24px/1.35 'Cinzel Decorative',Georgia,serif; color:#edcf94; }
:is(.captain-home,.captain-play) .menu-card,:is(.captain-home,.captain-play)>.panel { border:1px solid #bca06a88; outline:1px solid #bca06a33; outline-offset:-6px; background:linear-gradient(135deg,#1c3b30,#102822 70%,#203d2e); box-shadow:0 10px 25px #0002; }
:is(.captain-home,.captain-play) .menu-card { padding:28px; transition:background .2s,border-color .2s; }
:is(.captain-home,.captain-play) .menu-card:hover { background:linear-gradient(135deg,#314c36,#163329); border-color:#efd39a; }
:is(.captain-home,.captain-play) .menu-card p { font:500 20px/1.4 'Cormorant Garamond',Georgia,serif; color:#c6d0be; }
:is(.captain-home,.captain-play) .number { font:400 17px 'Cinzel Decorative',Georgia,serif; color:#c6a86d; }
:is(.captain-home,.captain-play) .arrow { color:#d9bc80; }
:is(.captain-home,.captain-play) .button { font:600 18px/1.4 'Cormorant Garamond',Georgia,serif; border-color:#c9a767; background:#92723b25; }
:is(.captain-home,.captain-play) .quiet,:is(.captain-home,.captain-play) .note { font:500 18px/1.5 'Cormorant Garamond',Georgia,serif; text-underline-offset:4px; }
:is(.captain-home,.captain-play) .die { border-color:#bca06a77; background:#0b211c; }
:is(.captain-home,.captain-play) .die span { font:500 18px/1.3 'Cormorant Garamond',Georgia,serif; }
:is(.captain-home,.captain-play)>.panel:before { content:''; display:block; width:190px; height:53px; margin:0 auto 22px; background:url('ornaments/conservatory-crest.svg') center/contain no-repeat; }
@media(max-width:700px) { :is(.captain-home,.captain-play) .menu-grid { grid-template-columns:1fr; } :is(.captain-home,.captain-play) .home-heading,:is(.captain-home,.captain-play) .stash-heading { flex-wrap:wrap; gap:20px; } :is(.captain-home,.captain-play) h2 { font-size:21px; } :is(.captain-home,.captain-play) .menu-card,:is(.captain-home,.captain-play)>.panel { padding:24px 20px; } }

.captain-play { padding-top:20px; }
.captain-play>.intro { max-width:660px; margin-bottom:30px; }
.captain-play>.quiet { padding:8px 0; }
.company-bar { margin-top:24px; border:1px solid #b79758; background:#10251e; box-shadow:0 12px 30px #0005; }
.bar-plaque { text-align:center; margin:0; padding:15px; color:#d8bd80; font:20px 'IM Fell English SC',Georgia,serif; letter-spacing:.1em; background:linear-gradient(90deg,#081b17,#234034,#081b17); border-bottom:3px double #a78648; }
.bar-surface { position:relative; min-height:230px; padding:48px 24px 32px; background:radial-gradient(ellipse at 50% 0,#d4a15c30,transparent 75%),repeating-linear-gradient(2deg,#0000 0 3px,#cf9b5610 4px,#0000 6px 14px),linear-gradient(175deg,#4b2e20,#71482c 45%,#38251c); border-bottom:12px ridge #a78446; box-shadow:inset 0 18px 25px #0008,inset 0 -3px 0 #e1bc7655; }
.bar-dice { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:end; }
.bar-die { display:flex; flex-direction:column; align-items:center; text-decoration:none; min-width:0; position:relative; padding-top:18px; }
.bar-die:before { content:''; position:absolute; top:72px; width:105px; height:35px; background:#0009; border-radius:50%; filter:blur(8px); transform:rotate(-10deg); }
.bar-cube { --edge:58px; position:relative; display:block; width:var(--edge); height:var(--edge); transform-style:preserve-3d; transform:rotateX(-25deg) rotateY(-32deg); margin:10px 0 34px; }
.bar-face { position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(135deg,#ffffff25,#00000035),var(--face-color); border:2px solid #d1b271; border-radius:5px; box-shadow:inset 0 0 0 3px #1a1a1644,inset 0 0 12px #0005; backface-visibility:hidden; }
.bar-face.front { transform:translateZ(calc(var(--edge)/2)); }
.bar-face.right { transform:rotateY(90deg) translateZ(calc(var(--edge)/2)); filter:brightness(.75); }
.bar-face.top { transform:rotateX(90deg) translateZ(calc(var(--edge)/2)); filter:brightness(1.2); }
.bar-face img { width:78%; height:78%; object-fit:contain; border-radius:50%; background:#f2e4c6; }
.bar-die-name { position:relative; color:#f1dfb9; font:17px/1.25 'IM Fell English',Georgia,serif; text-align:center; text-shadow:0 2px 3px #000; overflow-wrap:anywhere; }
.bar-die:hover .bar-die-name { color:#fff4d9; text-decoration:underline; text-underline-offset:4px; }
.bar-invitation { padding:24px; text-align:center; background:linear-gradient(135deg,#e1d0a9,#c2ae82); color:#30291e; font:21px/1.45 'IM Fell English',Georgia,serif; border-top:1px solid #eed5a1; }
.bar-invitation p { margin:0 0 8px; }.bar-invitation a { font-family:'IM Fell English SC',Georgia,serif; text-underline-offset:4px; }
@media(max-width:650px) { .bar-surface { padding:35px 12px 24px; min-height:190px; }.bar-dice { gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:30px; }.bar-cube { --edge:48px; }.bar-die:before { width:70px; top:60px; }.bar-die-name {font-size:16px}.bar-invitation {padding:20px 14px;font-size:19px} }
/* Approved stool-view artwork supplies the actual Mixologist's counter. */
.bar-surface { min-height:440px; aspect-ratio:16/9; padding:0 5% 3%; display:flex; align-items:flex-end; justify-content:center; background:#38251c url('/assets/tavern/23-stool-view.webp') center/cover no-repeat; box-shadow:inset 0 0 30px #0005; }
.bar-dice { width:100%; }
.bar-parchment { width:min(460px,86%); position:relative; padding:22px 30px; margin:0 0 1%; transform:rotate(-3deg); border:0; background:radial-gradient(ellipse at 20% 30%,#fff4cd88,transparent 60%),repeating-linear-gradient(7deg,#79501f08 0 1px,transparent 1px 4px),linear-gradient(105deg,#b99b60,#ead8aa 12%,#e9d5a2 85%,#b99450); color:#3b2a17; box-shadow:5px 10px 10px #0008; clip-path:polygon(1% 3%,16% 1%,28% 3%,43% 0,61% 2%,79% 0,98% 3%,100% 22%,98% 40%,100% 62%,98% 98%,81% 96%,66% 100%,43% 97%,25% 100%,2% 97%,0 75%,2% 53%,0 30%); font-size:20px; }
.bar-parchment a { display:inline-block; padding:3px; }
@media(max-width:650px) { .bar-surface { aspect-ratio:auto; min-height:470px; padding:180px 18px 24px; background-position:40% center; }.bar-parchment { width:96%; font-size:18px; padding:22px; }.bar-dice { row-gap:12px; } }
/* Dice share the counter's warm light and sit at varied depths. */
.bar-dice { width:86%; gap:clamp(8px,2vw,28px); padding-bottom:8px; }
.bar-die { --yaw:-32deg; --depth:0px; --size:1; transform:translateY(var(--depth)) scale(var(--size)); transform-origin:50% 80%; }
.bar-die:nth-child(1) { --yaw:-19deg; --depth:7px; --size:1.02; left:5px; }
.bar-die:nth-child(2) { --yaw:-48deg; --depth:-17px; --size:.92; left:-6px; }
.bar-die:nth-child(3) { --yaw:-29deg; --depth:13px; --size:1.06; left:8px; }
.bar-die:nth-child(4) { --yaw:-57deg; --depth:-8px; --size:.96; left:-9px; }
.bar-die:nth-child(5) { --yaw:-23deg; --depth:3px; --size:1; }
.bar-cube { transform:rotateX(-25deg) rotateY(var(--yaw)); }
.bar-die:before { top:75px; width:88px; height:27px; background:radial-gradient(ellipse,#160d08b8 15%,#1e100b65 48%,transparent 72%); filter:blur(4px); transform:translate(10px,3px) rotate(-15deg); }
.bar-die:after { content:''; position:absolute; pointer-events:none; top:80px; width:66px; height:15px; border-radius:50%; background:radial-gradient(ellipse,#130b06d9 10%,#1b10098c 48%,transparent 74%); filter:blur(1.5px); transform:rotate(-8deg); }
.bar-cube { z-index:1; }
.bar-face { border-color:#b29860; border-width:1px; background:linear-gradient(140deg,#efbd6b38,#67422218 42%,#1d130c70),var(--face-color); box-shadow:inset 1px 1px 2px #ffe4a659,inset -2px -3px 7px #180e0c80; }
.bar-face.front { filter:brightness(.88) sepia(.16); }
.bar-face.right { filter:brightness(.61) sepia(.23); }
.bar-face.top { filter:brightness(1.07) sepia(.25); background:linear-gradient(125deg,#ffd28b60,#c08a3c18 60%,#3a201a38),var(--face-color); }
.bar-face img { background:#dbc493; filter:sepia(.3) brightness(.88) contrast(.9); opacity:.94; }
.bar-die-name { color:#e0c99d; font-size:16px; }
@media(max-width:650px) { .bar-dice {width:100%;gap:18px 10px;padding-bottom:10px}.bar-die:before {top:65px;width:72px;height:22px}.bar-die:after {top:69px;width:55px;height:12px}.bar-die:nth-child(n) {left:0;--depth:0px}.bar-die:nth-child(2) {--depth:-8px}.bar-die:nth-child(4) {--depth:6px} }
/* Names appear only while inspecting a die, without moving the scene. */
.bar-die-name { position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); width:max-content; max-width:180px; padding:7px 12px; border:1px solid #b99a60; border-radius:3px; background:#10251ef2; box-shadow:0 4px 12px #0007; color:#f1dfb9; text-shadow:none; font:18px/1.25 'IM Fell English',Georgia,serif; opacity:0; visibility:hidden; pointer-events:none; z-index:5; }
.bar-die { min-height:141px; }
.bar-die:hover,.bar-die:focus-visible { z-index:4; }
.bar-die:hover .bar-die-name,.bar-die:focus-visible .bar-die-name { opacity:1; visibility:visible; text-decoration:none; }
@media(max-width:650px) { .bar-die { min-height:131px; }.bar-die-name {max-width:130px;font-size:16px} }