/* Reversi: tuxedo cats on the kitchen tiles at night.
   Dark is the cat asleep back up, Light is the same cat belly up; a capture is a roll.
   The first half draws everything in CSS (the Plain cats skin, and the stand-in for the others).
   The skins block at the end swaps in pictures, palettes and motion per skin (see skins.js and ART.md). */
.rv-page{
 --rv-ink:#f3ead6;--rv-dim:#a9bcbd;--rv-night:#0b1418;--rv-panel:#11222a;--rv-line:#2f4a52;
 --rv-lamp:#f2b56b;--rv-coral:#ef8f6f;--rv-fur:#1b222b;--rv-fur-hi:#3a4653;--rv-cream:#f5ecd6;--rv-cream-lo:#d9cbab;--rv-pink:#e79c98;
 --rv-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --rv-hint:var(--rv-lamp);--rv-piece:.86;--rv-last-radius:50%;--rv-grout-ink:#081317;--rv-seat-bg:#11222ae6;--rv-scrim-a:#0b141899;--rv-scrim-b:#0b1418d1;
 margin:0;min-height:100vh;min-height:100dvh;color:var(--rv-ink);
 background:radial-gradient(900px 520px at 12% -8%,#f2b56b24,transparent 62%),radial-gradient(800px 600px at 100% 110%,#1d5a6140,transparent 60%),var(--rv-night);
}
.rv-page.in-match{overflow:hidden}
.rv-page.in-match .rv-top,.rv-page.in-match .rv-entry{display:none}

/* ---------- the cat ---------- */
.rv-cat{--c:48px;position:relative;display:block;width:var(--c);height:var(--c);perspective:calc(var(--c)*5);pointer-events:none;flex:none}
.rv-flip{position:absolute;inset:0;transform-style:preserve-3d}
.rv-cat[data-side="Light"] .rv-flip{transform:rotateY(180deg)}
.rv-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rv-belly{transform:rotateY(180deg)}
.rv-face i{position:absolute;display:block}
.rv-face .ear{top:1%;width:34%;height:34%;background:var(--rv-fur);clip-path:polygon(50% 0,100% 100%,0 100%)}
.rv-face .ear::after{content:"";position:absolute;inset:38% 30% 0;background:var(--rv-pink);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.75}
.rv-face .ear.l{left:9%;transform:rotate(-20deg)}.rv-face .ear.r{right:9%;transform:rotate(20deg)}
.rv-face .body{inset:13% 3% 3%;border-radius:50% 50% 48% 48%/54% 54% 46% 46%}
.rv-back .body{background:radial-gradient(circle at 34% 26%,var(--rv-fur-hi),var(--rv-fur) 58%,#0f141a);box-shadow:0 calc(var(--c)*.05) 0 #04080ab3,inset 0 0 0 calc(var(--c)*.025) #5b6a7a4d}
.rv-back .eye{top:51%;width:17%;height:9%;border-bottom:calc(var(--c)*.04) solid var(--rv-cream);border-radius:0 0 60% 60%}
.rv-back .eye.l{left:25%}.rv-back .eye.r{right:25%}
.rv-back .nose{top:63%;left:46%;width:8%;height:6%;background:var(--rv-pink);border-radius:40% 40% 60% 60%}
.rv-back .tail{right:1%;bottom:4%;width:54%;height:17%;border-radius:999px;background:linear-gradient(90deg,var(--rv-cream) 0 24%,#27303b 25%);transform:rotate(-13deg);box-shadow:0 calc(var(--c)*.03) 0 #04080a99}
.rv-belly .body{background:radial-gradient(ellipse 58% 30% at 50% 0,var(--rv-fur) 0 97%,transparent 100%),radial-gradient(circle at 40% 38%,#fffaf0,var(--rv-cream) 60%,var(--rv-cream-lo));box-shadow:0 calc(var(--c)*.05) 0 #04080ab3,inset 0 0 0 calc(var(--c)*.05) var(--rv-fur)}
.rv-belly .eye{top:46%;width:15%;height:9%;border-top:calc(var(--c)*.04) solid var(--rv-fur);border-radius:60% 60% 0 0}
.rv-belly .eye.l{left:25%}.rv-belly .eye.r{right:25%}
.rv-belly .nose{top:57%;left:45.5%;width:9%;height:7%;background:var(--rv-pink);border-radius:40% 40% 60% 60%}
.rv-belly .paw{bottom:5%;width:25%;height:23%;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 50% 66%,var(--rv-pink) 0 24%,transparent 27%),radial-gradient(circle at 26% 34%,var(--rv-pink) 0 11%,transparent 14%),radial-gradient(circle at 50% 24%,var(--rv-pink) 0 11%,transparent 14%),radial-gradient(circle at 74% 34%,var(--rv-pink) 0 11%,transparent 14%),#fffaf0;box-shadow:0 0 0 calc(var(--c)*.035) var(--rv-fur);transform-origin:50% 100%}
.rv-belly .paw.l{left:11%}.rv-belly .paw.r{right:11%}

/* Rolling over: up off the tile, over, and a small settle. The roll keeps turning the same way each time. */
.rv-cat.roll .rv-flip{animation:rv-roll-back .56s cubic-bezier(.35,.05,.3,1) var(--d,0s) both}
.rv-cat.roll[data-side="Light"] .rv-flip{animation-name:rv-roll-belly}
.rv-cat.roll[data-side="Light"] .paw{animation:rv-paw .26s ease-in-out calc(var(--d,0s) + .52s) 3}
.rv-cat.roll[data-side="Light"] .paw.r{animation-direction:reverse}
.rv-cat.roll[data-side="Dark"] .tail{animation:rv-tail .5s ease-in-out calc(var(--d,0s) + .52s) 1}
.rv-cat.plop .rv-flip{animation:rv-plop .34s cubic-bezier(.3,1.4,.5,1) both}
@keyframes rv-roll-belly{0%{transform:rotateY(0) scale(1)}45%{transform:rotateY(95deg) scale(1.24)}78%{transform:rotateY(180deg) scale(.93,.9)}100%{transform:rotateY(180deg) scale(1)}}
@keyframes rv-roll-back{0%{transform:rotateY(180deg) scale(1)}45%{transform:rotateY(275deg) scale(1.24)}78%{transform:rotateY(360deg) scale(.93,.9)}100%{transform:rotateY(360deg) scale(1)}}
@keyframes rv-plop{0%{opacity:0;scale:1.4}60%{opacity:1;scale:.92 .88}100%{scale:1}}
@keyframes rv-paw{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg) translateY(-6%)}}
@keyframes rv-tail{0%,100%{transform:rotate(-13deg)}40%{transform:rotate(-2deg)}70%{transform:rotate(-18deg)}}

/* ---------- entry page ---------- */
.rv-top{border-bottom-color:var(--rv-line)}.rv-top span{color:var(--rv-lamp);font-family:var(--rv-mono)}
.rv-entry{max-width:1040px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,64px);align-items:start;padding-top:clamp(24px,5vw,56px)}
.rv-kicker{margin:0 0 10px;font:700 12px/1.4 var(--rv-mono);letter-spacing:.16em;color:var(--rv-lamp)}
.rv-hero h1{font:italic 700 clamp(46px,8vw,84px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.02em;margin:0 0 18px;color:var(--rv-ink)}
.rv-hero p{margin:0 0 14px;max-width:46ch;color:#cfdad6;line-height:1.7}
.rv-hero .rv-aside{font:13px/1.6 var(--rv-mono);color:var(--rv-dim)}
.rv-hero-cats{display:flex;gap:clamp(6px,1.4vw,12px);margin:0 0 22px;padding:12px;width:max-content;max-width:100%;background:#0a171c;border-radius:10px;box-shadow:inset 0 0 0 1px var(--rv-line)}
.rv-hero-cats .rv-cat{--c:clamp(40px,9vw,64px);padding:0}
.rv-setup{display:grid;gap:14px}
.rv-card{padding:18px 20px;background:#11222ad9;border:1px solid var(--rv-line);border-radius:12px}
.rv-card h2{margin:0 0 4px;font:700 18px/1.3 system-ui,sans-serif;color:var(--rv-ink)}
.rv-card p{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--rv-dim)}
.rv-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.rv-fields label{font-size:12px;color:#b6c4c7;margin-bottom:6px}.rv-fields input{background:#0c1a20;border-color:#4b636b}
.rv-actions{display:flex;gap:10px;flex-wrap:wrap}
.rv-setup button{background:var(--rv-lamp);color:#22160a}.rv-setup button.secondary{background:#1d3640;color:var(--rv-ink)}
.rv-note{margin:0;font:12px/1.6 var(--rv-mono);color:var(--rv-dim)}
.rv-error{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;margin:0;max-width:min(560px,calc(100vw - 24px));padding:10px 14px;border-radius:8px;background:#3a1b1b;border:1px solid #c6736d;color:#ffd8d2;font:14px/1.5 system-ui,sans-serif}

/* ---------- the table ---------- */
.rv-match{
 --rv-bar:50px;--rv-seat:64px;--rv-cap:30px;--rv-gap:10px;--rv-side:0px;--rv-edge:max(8px,env(safe-area-inset-left));
 --rv-size:min(calc(100vw - 2*var(--rv-edge)),calc(100dvh - var(--rv-bar) - 2*var(--rv-seat) - var(--rv-cap) - 5*var(--rv-gap)));
 --rv-pad:clamp(13px,calc(var(--rv-size)*.036),24px);--rv-grout:clamp(2px,calc(var(--rv-size)*.006),4px);
 --rv-cell:calc((var(--rv-size) - 2*var(--rv-pad) - 7*var(--rv-grout))/8);
 position:fixed;inset:0;display:grid;grid-template-rows:var(--rv-bar) minmax(0,1fr);
 background:
  radial-gradient(70vmax 46vmax at 8% -6%,#f2b56b2e,transparent 62%),
  radial-gradient(60vmax 50vmax at 104% 108%,#1d5a614d,transparent 62%),
  repeating-linear-gradient(0deg,#ffffff07 0 1px,transparent 1px 120px),repeating-linear-gradient(90deg,#ffffff07 0 1px,transparent 1px 120px),
  var(--rv-night);
}
.rv-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:0 max(10px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));border-bottom:1px solid #ffffff14;background:#0b1418cc}
.rv-bar-title{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 auto}
.rv-bar-home{font:italic 700 19px/1 Georgia,serif;color:var(--rv-ink);text-decoration:none;flex:none}
.rv-bar-room,.rv-bar-net{letter-spacing:0;font:12px/1.3 var(--rv-mono);color:var(--rv-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rv-bar-net{color:var(--rv-lamp)}.rv-bar-net:empty{display:none}
.rv-bar-actions{display:flex;gap:6px;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.rv-bar button{min-height:34px;padding:6px 11px;border-radius:7px;font:600 12.5px/1 var(--rv-mono);background:var(--rv-lamp);color:#22160a;white-space:nowrap}
.rv-bar button.ghost{background:transparent;color:var(--rv-ink);border:1px solid #ffffff2b}
.rv-bar button.ghost:hover{background:#ffffff12}.rv-bar button.ghost[aria-pressed="true"]{border-color:var(--rv-lamp);color:var(--rv-lamp)}
.rv-floor{display:grid;min-height:0;min-width:0;padding:var(--rv-gap) var(--rv-edge);gap:var(--rv-gap);justify-content:center;align-content:center;justify-items:center;
 grid-template-columns:var(--rv-size);grid-template-areas:"far" "table" "caption" "near"}
.rv-seats{display:contents}
.rv-table{grid-area:table}.rv-under{grid-area:caption;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px;max-width:100%;min-height:var(--rv-cap)}.rv-seat-far{grid-area:far}.rv-seat-near{grid-area:near}
.rv-caption{margin:0;max-width:100%;text-align:center;font:13px/1.35 var(--rv-mono);color:#d6e0dc;overflow-wrap:anywhere}

/* seats: a strip at the far and near edge of the board on a phone, a card at either side on a wide screen */
.rv-seat{display:flex;align-items:center;gap:12px;width:100%;min-width:0;height:var(--rv-seat);padding:8px 14px;background:var(--rv-seat-bg);border:1px solid var(--rv-line);border-radius:12px;transition:border-color .2s,box-shadow .2s,background-color .2s}
.rv-seat .rv-cat{--c:44px}
.rv-seat.current{border-color:var(--rv-lamp);background:#1a2a2ae6;box-shadow:0 0 0 1px var(--rv-lamp),0 0 28px #f2b56b33}
.rv-seat.won{border-color:var(--rv-coral)}
.rv-seat-who{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.rv-seat-name{font:700 15px/1.2 system-ui,sans-serif;color:var(--rv-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-seat-you{font-weight:400;color:var(--rv-dim)}
.rv-seat-status{font:700 11px/1.2 var(--rv-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rv-dim)}
.rv-seat.current .rv-seat-status{color:var(--rv-lamp)}
.rv-seat-tally{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.rv-seat-count{font:700 30px/1 Georgia,serif;font-variant-numeric:tabular-nums;color:var(--rv-ink)}
.rv-seat-pose{font:11px/1.3 var(--rv-mono);color:var(--rv-dim)}

/* the board: a patch of old patterned floor tiles in a timber threshold */
.rv-frame{position:relative;width:var(--rv-size);height:var(--rv-size);padding:var(--rv-pad);border-radius:calc(var(--rv-pad)*.7);background:linear-gradient(145deg,#4a3526,#2c1e15 60%,#3a281c);box-shadow:inset 0 0 0 1px #7a5a3f,inset 0 0 0 calc(var(--rv-pad) - 3px) #0000,0 18px 50px #000a}
.rv-coord{position:absolute;display:flex;align-items:center;justify-content:center;font:700 calc(var(--rv-pad)*.52)/1 var(--rv-mono);color:#d9bf9a;opacity:.8;pointer-events:none}
.rv-coord-col{top:0;height:var(--rv-pad);width:var(--rv-cell);left:calc(var(--rv-pad) + var(--i)*(var(--rv-cell) + var(--rv-grout)))}
.rv-coord-row{left:0;width:var(--rv-pad);height:var(--rv-cell);top:calc(var(--rv-pad) + var(--i)*(var(--rv-cell) + var(--rv-grout)))}
.reversi-board{display:grid;grid-template-columns:repeat(8,var(--rv-cell));grid-auto-rows:var(--rv-cell);gap:var(--rv-grout);width:100%;height:100%;background:#081317;border-radius:3px;box-shadow:0 0 0 2px #081317,0 0 0 3px #b99a6f66}
.reversi-row,.reversi-cell{display:contents}
.reversi-square{
 --c:calc(var(--rv-cell)*var(--rv-piece));position:relative;display:flex;align-items:center;justify-content:center;width:var(--rv-cell);height:var(--rv-cell);min-width:0;min-height:0;padding:0;border:0;border-radius:2px;color:var(--rv-ink);cursor:default;
 background:
  radial-gradient(circle at 0 0,transparent 36%,#2b5a5e 37% 43%,transparent 44%),radial-gradient(circle at 100% 0,transparent 36%,#2b5a5e 37% 43%,transparent 44%),
  radial-gradient(circle at 0 100%,transparent 36%,#2b5a5e 37% 43%,transparent 44%),radial-gradient(circle at 100% 100%,transparent 36%,#2b5a5e 37% 43%,transparent 44%),
  linear-gradient(145deg,#1c444a,#163a41);
}
.reversi-square.alt{background:
  radial-gradient(circle at 0 0,transparent 36%,#285459 37% 43%,transparent 44%),radial-gradient(circle at 100% 0,transparent 36%,#285459 37% 43%,transparent 44%),
  radial-gradient(circle at 0 100%,transparent 36%,#285459 37% 43%,transparent 44%),radial-gradient(circle at 100% 100%,transparent 36%,#285459 37% 43%,transparent 44%),
  linear-gradient(145deg,#183d44,#13343b)}
.reversi-square::before{content:"";position:absolute;left:50%;top:50%;width:15%;height:15%;transform:translate(-50%,-50%) rotate(45deg);background:#b0664c;opacity:.34;border-radius:1px}
.reversi-square .rv-cat{--c:inherit}

/* where a cat may go: a lamp-lit tile, a dashed ring and the number it would turn */
.reversi-legal-mark{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:68%;height:68%;border-radius:50%;border:max(1.5px,calc(var(--rv-cell)*.035)) dashed color-mix(in srgb,var(--rv-hint) 60%,transparent);background:#0b1418c7;font:800 calc(var(--rv-cell)*.3)/1 var(--rv-mono);color:color-mix(in srgb,var(--rv-hint) 55%,#fff);transition:transform .12s,background-color .12s}
.reversi-square.legal{cursor:pointer;box-shadow:inset 0 0 0 max(1.5px,calc(var(--rv-cell)*.03)) color-mix(in srgb,var(--rv-hint) 70%,transparent),inset 0 0 calc(var(--rv-cell)*.4) color-mix(in srgb,var(--rv-hint) 25%,transparent)}
.reversi-square.legal::before{opacity:0}
.reversi-square.legal .reversi-legal-mark{border-style:solid;border-color:var(--rv-hint);background:#14110cd9}
.reversi-square.legal:hover .reversi-legal-mark,.reversi-square.legal:focus-visible .reversi-legal-mark{transform:scale(1.14);background:var(--rv-hint);color:#14110c}
.reversi-square.hint .reversi-legal-mark{opacity:.7}
.reversi-square:focus-visible{outline:3px solid #8fe0ff;outline-offset:1px;z-index:3}
.reversi-square.last-move::after{content:"";position:absolute;inset:3%;border-radius:var(--rv-last-radius);border:max(1.5px,calc(var(--rv-cell)*.03)) solid var(--rv-coral);opacity:.85;pointer-events:none}

/* results reopen button, sheets */
.rv-results .results-reopen{min-height:30px;padding:5px 12px;font:600 12.5px/1 var(--rv-mono);background:var(--rv-lamp);color:#22160a;border-color:transparent;border-radius:7px}
.rv-sheet{box-sizing:border-box;width:min(520px,calc(100vw - 24px));max-height:86dvh;overflow:auto;padding:22px 24px;background:#12242c;color:var(--rv-ink);border:1px solid #5d7a83;border-radius:14px;box-shadow:0 24px 90px #000a}
.rv-sheet::backdrop{background:#060d10c7}
.rv-sheet h2{margin:0 0 12px;font:italic 700 24px/1.2 Georgia,serif;color:var(--rv-lamp)}
.rv-sheet ol{margin:0 0 14px;padding-left:34px;color:#d6e0dc;line-height:1.65;font-size:15px}.rv-sheet li{margin:6px 0}
.rv-sheet strong{color:#ffd9a3;font-family:var(--rv-mono)}
.rv-sheet-hint{margin:0 0 16px;font:12.5px/1.6 var(--rv-mono);color:var(--rv-dim)}
.rv-sheet button{min-height:42px;background:var(--rv-lamp);color:#22160a}
.rv-log{max-height:52dvh;overflow:auto;font:13px/1.55 var(--rv-mono)}

/* wide screens: the board takes the full height and the players sit either side of it */
@media(min-width:640px) and (min-aspect-ratio:5/4){
 .rv-match{--rv-side:clamp(140px,18vw,230px);--rv-gap:14px;--rv-size:min(calc(100vw - 2*var(--rv-side) - 4*var(--rv-gap)),calc(100dvh - var(--rv-bar) - var(--rv-cap) - 3*var(--rv-gap)))}
 .rv-floor{grid-template-columns:var(--rv-side) var(--rv-size) var(--rv-side);grid-template-areas:"far table near" "caption caption caption";align-items:center}
 .rv-seat{flex-direction:column;align-items:flex-start;gap:14px;height:auto;padding:20px 18px}
 .rv-seat .rv-cat{--c:76px}
 .rv-seat-tally{align-items:flex-start}.rv-seat-count{font-size:56px}.rv-seat-name{font-size:17px;white-space:normal;overflow-wrap:anywhere}.rv-seat-who{flex:none;width:100%}
 .rv-seat-far{align-self:start;margin-top:8%}.rv-seat-near{align-self:end;margin-bottom:8%}
}
@media(max-width:560px){
 .rv-match{--rv-bar:46px;--rv-seat:58px;--rv-gap:8px;--rv-edge:6px}
 .rv-bar-room{display:none}.rv-bar-home{font-size:17px}
 .rv-bar-actions{gap:4px}.rv-bar button{padding:6px 8px;font-size:12px}
 .rv-seat{padding:6px 12px}.rv-seat .rv-cat{--c:40px}.rv-seat-count{font-size:26px}
 .rv-caption{font-size:12px}
}
@media(max-width:820px){.rv-entry{grid-template-columns:minmax(0,1fr)}.rv-fields{grid-template-columns:minmax(0,1fr)}}
@media(max-height:520px){.rv-match{--rv-seat:46px;--rv-cap:22px;--rv-gap:6px;--rv-bar:40px}.rv-seat{gap:8px;padding:10px 12px}.rv-seat .rv-cat{--c:36px}.rv-seat-count{font-size:28px}.rv-seat-far,.rv-seat-near{margin:0}.rv-caption{font-size:12px}.rv-bar button{min-height:30px}}
@media(prefers-reduced-motion:reduce){
 .rv-cat.roll .rv-flip,.rv-cat.plop .rv-flip,.rv-cat.roll .paw,.rv-cat.roll .tail{animation:none!important}
 .reversi-legal-mark,.rv-seat{transition:none}
}

/* ---------- skins ----------
   skins.js sets data-skin, data-roll and (for picture skins) data-art on the body, plus one --rv-img-* property per picture.
   Until the two piece faces have loaded (.art-ready) plain discs stand in; with no data-art the CSS cats above are used. */
.rv-mid{display:none}
.rv-cat.roll{z-index:4}
.rv-page[data-art] .rv-face>i{display:none}
.rv-page[data-art] .rv-back{background:radial-gradient(circle,var(--rv-fb-dark) 58%,#0000 60%)}
.rv-page[data-art] .rv-belly{background:radial-gradient(circle,var(--rv-fb-light) 58%,#0000 60%)}
.rv-page[data-art].art-ready .rv-back{background:var(--rv-img-dark) center/contain no-repeat}
.rv-page[data-art].art-ready .rv-belly{background:var(--rv-img-light) center/contain no-repeat}
.rv-page[data-art].art-ready .rv-mid{background:var(--rv-img-mid) center/contain no-repeat}
.rv-page[data-art] .reversi-square,.rv-page[data-art] .reversi-square.alt{background:var(--rv-img-tile) center/cover no-repeat,var(--rv-tile-fb)}
.rv-page[data-art] .reversi-square::before{content:none}
.rv-page[data-art] .reversi-board{background:var(--rv-grout-ink);box-shadow:0 0 0 2px var(--rv-grout-ink),0 0 0 3px #ffffff24}
.rv-page[data-art] .rv-frame{background:linear-gradient(145deg,#0000,#0007),var(--rv-img-frame) 0 0/220px,var(--rv-frame-fb);box-shadow:inset 0 0 0 1px #ffffff2e,0 18px 50px #000a}
.rv-page[data-art] .rv-match{background:linear-gradient(var(--rv-scrim-a),var(--rv-scrim-b)),var(--rv-img-backdrop) center/cover no-repeat,var(--rv-night)}
.rv-page[data-art]:not(.in-match){background:linear-gradient(90deg,var(--rv-night) 8%,#0000 150%),linear-gradient(var(--rv-scrim-b),var(--rv-scrim-b)),var(--rv-img-backdrop) center/cover fixed no-repeat,var(--rv-night)}

/* frames: the drawn frames are swapped in place (side, between, other side) while the piece hops */
.rv-page[data-roll="frames"] .rv-cat .rv-flip{transform:none}
.rv-page[data-roll="frames"] .rv-face{backface-visibility:visible;-webkit-backface-visibility:visible;transform:none;opacity:0}
.rv-page[data-roll="frames"] .rv-mid{display:block}
.rv-page[data-roll="frames"] .rv-cat[data-side="Dark"] .rv-back,.rv-page[data-roll="frames"] .rv-cat[data-side="Light"] .rv-belly{opacity:1}
.rv-page[data-roll="frames"] .rv-cat.roll .rv-flip{animation:rv-hop .56s cubic-bezier(.3,.1,.3,1) var(--d,0s) both}
.rv-page[data-roll="frames"] .rv-cat.roll[data-side="Light"] .rv-back,.rv-page[data-roll="frames"] .rv-cat.roll[data-side="Dark"] .rv-belly{animation:rv-f-out .56s linear var(--d,0s) both}
.rv-page[data-roll="frames"] .rv-cat.roll .rv-mid{animation:rv-f-mid .56s linear var(--d,0s) both}
.rv-page[data-roll="frames"] .rv-cat.roll[data-side="Light"] .rv-belly,.rv-page[data-roll="frames"] .rv-cat.roll[data-side="Dark"] .rv-back{animation:rv-f-in .56s linear var(--d,0s) both}
@keyframes rv-hop{0%{transform:translateY(0) scale(1) rotate(0)}40%{transform:translateY(-14%) scale(1.2) rotate(-9deg)}76%{transform:translateY(0) scale(.95,.9) rotate(4deg)}100%{transform:translateY(0) scale(1) rotate(0)}}
@keyframes rv-f-out{0%,28%{opacity:1}34%,100%{opacity:0}}
@keyframes rv-f-mid{0%,28%{opacity:0}34%,62%{opacity:1}68%,100%{opacity:0}}
@keyframes rv-f-in{0%,62%{opacity:0}68%,100%{opacity:1}}

/* switch: nothing moves. The lit face flickers on over the dark one like a tube light, or dies back off */
.rv-page[data-roll="switch"] .rv-cat .rv-flip{transform:none}
.rv-page[data-roll="switch"] .rv-face{backface-visibility:visible;-webkit-backface-visibility:visible;transform:none}
.rv-page[data-roll="switch"] .rv-belly{opacity:0}
.rv-page[data-roll="switch"] .rv-cat[data-side="Light"] .rv-belly{opacity:1;filter:drop-shadow(0 0 calc(var(--c)*.09) #ffcf6b80)}
.rv-page[data-roll="switch"] .rv-cat.roll .rv-flip{animation:none}
.rv-page[data-roll="switch"] .rv-cat.roll[data-side="Light"] .rv-belly{animation:rv-light-on .64s linear var(--d,0s) both}
.rv-page[data-roll="switch"] .rv-cat.roll[data-side="Dark"] .rv-belly{animation:rv-light-off .42s linear var(--d,0s) both}
@keyframes rv-light-on{0%{opacity:0}10%{opacity:.9}18%{opacity:.08}32%{opacity:.8}42%{opacity:.2}60%,100%{opacity:1}}
@keyframes rv-light-off{0%{opacity:1}28%{opacity:.2}42%{opacity:.7}100%{opacity:0}}

/* toss: up off the iron, end over end, and down with a slap */
.rv-page[data-roll="toss"] .rv-belly{transform:rotateX(180deg)}
.rv-page[data-roll="toss"] .rv-cat[data-side="Light"] .rv-flip{transform:rotateX(180deg)}
.rv-page[data-roll="toss"] .rv-cat.roll .rv-flip{animation:rv-toss-back .64s cubic-bezier(.3,0,.4,1) var(--d,0s) both}
.rv-page[data-roll="toss"] .rv-cat.roll[data-side="Light"] .rv-flip{animation-name:rv-toss-belly}
@keyframes rv-toss-belly{0%{transform:translateY(0) rotateX(0) scale(1)}50%{transform:translateY(-34%) rotateX(100deg) scale(1.42)}84%{transform:translateY(0) rotateX(180deg) scale(.94,.86)}100%{transform:translateY(0) rotateX(180deg) scale(1)}}
@keyframes rv-toss-back{0%{transform:translateY(0) rotateX(180deg) scale(1)}50%{transform:translateY(-34%) rotateX(280deg) scale(1.42)}84%{transform:translateY(0) rotateX(360deg) scale(.94,.86)}100%{transform:translateY(0) rotateX(360deg) scale(1)}}

/* palettes */
.rv-page[data-skin="gouache"]{--rv-fb-dark:#1a1d22;--rv-fb-light:#f3e8d2;--rv-tile-fb:#274649;--rv-frame-fb:#3a281c}
.rv-page[data-skin="riso"]{--rv-night:#0c1822;--rv-lamp:#f29477;--rv-coral:#ffd9a3;--rv-fb-dark:#16222e;--rv-fb-light:#f1e3c6;--rv-tile-fb:#1f4150;--rv-frame-fb:#2a2420;--rv-grout-ink:#0a1620}
.rv-page[data-skin="pixel"]{--rv-night:#0a1024;--rv-lamp:#f6a64d;--rv-fb-dark:#15161f;--rv-fb-light:#f4e3c3;--rv-tile-fb:#3d4d74;--rv-frame-fb:#2b1d16;--rv-grout-ink:#070b1a}
.rv-page[data-skin="pixel"] .rv-face{image-rendering:pixelated}
.rv-page[data-skin="windows"]{--rv-night:#0a1230;--rv-lamp:#ffd166;--rv-hint:#86ecd9;--rv-coral:#ff9f6b;--rv-piece:.94;--rv-last-radius:9%;--rv-fb-dark:#1b2748;--rv-fb-light:#ffd166;--rv-tile-fb:#2a3558;--rv-frame-fb:#566381;--rv-grout-ink:#111934;--rv-line:#33406a;--rv-seat-bg:#121a3ae6}
.rv-page[data-skin="griddle"]{--rv-night:#120e0b;--rv-lamp:#ffb347;--rv-hint:#9fe6ff;--rv-coral:#ff8f6b;--rv-piece:.9;--rv-fb-dark:#b9712c;--rv-fb-light:#f0deb4;--rv-tile-fb:#1b1a19;--rv-frame-fb:#2a2826;--rv-grout-ink:#0b0a09;--rv-line:#4a3d33;--rv-seat-bg:#1d1612e6}

/* the Look sheet */
.rv-looks{display:grid;gap:8px;margin:0 0 16px}
.rv-sheet .rv-look{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:0;padding:10px 14px;text-align:left;background:#0c1a20;color:var(--rv-ink);border:1px solid var(--rv-line);border-radius:10px}
.rv-sheet .rv-look strong{font:700 15px/1.3 system-ui,sans-serif;color:var(--rv-ink)}
.rv-sheet .rv-look span{font:12px/1.4 var(--rv-mono);color:var(--rv-dim)}
.rv-sheet .rv-look[aria-checked="true"]{border-color:var(--rv-lamp);box-shadow:0 0 0 1px var(--rv-lamp);background:#1a2a2a}
.rv-setup .rv-look-entry{min-height:34px;padding:6px 12px;margin-right:8px;font:600 12.5px/1 var(--rv-mono)}
@media(max-width:560px){.rv-bar button{padding:6px 7px;font-size:11.5px}}
@media(prefers-reduced-motion:reduce){.rv-cat.roll .rv-face,.rv-cat.roll .rv-flip{animation:none!important}}
/* a faint pale edge keeps the dark face readable on a dark tile */
.rv-page[data-art]:not([data-roll="switch"]).art-ready .rv-back{filter:drop-shadow(0 0 calc(var(--c)*.02) #d6e8e8a6)}