/* River Catch. Light water scene; sheets, dialogs and panels follow the phone's light or dark setting.
   Values from the approved boards R1 to R6, X2. Loaded after app.css and sunstone.css (the .sx-* base for panels and dialogs). */
.skin-river{--bg:#bfeaf5;--fg:#123248;--card:#ffffff;--mut:#4a6a80;--line:#b9dce8;--dim:rgba(12,36,54,.55);--accent:#e8641a;
  --chip:#eaf6fb;--chipline:#a8d4e2;--field:#f4fafd;--sw-off:#a8d4e2;--handle:#a8d4e2;
  --o1:#ffab38;--o2:#e8641a;--navy:#123248;
  color-scheme:light dark;background:#6cc0dc;overflow:hidden;-webkit-user-select:none;user-select:none}
@media (prefers-color-scheme:dark){
  .skin-river{--card:#0f2233;--fg:#e6f4fa;--mut:#9bb8c8;--line:#2a4a63;--chip:#1b3a52;--chipline:#2d5470;--field:#0a1927;--sw-off:#35566e;--handle:#35566e;--dim:rgba(2,10,18,.7)}
}
.skin-river .app{display:block;position:relative;height:100dvh;width:100%;background:#6cc0dc}
.skin-river .overlay{top:0;z-index:60;padding:16px}
.skin-river .overlay.sx-ov{align-items:center;justify-content:center;padding:0}
.skin-river .loading-screen{background:#6cc0dc}
.skin-river .loading-center{gap:36px;transform:translateY(-38%)}
.skin-river .loading-center .plate{background:none;border:0;box-shadow:none;font-family:Gloock,Georgia,serif;color:#fff;-webkit-text-stroke:6px #123248;paint-order:stroke fill;font-size:46px!important;padding:0;white-space:nowrap;text-align:center}
.skin-river .loading-center .bar{width:min(300px,76vw);height:22px;border-radius:11px;background:#fff;border:3px solid #123248;overflow:hidden;position:relative}
.skin-river .loading-center .bar i{display:block;height:100%;background:linear-gradient(180deg,var(--o1),var(--o2));transition:width .2s}
.skin-river .loading-txt{background:none;color:#123248;font-size:18px;font-weight:700}
.skin-river .dialog,.skin-river .menu{border:3px solid #123248;border-radius:20px;box-shadow:0 5px 0 #123248,0 16px 40px #0008;background:var(--card);color:var(--fg)}
.skin-river .dialog p{color:var(--fg)}
.skin-river .wait{background:#fff;border-color:#123248;box-shadow:0 4px 0 #123248}
.skin-river .wait i{border-color:#cfe9f3;border-top-color:#e8641a}
.skin-river .overlay.menu-wrap{align-items:flex-end;justify-content:flex-start}
.skin-river .menu .item{color:var(--fg);border-top-color:var(--line)}
.skin-river .menu .chev,.skin-river .menu .val{color:var(--mut)}
/* the game bar, on the light scene in both modes */
.skin-river .rv-foot.gbar{position:absolute;height:44px;padding:0;color:#123248}
.skin-river .rv-foot.gbar .iconbtn{color:#123248}
.skin-river .rv-foot.gbar .clock{font-family:"Courier Prime",monospace;color:#123248;font-weight:700}

/* title and round buttons */
.rv-title{display:flex;align-items:center;justify-content:center;font-family:Gloock,Georgia,serif;color:#fff;-webkit-text-stroke:6px #123248;paint-order:stroke fill;white-space:nowrap;line-height:1}
.rv-circ{display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(180deg,#fff,#dff3fa);border:3px solid #123248;box-shadow:0 3px 0 #123248;color:#123248}
.rv-circ svg{width:24px;height:24px}
.rv-circ:disabled{opacity:.45}
.rv-banner{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,var(--o1),var(--o2));border:3px solid #123248;border-radius:999px;box-shadow:0 3px 0 #123248;color:#fff;font-weight:800;white-space:nowrap;text-shadow:0 1px 0 #7a2c0a88}
.rv-banner b{font-family:"Courier Prime",monospace;font-weight:700}
.rv-banner.free b{background:#123248;color:#ffd23a;border-radius:999px;padding:2px 10px}
/* reels */
.rv-frame{background:repeating-linear-gradient(90deg,#8a5a2c 0 38px,#774a22 38px 40px);border:4px solid #3f2610;border-radius:16px;box-shadow:0 6px 0 #3f2610,0 14px 30px #0a3a5a55;overflow:hidden}
.rv-frame>*{position:absolute}
.rv-cell{position:absolute;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f4fdff,#cdeef6);border:2px solid #8cc7d8;border-radius:8px;overflow:hidden;transition:opacity .2s,box-shadow .2s}
.rv-cell svg.sym{display:block}
.rv-cell.hit{box-shadow:inset 0 0 0 3px #ffb02e,0 0 14px #ffb02ecc;z-index:1}
.rv-cell.dim{opacity:.45}
.rv-cell.bo{box-shadow:inset 0 0 0 4px #ffd23a,0 0 22px 4px #ffd23acc;z-index:2;background:linear-gradient(180deg,#fffbe0,#ffe9a0)}
.rv-tag{position:absolute;left:50%;transform:translateX(-50%);bottom:5px;background:#123248;color:#ffd23a;border:2px solid #ffd23a;border-radius:999px;font-family:"Courier Prime",monospace;font-weight:700;line-height:1;padding:3px 8px;white-space:nowrap}
.rv-tag.wild{color:#fff;border-color:#ffd23a}
.rv-fly{position:absolute;z-index:5;transition:transform .55s ease-in,opacity .55s ease-in;pointer-events:none}
.rv-trails{position:absolute;left:0;top:0;pointer-events:none;z-index:4}
.rv-ways{display:flex;align-items:center;justify-content:center;background:#fff;border:3px solid #123248;border-radius:999px;box-shadow:0 3px 0 #123248;color:#123248;font-weight:800;white-space:nowrap}
.rv-bo{filter:drop-shadow(0 4px 0 #12324855)}
/* strip, dock and controls */
.rv-strip{background:#1f4663;border:3px solid #cfe9f3;border-radius:16px;box-shadow:0 3px 0 #123248}
.rv-dock{background:#1f4663;border:3px solid #cfe9f3;border-radius:999px;box-shadow:0 4px 0 #123248}
.rv-fig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#d6ecf5;font-weight:700;font-size:14px;line-height:1}
.rv-fig b{font-family:"Courier Prime",monospace;font-size:19px;color:#fff;letter-spacing:.02em}
.rv-fig.win b{color:#ffd23a}
.rv-chipb{display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;border:3px solid #123248;border-radius:999px;box-shadow:0 3px 0 #123248;color:#123248;font-family:"Courier Prime",monospace;font-weight:700}
.rv-chipb svg{width:12px;height:12px}
.rv-chipb:disabled,.rv-circ:disabled{opacity:.5}
.rv-lab{display:flex;align-items:center;justify-content:center;font-weight:800;color:#123248;font-size:14px;line-height:1;text-shadow:0 0 4px #fff,0 0 4px #fff}
.rv-circ.tg[aria-pressed=true]{background:linear-gradient(180deg,var(--o1),var(--o2));color:#fff}
.rv-spin{display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 40% 28%,#ff8a64,#e8452c 58%,#c4301a);border:5px solid #fff;box-shadow:0 0 0 4px #123248,0 6px 0 4px #123248;color:#fff;font-family:"Courier Prime",monospace;font-weight:700}
.rv-spin svg{width:52%;height:52%}
.rv-spin:disabled{filter:grayscale(.6);opacity:.7}
.rv-spin .rvstop{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:30px;line-height:1}
.rv-spin .rvstop i{display:block;width:18px;height:18px;border-radius:4px;background:#fff}

/* sheets: bet and autoplay */
.rv-sheet-wrap{position:fixed;inset:0;z-index:60;background:var(--dim);display:flex;align-items:flex-end;justify-content:center}
.rv-sheet{width:100%;max-width:560px;background:var(--card);color:var(--fg);border-radius:28px 28px 0 0;padding:10px 20px calc(26px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px #0006;animation:rvup .22s ease-out;max-height:100%;overflow:auto;font-family:var(--body)}
@keyframes rvup{from{transform:translateY(40px);opacity:0}}
.rv-handle{width:40px;height:5px;border-radius:3px;background:var(--handle);margin:0 auto 14px}
.rv-sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.rv-sh h2{margin:0;font-size:30px;font-weight:800;color:var(--fg)}
.rv-x{width:44px;height:44px;border-radius:50%;background:var(--chip);border:0;color:var(--fg);display:flex;align-items:center;justify-content:center}
.rv-x svg{width:20px;height:20px}
.rv-l{font-weight:700;font-size:17px;color:var(--mut);margin:0 0 8px}
.rv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.rv-b{height:52px;min-width:0;background:var(--chip);border:3px solid var(--chipline);border-radius:12px;color:var(--fg);font-family:"Courier Prime",monospace;font-weight:700;font-size:15px;padding:0 2px}
.rv-grid.tall .rv-b{height:62px}
.rv-b[aria-checked=true]{background:linear-gradient(180deg,var(--o1),var(--o2));border-color:#123248;box-shadow:0 4px 0 #123248;color:#fff;transform:translateY(-1px)}
.rv-b:disabled{opacity:.4}
.rv-go{width:100%;height:58px;margin-top:6px;background:linear-gradient(180deg,var(--o1),var(--o2));border:3px solid #123248;border-radius:18px;box-shadow:0 4px 0 #123248;color:#fff;font-weight:800;font-size:22px;text-shadow:0 1px 0 #7a2c0a88}
.rv-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;font-size:19px;color:var(--fg);width:100%;text-align:left;background:none;border:0;padding:0}
.rv-row+.rv-row{margin-top:4px}
.rv-field{width:46%;height:52px;background:var(--field);border:3px solid var(--chipline);border-radius:12px;color:var(--fg);font-family:"Courier Prime",monospace;font-weight:700;font-size:19px;text-align:right;padding:0 14px}
.rv-sw{width:62px;height:34px;border-radius:17px;background:var(--sw-off);position:relative;flex:none;transition:background .15s}
.rv-sw i{position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004;transition:left .15s}
[aria-checked=true]>.rv-sw{background:#2dc27a}
[aria-checked=true]>.rv-sw i{left:32px}
.rv-hr{height:2px;background:var(--line);margin:6px 0}

/* panels and dialogs (the shared screens in screens.js, in River colours) */
.skin-river .sx-panel{background:var(--card)}
.skin-river .sx-panel>.sx-bg{display:none}
.skin-river .sx-title{font-family:Gloock,Georgia,serif;color:var(--fg)}
.skin-river .sx-sub,.skin-river .sx-dsub{color:var(--mut)}
.skin-river .sx-gold{background:linear-gradient(180deg,var(--o1),var(--o2));border:3px solid #123248;box-shadow:0 4px 0 #123248;color:#fff;border-radius:18px}
.skin-river .sx-prow,.skin-river .sx-srow,.skin-river .sx-hr{background:var(--chip);border:3px solid var(--chipline);box-shadow:none;color:var(--fg)}
.skin-river .sx-prow .v{color:var(--fg)}
.skin-river .sx-note-b,.skin-river .sx-rules p{background:var(--chip);border:2px solid var(--chipline);color:var(--fg)}
.skin-river .sx-sw{background:var(--sw-off);border:0}
.skin-river .sx-sw i{background:#fff}
.skin-river [aria-checked=true]>.sx-sw{background:#2dc27a}
.skin-river .sx-hr .tm,.skin-river .sx-hr .b{color:var(--fg)}
.skin-river .sx-hr .tm small,.skin-river .sx-hfoot,.skin-river .sx-empty{color:var(--mut)}
.skin-river .sx-hr .w{color:var(--mut)}
.skin-river .sx-hr.won{box-shadow:none;border-color:#e8641a}
.skin-river .sx-hr.won .w{color:#e8641a}
.skin-river .sx-back{border:3px solid var(--chipline);color:var(--fg)}
.skin-river .sx-dlg{background:var(--card);border:3px solid #123248;border-radius:20px;box-shadow:0 5px 0 #123248,0 16px 40px #0008;color:var(--fg)}
.skin-river .sx-dlg h2{color:var(--fg)}
.skin-river .sx-dlg .sx-dsub{color:var(--mut)}
.skin-river .sx-dlg .sx-note{color:var(--mut)}
.skin-river .sx-dlg .pill{background:linear-gradient(180deg,#ffd84a,#f5b81c);color:#123248;border:3px solid #123248;box-shadow:0 3px 0 #123248}
.skin-river .sx-dlg .pill.sec{background:var(--chip);color:var(--fg);border:3px solid var(--chipline);box-shadow:none}
.skin-river .sx-panel.dsk{border:3px solid #123248;box-shadow:0 20px 60px #000a}

.rv-banner.navy{background:#123248;text-shadow:none}
.skin-river .overlay.rv-sheet-wrap{padding:0;top:0}

.rv-circ.tg.run[aria-pressed]{background:linear-gradient(#4a93ee,#1f62c8);color:#fff;border-color:#fff}
.rv-circ.tg.run:disabled{opacity:1}
.skin-river .sx-dots{color:#123248}
.skin-river .sx-dots i{background:#a9d3e2}
.skin-river .sx-dots i.on{background:#f5821f}