html{color-scheme:dark;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:20px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0%,#20392b,#11251c 60%,#0d1c16);color:#f3ead5;font-family:Arial,Helvetica,sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #e5c581;outline-offset:5px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}.look-shell{max-width:1240px;margin:auto;padding:0 36px 130px}.look-header{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #8e79443d}.wordmark{font-size:28px;font-weight:950;font-style:italic;letter-spacing:-1.8px}.wordmark span{color:#d6b469}.test-badge{border:1px solid #7d714a;border-radius:20px;padding:8px 12px;font-size:9px;color:#dcc58f;letter-spacing:1.8px}.look-intro{padding:30px 0 25px}.eyebrow{color:#d7b56e;font-size:9px;letter-spacing:2.5px;margin:0 0 10px;font-weight:bold}h1{font:normal 44px/1.1 Georgia,serif;letter-spacing:-1px;margin:0 0 9px}.look-intro>p:last-child{font-size:13px;color:#b3bfae;margin:0}.look-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start}.preview-panel{position:sticky;top:24px;background:#24392a;border:1px solid #948052;border-radius:18px;box-shadow:inset 0 0 0 4px #1a2c20,0 18px 40px #0002;overflow:hidden}.preview-heading{padding:21px 23px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}.preview-heading h2{font:normal 19px Georgia,serif;margin:0}.preview-heading>span{font-size:8px;letter-spacing:1.6px;color:#b4c0ac}.preview-stage{position:relative;aspect-ratio:1;overflow:hidden;background:radial-gradient(ellipse at 50% 37%,#61725822,transparent 68%)}#lookCanvas{display:block;width:100%;height:100%;object-fit:contain}#lookLoading{position:absolute;inset:35% 20px auto;padding:22px;text-align:center;font-size:13px;line-height:1.6;color:#e3ca92;background:#24392af5;border:1px solid #86916e;border-radius:9px}.preview-description{font-size:12px;line-height:1.7;color:#e7dbba;margin:0 24px 8px;padding-top:15px;border-top:1px solid #7b885740}.preview-note{font-size:10px;line-height:1.7;color:#b1bda7;margin:0 24px 21px}.look-controls{margin:0;min-width:0}.look-group{border:1px solid #76846169;background:#1b3023;border-radius:12px;margin-bottom:13px;overflow:hidden;box-shadow:0 4px 15px #0001}.look-group[open]{border-color:#ac925b}.look-group>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:20px;cursor:pointer;user-select:none}.look-group>summary::-webkit-details-marker{display:none}.group-number{font-size:10px;color:#d0b474;border:1px solid #6f7d50;border-radius:50%;height:29px;width:29px;display:grid;place-items:center;flex-shrink:0}.group-title{font:normal 19px Georgia,serif}.group-summary{display:block;color:#b1bca5;font:normal 10px/1.5 Arial,sans-serif;margin-top:5px;max-width:330px}.group-arrow{margin-left:auto;font-size:20px;color:#d6bc7b;transition:transform .15s}.look-group[open] .group-arrow{transform:rotate(45deg)}.group-body{padding:0 20px 21px}.group-tip{font-size:10px;color:#adbaa2;line-height:1.7;margin:0 0 16px}.option-field{border:0;padding:0;margin:0 0 19px;min-width:0}.option-field:last-child{margin-bottom:0}.option-field legend{font-size:11px;font-weight:bold;letter-spacing:.2px;color:#e9dfc7;padding:0;margin-bottom:10px}.option-row{display:flex;flex-wrap:wrap;gap:7px}.choice{position:relative;min-width:0;flex:1;text-align:center}.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}.choice>span{height:39px;border-radius:6px;border:1px solid #78816280;display:flex;align-items:center;justify-content:center;font-size:11px;color:#c5cdbb;background:#14281cc9;padding:5px 9px;white-space:normal;line-height:1.2;transition:background .15s,border .15s,color .15s}.choice input:checked+span{background:linear-gradient(135deg,#efcf88,#bd984c);border-color:#f6d78e;color:#25291b;font-weight:bold;box-shadow:inset 0 0 0 2px #ead09a38,0 2px 5px #0002}.choice input:focus-visible+span{outline:3px solid #f1dbac;outline-offset:3px}.choice input:hover+span{border-color:#c6ae72}.swatches{gap:12px}.swatch{flex:0 0 auto}.swatch>span{height:36px;width:36px;border-radius:50%;background:var(--chip)!important;box-shadow:inset 0 1px 2px #fff6,0 2px 3px #0004;padding:0;border:1px solid #e2c68b9c}.swatch input:checked+span{outline:2px solid #f3cf7d;outline-offset:3px;box-shadow:inset 0 1px 2px #fff6,0 0 14px #dfb96955}.swatch input:focus-visible+span{outline:3px solid #fff3cb;outline-offset:5px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tattoo-extra{padding-top:2px}.tattoo-help{font-size:10px;color:#b8c1ab;line-height:1.6;margin:13px 0 0}.storage-note{font-size:10px;color:#91a18b;line-height:1.7;margin:25px 0 0}.save-bar{position:fixed;bottom:0;left:0;right:0;padding:16px 36px calc(16px + env(safe-area-inset-bottom));border-top:1px solid #9b834654;background:#11251cf5;backdrop-filter:blur(12px);z-index:10}.save-bar>div{max-width:1168px;margin:auto;display:flex;align-items:center;gap:20px}.save-info{margin-right:auto}.save-info>span{font-size:11px;color:#dfce9f;display:block;line-height:1.4}.reset-button{border:0;background:none;padding:6px 0 0;color:#9eae94;font-size:10px;text-decoration:underline;text-underline-offset:3px}.save-button{border:1px solid #f0d29a;border-radius:8px;background:linear-gradient(135deg,#eacb87,#c3a157);color:#24291a;font-weight:bold;font-size:13px;padding:15px 24px;min-width:160px;box-shadow:inset 0 1px 0 #fff9,0 3px 8px #0003}.save-button span{margin-left:20px}.save-button:hover{filter:brightness(1.07)}.preview-shortcut{display:none}.save-status-error{color:#f2bba7!important}@media(max-width:800px){.look-shell{padding:0 18px 130px}.look-header{height:68px}.look-intro{padding:24px 0 22px}h1{font-size:37px}.look-layout{grid-template-columns:1fr;gap:22px}.preview-panel{position:relative;top:auto;max-width:520px;width:100%;margin:0 auto}.preview-stage{max-height:390px;aspect-ratio:auto;height:min(85vw,390px)}.preview-heading{padding:19px 20px 0}.preview-description{margin-inline:20px}.preview-note{margin-inline:20px}.group-summary{max-width:260px}.save-bar{padding:12px 18px calc(12px + env(safe-area-inset-bottom))}.save-bar>div{gap:12px}.save-button{min-width:116px;padding:14px 15px;font-size:12px}.save-button span{margin-left:7px}.preview-shortcut{display:block;color:#d9bf83;font-size:10px;white-space:nowrap}.save-info>span{font-size:10px}.look-group>summary{padding:18px}.group-body{padding:0 18px 20px}.choice>span{padding:5px 7px;font-size:10px}.swatches{gap:12px}.swatch>span{width:34px;height:34px}.test-badge{font-size:8px;padding:7px 10px;letter-spacing:1.3px}}@media(max-width:360px){.look-shell{padding-inline:13px}.save-bar{padding-inline:13px}.save-info{max-width:110px}.save-button{min-width:103px;padding-inline:12px}.option-row{gap:5px}.choice>span{font-size:9px;padding-inline:5px}.group-title{font-size:18px}.swatches{gap:10px}.swatch>span{width:30px;height:30px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Artwork is sliced directly from the approved interface mockups. */
.ui-screen{--ui-ink:#062e20;--ui-gold:#e5b64d;--ui-line:linear-gradient(120deg,#68400d,#f9cd58 12%,#fffbd4 21%,#a76a11 30%,#ffe58d 43%,#fff6b8 53%,#97600d 65%,#ffde70 82%,#6f430b 94%,#eec164);--ui-jade:url('interface/jade-texture.png');--ui-ivory:url('interface/ivory-texture.png');color:var(--ui-ink);font-family:Arial,Helvetica,sans-serif;background:#8dbe91 var(--ui-jade) repeat;background-size:330px 280px;isolation:isolate}
.ui-screen button,.ui-screen a{touch-action:manipulation}.ui-screen :focus-visible{outline:3px solid #123f2b;outline-offset:3px}.modal.ui-screen{width:820px;max-width:calc(100vw - 20px);max-height:94svh;border:5px solid transparent;border-image:var(--ui-line) 1;padding:22px 25px 28px;border-radius:0;box-shadow:0 15px 70px #0009,inset 0 0 0 2px #3c642f;scrollbar-color:#c49b42 #608d65}.ui-screen::backdrop{background:#061b15cf;backdrop-filter:blur(6px)}
.ui-screen .screen-title{position:relative;min-height:83px;border:20px solid transparent;border-image:url('interface/title-frame.png') 62 78 / 20px 25px / 0 stretch;background:#fff4db var(--ui-ivory) center/200px 130px;border-radius:25px;display:flex;align-items:center;justify-content:center;margin:0 20px 20px;padding:0 46px;box-shadow:0 7px 9px #173c2859}.ui-screen .screen-title h2{font:bold clamp(31px,5vw,54px)/1.1 Georgia,serif;color:#062b17;margin:0;white-space:nowrap;letter-spacing:-1px}.screen-back,.screen-settings{position:absolute;left:0;top:50%;transform:translateY(-50%);background:none;border:0;border-radius:0;color:#0c3924;font:42px Georgia,serif;padding:0 10px}.screen-settings{left:auto;right:0;font-size:35px}.screen-tagline{font:italic 26px/1.3 Georgia,serif!important;text-align:center;margin:0 0 22px;color:#082c1c}.rules-screen .screen-tagline{font:600 21px/1.35 Arial,sans-serif!important;color:#fff7d9;text-shadow:0 1px 2px #28502d}.rule-cards{display:flex;flex-direction:column;gap:15px}.rule-card,.dashboard-player,.dashboard-summary>div,.history-game,.look-group,.glow-panel{border:15px solid transparent;border-image:url('interface/ivory-frame.png') 38 / 15px / 0 stretch;background:#fff3d9 var(--ui-ivory) center/200px 130px;border-radius:28px;box-shadow:0 5px 6px #23412a75;position:relative}.rule-card{padding:7px 17px 9px}.rule-card h3{font:bold clamp(24px,3.4vw,36px)/1.1 Georgia,serif;margin:0 0 9px;letter-spacing:-.5px}.rule-card h3 span{display:inline-block;margin-right:9px}.rule-card p{font-size:17px;line-height:1.4;margin:0}.rule-card small{font-size:13px;line-height:1.4;display:block;margin-top:10px;font-style:italic}.rule-card.illustrated{display:grid;grid-template-columns:1.35fr 1fr;gap:17px;align-items:center}.rule-card.illustrated>img{display:block;width:100%;max-height:170px;object-fit:contain;border-left:1px solid #b68d3c;padding-left:15px;mix-blend-mode:multiply}.rule-card .rule-points{margin-top:14px;padding-top:11px;border-top:1px solid #b88f40;font-size:14px;text-align:center;line-height:1.6}.complete-rules{margin:24px 8px 20px}.complete-rules summary{font:bold 17px Georgia,serif;cursor:pointer}.complete-rules .rules-list{font-size:14px;line-height:1.6;background:#fff4dbe6;padding:20px 20px 8px 40px;border-radius:12px;margin-top:13px}.complete-rules .rules-list b{font-size:19px}.ui-screen .screen-cta{display:block;width:80%;margin:25px auto 0;min-height:74px;padding:8px 26px;border:17px solid transparent;border-image:url('interface/green-button-frame.png') 50 95 / 17px 28px / 0 stretch;background:linear-gradient(120deg,#073d28,#005132 55%,#052b1c);border-radius:999px;color:#ffe18c;text-shadow:0 1px #55360e,0 2px 3px #0007;font:bold 34px/1 Georgia,serif;box-shadow:0 6px 7px #0d382980}.ui-screen .screen-cta:hover{filter:brightness(1.08)}
.dashboard-player{display:flex;align-items:center;gap:20px;padding:2px 20px;min-height:90px;margin:0 15px 20px}.dashboard-player>span{display:grid;place-items:center;width:60px;height:60px;border:4px solid transparent;background:var(--ui-ivory) padding-box,var(--ui-line) border-box;border-radius:50%;font:48px Georgia,serif}.dashboard-player strong{font:bold 35px Georgia,serif}.ui-screen .dashboard-summary{grid-template-columns:1fr 1fr;gap:15px;margin:0 15px 22px}.dashboard-summary>div{padding:0 8px 5px;min-height:110px}.dashboard-summary strong{font:bold 60px/.95 Georgia,serif}.dashboard-summary span{display:block;font:bold 23px/1.1 Georgia,serif}.ui-screen .games-heading{display:flex;align-items:center;justify-content:center;gap:20px;font:bold italic 31px Georgia,serif;margin:24px 0 10px}.games-heading::before,.games-heading::after{content:'';height:3px;flex:1;max-width:95px;background:var(--ui-line);box-shadow:0 1px 2px #265333}.ui-screen .history-notice{text-align:center;font-size:12px!important;color:#24472f;margin:8px 0 15px}.ui-screen .games-list{gap:16px}.ui-screen .history-game{width:100%;grid-template-columns:minmax(0,1fr) auto auto;gap:15px;padding:8px 17px;align-items:center;color:var(--ui-ink);text-shadow:none;min-height:102px;text-align:left}.history-game:hover{filter:brightness(1.025)}.ui-screen .history-opponent{padding-right:10px;border-right:1px solid #b58b34}.ui-screen .history-opponent b{font:bold 26px Georgia,serif;display:block}.ui-screen .history-opponent small{font-size:12px;line-height:1.4;margin-top:6px}.ui-screen .history-outcome,.ui-screen .history-link{border:3px solid transparent;border-radius:999px;background:linear-gradient(#0a4e32,#002e1f) padding-box,var(--ui-line) border-box;color:#ffe695;font:bold 21px Georgia,serif;padding:8px 13px;text-shadow:0 1px #4a310c;box-shadow:0 3px 4px #0003;text-align:center}.ui-screen .history-outcome.winner{background:linear-gradient(#ffeab3,#d9a625) padding-box,var(--ui-line) border-box;color:#0c301d;text-shadow:0 1px #fff7dc}.ui-screen .history-outcome.drawn{background:#fff4dc padding-box,var(--ui-line) border-box;color:#163c24;text-shadow:none}.ui-screen .history-link{grid-column:auto;font-size:21px;text-decoration:none;white-space:nowrap}.dashboard-help{text-align:center;font-size:16px!important;margin:19px 0 0}.screen-nav{display:grid;grid-template-columns:1fr 1fr 1fr;margin:24px 0 0;padding:5px 10px;border:12px solid transparent;border-image:url('interface/ivory-frame.png') 38 / 12px / 0 stretch;background:#fff4db var(--ui-ivory);border-radius:25px}.screen-nav>*{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#0d3422;font:28px Georgia,serif;background:none;border:0;padding:7px 10px}.screen-nav span span,.screen-nav button span,.screen-nav a span{font:bold 17px Georgia,serif}.screen-nav .current{background:linear-gradient(#13593c,#033721);border-radius:20px;color:#ffe18c;box-shadow:inset 0 0 0 2px #e8c674}.history-empty{color:#173e29!important;font-size:15px!important;line-height:1.7;background:#fff5dddb;padding:25px;border-radius:18px;text-align:center}
.ui-screen.game-details{width:850px}.game-details .modal-head{justify-content:flex-end}.game-details .modal-head .eyebrow{display:none}.game-details .close{border:2px solid #eccc6e;border-radius:50%;background:#103f2b;color:#ffe39b;width:40px;height:40px;line-height:24px;padding:3px}.ui-screen.game-details>h2{font:bold 46px Georgia,serif;text-align:center;margin:-32px 0 18px}.gold-heading,.game-details .end-total,.game-details .end-outcome{color:#ffde71;text-shadow:0 1px #fff8c9,1px 2px #8b530e,2px 3px #634009,0 4px 5px #23452f}.game-details .details-meta,.game-details #resultText{color:#103621;text-align:center}.game-details .result-player{border:15px solid transparent;border-image:url('interface/jade-frame.png') 44 / 15px / 0 stretch;background:var(--ui-jade);border-radius:24px;padding:8px 12px 22px}.game-details .result-player h3{font:bold 22px Georgia,serif;margin:5px 0 10px}.game-details .end-total{font:bold 78px/.95 Georgia,serif}.game-details .end-points{font:bold 18px Georgia,serif}.game-details .end-outcome{font:bold 31px Georgia,serif;margin:18px 0 7px}.game-details .end-count{font:bold 18px Georgia,serif}.game-details .end-cards{border-top:2px solid #edc65f;margin-top:18px;padding-top:20px;gap:18px 12px}.game-details .end-card{width:calc(50% - 6px)}.game-details .end-card .card{--card-w:100%;--card-h:auto;width:100%;height:auto;aspect-ratio:1/1.43;border:3px solid transparent;border-radius:12px;background:linear-gradient(#fff8e6,#f9ebcd) padding-box,var(--ui-line) border-box;box-shadow:0 3px 5px #2a4b2d77}.game-details .end-card .card-corner{font-size:clamp(19px,3.6vw,32px)}.game-details .end-card .card-corner small{font-size:16px;margin:0}.game-details .end-card .card-suit{font-size:clamp(34px,5.3vw,52px)}.game-details .end-card>small{font:bold 18px Georgia,serif;margin-top:9px}.game-details .points-key{font-size:13px!important}.game-details #detailsBack{display:block;margin:24px auto 0;max-width:310px;min-height:45px}
/* The independent appearance controls use the same native ivory and gold trim. */
body.look-page{min-height:100svh;background:#8dbe91 var(--ui-jade);color:var(--ui-ink)}.look-page .look-shell{max-width:1000px;padding:20px 40px 145px}.look-page .look-header{height:78px;border:0;position:relative}.look-page .wordmark{display:block;width:275px}.wordmark>img{display:block;width:100%;height:auto}.look-close{border:3px solid transparent;background:linear-gradient(#115536,#032d20) padding-box,var(--ui-line) border-box;border-radius:50%;width:49px;height:49px;display:grid;place-items:center;color:#ffdf8c;font:43px/.8 Georgia,serif;box-shadow:0 3px 7px #203d2380}.look-page .look-intro{text-align:center;padding:10px 0 25px}.look-page .look-intro h1{font:bold 52px/1.05 Georgia,serif;color:#052d1d;margin:0 0 12px;letter-spacing:-1px}.look-page .look-intro .eyebrow{font:12px Arial,sans-serif;letter-spacing:4px;color:#0d3723;margin:0}.look-tabs{display:flex;gap:8px;margin:0 0 20px}.look-tabs a{flex:1;text-align:center;padding:12px 6px;font:bold 25px Georgia,serif;border:3px solid transparent;background:#306d4c55 padding-box,var(--ui-line) border-box;border-radius:99px;color:#fff3cf;box-shadow:0 4px 8px #386d4050}.look-tabs a.active{color:#0d3525;background:var(--ui-ivory) padding-box,var(--ui-line) border-box;box-shadow:0 0 14px #fce67ca6}.look-page .look-layout{display:block}.look-page .preview-panel{position:relative;top:0;margin:0 0 20px;max-width:none;background:var(--ui-jade);border:15px solid transparent;border-image:url('interface/jade-frame.png') 44 / 15px / 0 stretch;border-radius:25px;box-shadow:0 5px 9px #1e542e77}.look-page .preview-heading{padding:6px 12px 0}.look-page .preview-heading h2{font:bold 31px Georgia,serif}.look-page .preview-heading>span{font-size:11px;color:#1d472f;letter-spacing:3px}.look-page .preview-stage{aspect-ratio:1.55;height:auto;max-height:none;overflow:hidden;background:none}.look-page #lookCanvas{height:100%;width:100%;object-fit:cover;object-position:center 16%}.look-page .preview-description{border:0;font-size:12px;color:#143c25;margin:0 15px 8px;padding:0;text-align:center}.look-page .preview-note{font-size:11px;color:#244f32;text-align:center;margin:0 15px 8px}.look-page .look-group{background:var(--ui-ivory);border-width:11px;border-image-width:11px;margin-bottom:11px;border-radius:20px;color:#123a27;box-shadow:0 3px 5px #2f573645}.look-page .look-group[open]{border-color:transparent}.look-page .look-group>summary{gap:12px;padding:1px 9px;min-height:38px}.look-page .group-number{font:bold 18px Georgia,serif;border:0;width:28px;height:auto;color:#59745d}.look-page .group-title{font:bold 22px Georgia,serif;display:flex;align-items:center;gap:12px;flex:1}.look-page .group-summary{font:12px/1.35 Arial,sans-serif;color:#2a4834;margin:0 10px 0 auto;max-width:330px;text-align:right}.look-page .group-arrow{font-size:25px;color:#153b26}.look-page .group-body{padding:16px 12px 5px}.look-page .group-tip,.look-page .tattoo-help{color:#45624b;font-size:12px;margin-bottom:15px}.look-page .option-field legend{font-size:13px;color:#163d28}.look-page .choice>span{background:#e5e0c8b3;color:#163b28;border:1px solid #aaa488;border-radius:9px;min-height:42px;height:auto;padding:9px 10px;font-size:13px}.look-page .choice input:checked+span{border:2px solid #ffb71c;background:linear-gradient(135deg,#fff1c1,#f7d779 48%,#ffe8a0);box-shadow:inset 0 0 0 2px #fff6d1,0 0 9px #f8b83299;color:#153622}.look-page .choice input:focus-visible+span{outline-color:#173f2a}.look-page .swatch>span{min-height:0;width:38px;height:38px;padding:0;border:2px solid #f1dba6}.look-page .swatch input:checked+span{box-shadow:0 0 10px #ffca3a;border:2px solid #fff0ba;outline:2px solid #b77f1d}.look-page .glow-panel{display:flex;align-items:center;gap:14px;padding:4px 12px;border-width:11px;border-image-width:11px;border-radius:20px;margin-bottom:12px;scroll-margin-top:20px}.glow-panel>span{font-size:39px;color:#c69636}.glow-panel h2{font:bold 24px Georgia,serif;margin:0 0 3px}.glow-panel p{font-size:12px;line-height:1.4;color:#517057;margin:0}.glow-choices{margin:0 0 0 auto;min-width:145px;padding:0;border:0;display:flex;gap:0}.glow-choices .choice>span{min-height:41px}.look-page .storage-note{color:#285237;text-align:center;font-size:12px}.look-page .save-bar{background:var(--ui-ivory);border:5px solid transparent;border-image:var(--ui-line) 1;box-shadow:0 -4px 20px #28512d55;backdrop-filter:none;padding:14px 35px calc(14px + env(safe-area-inset-bottom))}.look-page .save-bar>div{max-width:900px}.look-page .save-info>span{color:#2c4a31;font-size:12px}.look-page .reset-button{color:#173b26;font:bold 18px Georgia,serif;text-decoration:none;padding-top:5px}.look-page .reset-button::before{content:'⟳ ';font:26px Georgia,serif}.look-page .save-button{border:5px solid transparent;background:linear-gradient(#10472e,#022f1f) padding-box,var(--ui-line) border-box;border-radius:999px;color:#ffe69f;font:bold 24px Georgia,serif;min-width:240px;padding:11px 24px;box-shadow:0 0 15px #f7cc6890,inset 0 0 0 1px #fff2bd}.look-page .preview-shortcut{color:#294e34}.look-page .look-shell::before,.look-page .look-shell::after{content:'';position:absolute;top:0;left:0;width:135px;height:175px;background:url('interface/deco-corner.png') top left/100% 100%;z-index:-1;pointer-events:none}.look-page .look-shell{position:relative;isolation:isolate}.look-page .look-shell::after{left:auto;right:0;transform:scaleX(-1)}
/* Leave the complete palms within the table; sleeves continue toward its edge. */
.game-table .rest-arm-left{left:2.8cqw;transform:rotate(8deg);transform-origin:20% 85%}.game-table .rest-arm-right{right:2.8cqw;transform:scaleX(-1) rotate(8deg);transform-origin:80% 85%}.game-table .rest-arm.reaching{opacity:0!important}
html[data-gold-glow=off] .game-table .rim-scene path{animation:none!important;opacity:0!important}html[data-gold-glow=off] .card.playable,html[data-gold-glow=off] .deck:not(:disabled){box-shadow:0 0 0 2px #e7c26c!important}html[data-gold-glow=off] .deck:not(:disabled)::after{display:none}
@media(min-width:1100px){.look-page .look-shell{max-width:1300px}.look-page .look-layout{display:grid;grid-template-columns:1fr 1fr;gap:25px}.look-page .preview-panel{position:sticky;top:20px}.look-page .preview-stage{aspect-ratio:1}.look-page #lookCanvas{object-fit:contain}.look-page .group-title{flex-wrap:wrap;gap:4px}.look-page .group-summary{width:100%;margin:0;text-align:left}}
@media(max-width:600px){.modal.ui-screen{max-width:calc(100vw - 12px);max-height:96svh;padding:14px 10px 22px;border-width:3px}.ui-screen .screen-title{min-height:68px;margin:0 7px 15px;padding:0 25px;border-width:17px;border-image-width:17px}.ui-screen .screen-title h2{font-size:34px}.screen-back{font-size:30px;padding:0}.screen-settings{font-size:27px;padding:0}.screen-tagline{font-size:20px!important;margin-bottom:18px}.rules-screen .screen-tagline{font-size:14px!important}.rule-cards{gap:12px}.rule-card{border-width:10px;border-image-width:10px;padding:7px 8px 9px;border-radius:21px}.rule-card h3{font-size:25px;margin-bottom:8px}.rule-card h3 span{margin-right:3px}.rule-card p{font-size:13px;line-height:1.45}.rule-card small{font-size:11px;margin-top:8px}.rule-card.illustrated{grid-template-columns:1.4fr 1fr;gap:8px}.rule-card.illustrated>img{padding-left:7px;max-height:145px}.rule-card .rule-points{font-size:11px}.ui-screen .screen-cta{width:88%;min-height:65px;font-size:30px;margin-top:22px;border-image-width:14px 20px;border-width:14px;padding:6px 18px}.dashboard-player{border-width:11px;border-image-width:11px;padding:2px 10px;min-height:75px;margin:0 6px 15px;gap:12px}.dashboard-player>span{width:43px;height:43px;font-size:34px}.dashboard-player strong{font-size:27px}.ui-screen .dashboard-summary{gap:10px;margin:0 6px 18px}.dashboard-summary>div{border-width:11px;border-image-width:11px;min-height:88px;padding:0 4px 4px;border-radius:20px}.dashboard-summary strong{font-size:45px}.dashboard-summary span{font-size:19px}.ui-screen .games-heading{font-size:26px;gap:12px;margin-top:18px}.ui-screen .history-notice{font-size:10px!important}.ui-screen .history-game{border-width:10px;border-image-width:10px;min-height:95px;padding:5px 7px;gap:6px;grid-template-columns:minmax(0,1fr) auto}.ui-screen .history-opponent b{font-size:21px}.ui-screen .history-opponent small{font-size:10px}.ui-screen .history-opponent{grid-row:1/3;padding-right:8px}.ui-screen .history-outcome{font-size:17px;padding:4px 8px;justify-self:stretch}.ui-screen .history-link{grid-column:2;font-size:17px;padding:5px 9px}.dashboard-help{font-size:12px!important}.screen-nav{margin-top:20px;padding:2px 4px;border-width:10px;border-image-width:10px}.screen-nav>*{padding:5px;font-size:26px}.screen-nav span span,.screen-nav button span,.screen-nav a span{font-size:16px}.ui-screen.game-details>h2{font-size:36px}.game-details .result-scores{gap:9px}.game-details .result-player{border-width:10px;border-image-width:10px;padding:4px 4px 17px;border-radius:19px}.game-details .result-player h3{font-size:17px}.game-details .end-total{font-size:59px}.game-details .end-points{font-size:14px}.game-details .end-outcome{font-size:23px;margin:14px 0 7px}.game-details .end-count{font-size:14px}.game-details .end-cards{gap:15px 8px;padding-top:15px}.game-details .end-card{width:calc(50% - 4px)}.game-details .end-card .card{border-radius:8px;border-width:2px}.game-details .end-card .card-corner{font-size:19px;left:4px;top:4px}.game-details .end-card .card-corner.bottom{left:auto;right:4px;top:auto;bottom:4px}.game-details .end-card .card-corner small{font-size:10px}.game-details .end-card .card-suit{font-size:30px}.game-details .end-card>small{font-size:14px}.look-page .look-shell{padding:12px 13px 145px}.look-page .look-header{height:61px;margin:0 12px}.look-page .wordmark{width:175px}.look-close{width:36px;height:36px;font-size:32px}.look-page .look-intro{padding:8px 0 18px}.look-page .look-intro h1{font-size:37px;margin-bottom:9px}.look-page .look-intro .eyebrow{font-size:9px;letter-spacing:2.7px}.look-tabs{gap:6px;margin-bottom:14px}.look-tabs a{font-size:18px;padding:9px 5px;border-width:2px}.look-page .preview-panel{border-width:10px;border-image-width:10px;margin-bottom:14px;border-radius:20px}.look-page .preview-heading{padding:3px 7px 0}.look-page .preview-heading h2{font-size:24px}.look-page .preview-heading>span{font-size:8px;letter-spacing:2px}.look-page .preview-stage{aspect-ratio:1.5;height:auto}.look-page .preview-description{font-size:10px;margin-bottom:5px}.look-page .preview-note{font-size:9px;margin:0 5px 3px}.look-page .look-group{border-width:8px;border-image-width:8px;border-radius:15px;margin-bottom:9px}.look-page .look-group>summary{padding:1px 4px;min-height:32px;gap:5px}.look-page .group-number{width:22px;font-size:14px}.look-page .group-title{font-size:18px;gap:3px;display:block}.look-page .group-summary{font-size:10px;display:block;text-align:left;margin:3px 0 0}.look-page .group-arrow{font-size:21px}.look-page .group-body{padding:13px 6px 5px}.look-page .group-tip,.look-page .tattoo-help{font-size:11px}.look-page .choice>span{font-size:12px;padding:8px 6px;min-height:39px}.look-page .swatch>span{padding:0;min-height:0;width:31px;height:31px}.look-page .swatches{gap:13px}.look-page .glow-panel{gap:8px;padding:4px 6px;border-width:8px;border-image-width:8px;border-radius:15px}.glow-panel>span{font-size:30px}.glow-panel h2{font-size:19px}.glow-panel p{font-size:10px;line-height:1.3}.glow-choices{min-width:95px}.glow-choices .choice>span{font-size:12px;padding:6px 10px;min-height:34px}.look-page .save-bar{padding:11px 14px calc(11px + env(safe-area-inset-bottom));border-width:3px}.look-page .save-bar>div{gap:12px}.look-page .save-info>span{font-size:10px;max-width:130px}.look-page .reset-button{font-size:16px}.look-page .preview-shortcut{display:none}.look-page .save-button{min-width:150px;font-size:22px;padding:10px 15px;border-width:3px}.look-page .look-shell::before,.look-page .look-shell::after{width:70px;height:91px}}
.ui-screen .screen-title{border-image-slice:28 70}.ui-screen .rule-card,.ui-screen .dashboard-player,.ui-screen .dashboard-summary>div,.ui-screen .history-game,.look-page .look-group,.look-page .glow-panel{border-image-slice:38}.ui-screen .screen-cta{border-image-slice:45 85}
.ring-slots .choice{flex:0 0 calc(20% - 6px)}.look-page .ring-slots .choice>span{font-size:11px;padding:8px 4px}html[data-gold-glow=off] .look-tabs a.active,html[data-gold-glow=off] .look-page .save-button,html[data-gold-glow=off] .look-page .choice input:checked+span{box-shadow:none}
/* Fully visible card rows and a single bright gold pulse; cards never jiggle. */
.game-table .hand,.game-table .hand.crowded,.game-table.table-ended .hand{top:var(--hand-top,94cqw);left:10cqw;width:80cqw;height:auto;max-height:none;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.6cqw;padding:0;overflow:visible}
.game-table .hand>.card{--card-w:13.7cqw;--card-h:18.4cqw;width:13.7cqw;height:18.4cqw;margin:0;transform:none;translate:none;transition:none;flex:0 0 13.7cqw}
.game-table .hand .card-corner{font-size:3.6cqw;top:1cqw;left:.9cqw}.game-table .hand .card-corner.bottom{top:auto;left:auto;right:.9cqw;bottom:1cqw}.game-table .hand .card-corner small{font-size:2.55cqw}.game-table .hand .card-suit{font-size:7.3cqw}
.game-table .table-actions,.game-table .joker-panel,.game-table .end-actions{top:var(--controls-top,117cqw)}
.game-table .rest-arm-left,.game-table .rest-arm-right{top:calc(var(--hand-top,94cqw) - 8.55cqw)}
.game-table.table-ended .opponent-hand{top:var(--cpu-cards-top,38cqw);left:10cqw;width:80cqw;height:auto;max-height:none;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.6cqw;overflow:visible}
.game-table.table-ended .opponent-hand>.card{--card-w:13.7cqw;--card-h:18.4cqw;width:13.7cqw;height:18.4cqw;flex:0 0 13.7cqw;margin:0;transform:none}.game-table.table-ended .opponent-hand .card-corner{font-size:3.6cqw;top:1cqw;left:.9cqw}.game-table.table-ended .opponent-hand .card-corner.bottom{top:auto;left:auto;right:.9cqw;bottom:1cqw}.game-table.table-ended .opponent-hand .card-corner small{font-size:2.55cqw}.game-table.table-ended .opponent-hand .card-suit{font-size:7.3cqw}
.game-table.table-ended .table-center{top:var(--pile-top,62cqw)}.game-table.table-ended .table-outcome{display:flex;flex-direction:column;align-items:center;gap:.6cqw;z-index:5;pointer-events:none}.game-table.table-ended #cpuOutcome{top:25.5cqw}.game-table.table-ended #youOutcome{top:var(--you-outcome-top,88cqw)}.game-table.table-ended .table-outcome::before{content:'YOU';color:#143b24;font:bold 2.9cqw Georgia,serif;letter-spacing:.15cqw}.game-table.table-ended #cpuOutcome::before{content:'COMPUTER'}.game-table.table-ended .table-outcome strong{font:bold 4.5cqw Georgia,serif;color:#fff0b0;text-shadow:0 1px #6e400a,0 0 8px #ffd952;box-shadow:0 0 10px #ffe48b70}.game-table.table-ended .table-outcome span{font:bold 3.3cqw Georgia,serif;color:#0d3523;text-shadow:0 1px #ecf0b0}.game-table.table-ended .end-actions{top:var(--controls-top,128cqw)}
.card.playable,.hand>.card.playable,.held-draw .card.playable,.deck.can-draw{border-color:#fff4a1;animation:bright-card-gold 1.6s ease-in-out infinite!important}.card.playable:hover,.hand>.card.playable:hover,.deck:not(:disabled):hover{translate:none}
@keyframes bright-card-gold{0%,100%{box-shadow:0 0 0 2px #ffe175,0 0 8px 2px #fff2a9,0 0 17px 5px #ffd02bbf,0 4px 7px #17371b66}50%{box-shadow:0 0 0 3px #fff4aa,0 0 12px 4px #fff6c9,0 0 29px 9px #ffc327e6,0 4px 7px #17371b66}}
.game-table .rim-scene path{stroke:#fff3a1;stroke-width:6;filter:drop-shadow(0 0 4px #fffbe2) drop-shadow(0 0 10px #ffd22c) drop-shadow(0 0 18px #ffbc1c);opacity:0}
.game-table[data-turn=you] .rim-near-path,.game-table[data-turn=cpu] .rim-far-path{animation:bright-table-gold 1.8s ease-in-out infinite}
@keyframes bright-table-gold{0%,100%{opacity:.72}50%{opacity:1;stroke:#fffbd7;stroke-width:8}}
.hand-return{position:fixed;z-index:20;pointer-events:none;transform-origin:top left;filter:none}.hand-return img{max-width:none;object-fit:fill}
html[data-gold-glow=off] .card.playable,html[data-gold-glow=off] .hand>.card.playable,html[data-gold-glow=off] .held-draw .card.playable,html[data-gold-glow=off] .deck.can-draw{animation:none!important;box-shadow:0 0 0 2px #e7c26c!important}
@media(prefers-reduced-motion:reduce){.card.playable,.hand>.card.playable,.held-draw .card.playable,.deck.can-draw{animation:none!important;box-shadow:0 0 0 3px #fff0a3,0 0 14px 4px #ffd12dd9}.game-table[data-turn=you] .rim-near-path,.game-table[data-turn=cpu] .rim-far-path{animation:none;opacity:1}}
@keyframes bright-card-gold{0%,100%{box-shadow:0 0 0 3px #fff2a3,0 0 9px 3px #fff9d2,0 0 24px 8px #ffcc19e6,0 0 38px 12px #ffb80080}50%{box-shadow:0 0 0 4px #fff8c5,0 0 14px 5px #fffdeb,0 0 36px 12px #ffcd18,0 0 48px 16px #ffb800a6}}
/* Each seat keeps only one visible pose for an arm while a card is held. */
.game-table .rest-arm.reaching{visibility:hidden!important;opacity:0!important}
.game-table .rest-arm-left,.game-table .rest-arm-right{top:var(--rest-top,135cqw);bottom:auto;width:31.25cqw;height:27.344cqw;transform-origin:50% 50%;rotate:0deg}
.game-table .rest-arm-left{left:6.348cqw;right:auto;transform:rotate(180deg) scaleX(-1)}
.game-table .rest-arm-right{left:auto;right:6.348cqw;transform:rotate(180deg)}
.game-table .deck-count,.game-table .called-value-label{display:inline-flex;align-items:center;justify-content:center;margin:1.2cqw 0 0;padding:.65cqw 1.5cqw;border:1px solid #f9d273;border-radius:999px;background:linear-gradient(#ad3539,#7c1720);color:#fff6dc;font:bold max(12px,1.65cqw)/1.15 Arial,Helvetica,sans-serif;text-shadow:none;white-space:nowrap;box-shadow:inset 0 1px #ffb1a64a,0 2px 4px #1d351f55}
.game-table .deck-count:empty{display:none}
.game-table .deck-hint,.game-table.table-ended .deck-hint,.game-table .legal-guide>span:not(.called-value-label){display:none}
.game-table .called-value-label{margin:0 0 1.2cqw;font-size:max(11px,1.65cqw)!important}
.table-footer,.table-footer .text-link{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5}
/* Full-length native tuxedo sleeves continue beyond the lower table edge. */
.game-table .rest-arm-left,.game-table .rest-arm-right{height:48.828cqw;overflow:visible}
.game-table .rest-arm-left img,.game-table .rest-arm-right img{display:block;width:100%;height:100%;object-fit:fill;filter:none;image-rendering:auto}

/* Blue action plaques retain the approved polished gold rim. */
.game-table .deck-zone>.pile-label,.game-table .legal-guide>.pile-label{background:linear-gradient(160deg,#2378c7,#063a7c) padding-box,linear-gradient(120deg,#7c4c0d,#fff3b1 22%,#d49a25 44%,#fff5bd 66%,#a66a14) border-box;color:#fff3cf;position:relative;z-index:2;box-shadow:inset 0 1px 2px #a7deff88,0 2px 6px #062d5877}
.game-table .joker-keep-button{display:block;margin:1.2cqw auto 0;min-height:30px;padding:.5cqw 3cqw;font:bold max(13px,2.2cqw)/1.2 Georgia,serif}
.game-table .joker-keep-button[hidden]{display:none}
.look-page .look-header{justify-content:flex-end}

/* Keep each drink beside its own player, clear of the card rows. */
.game-table .drink-near{left:5cqw;top:calc(var(--rest-top,138cqw) - 10cqw);width:14cqw}

/* Give the pug its own space alongside the legal-rank guide. */
.game-table .table-center,.game-table.table-ended .table-center{left:27.5cqw}
.game-table .table-pug{left:67cqw;top:calc(var(--pile-top,53cqw) + 8cqw);width:32cqw;image-rendering:auto}

/* UI controls may resize the table without dragging the viewport mid-reach. */
html,body,.shell,.game-table{overflow-anchor:none}

/* Mirrored grips keep each pickup on its own side of the table. */
.opponent-grip .grip-hand{left:51%;scale:-1 1;rotate:180deg}
.opponent-grip.left-grip .grip-hand{left:-100%;scale:1 1;rotate:180deg}

/* The free side holds Joker controls; neither seat shifts when they open. */
.game-table .joker-panel{left:var(--joker-left,3cqw);width:60cqw}


/* Decoded image artwork prevents the first Joker reveal from flashing blank. */
.joker-card{overflow:visible}
.joker-card>img.joker-face{display:block;position:absolute;inset:-5.5% -6%;width:112%;height:113%;max-width:none;object-fit:fill;background:none;border-radius:7px;clip-path:inset(4.9% 5.35% round 7px);pointer-events:none}
.joker-energy{position:absolute;inset:-5%;width:110%;height:110%;overflow:visible;pointer-events:none;opacity:0;z-index:3;filter:drop-shadow(0 0 3px #71dcff) drop-shadow(0 0 6px #e6fcff)}
.joker-energy path{fill:none;stroke:#d6faff;stroke-width:1.3;stroke-dasharray:19 4 7 3;stroke-linejoin:round;stroke-linecap:round}
.joker-electric .joker-energy{animation:joker-current .8s linear 1}
@keyframes joker-current{0%{opacity:.8;stroke-dashoffset:0}80%{opacity:1}100%{opacity:0;stroke-dashoffset:-120}}
.game-table .rest-arm.reacting{visibility:hidden!important;opacity:0!important}
.reaction-fist{position:absolute;z-index:7;pointer-events:none;transform-origin:50% 55%}
.reaction-fist img{display:block;width:100%;height:100%;max-width:none;object-fit:fill}
.reaction-fist::after{content:'';position:absolute;left:16%;top:30%;width:68%;height:15%;border:2px solid #ffdf7c;border-radius:50%;opacity:0;animation:fist-impact .4s linear 1;pointer-events:none}
@keyframes fist-impact{0%,9%{opacity:0;scale:.7}10%{opacity:.9;scale:1}100%{opacity:0;scale:1.45}}
@media(prefers-reduced-motion:reduce){.joker-electric .joker-energy{animation:none;opacity:.35}.reaction-fist::after{animation:none}}

.reaction-fist:not([data-player="0"])::after{top:55%}

/* The already-decoded artwork also backs every newly inserted Joker image. */
.joker-card{background:#fff4db url('table/joker-v1.png') center/112% 113% no-repeat}


/* The hand, cuff, and sleeve travel together in one photographic sprite. */
/* Keep the offscreen sleeve and its return motion out of page overflow. */
.arm-flight-clip{position:fixed;inset:0;z-index:20;pointer-events:none;contain:paint;overflow:hidden}
.grip-hand{aspect-ratio:254/580}
.grip-art{position:absolute;left:-17%;top:-11%;width:150%!important;height:190%!important;max-width:none;display:block;object-fit:fill;clip-path:inset(0 0 55% 0)}
/* Stretch the fabric below the cuff, with a small overlap at the join. */
.grip-art.grip-sleeve{clip-path:inset(45% 0 0);transform-origin:50% 45%;transform:scaleY(3);z-index:-1}
.grip-hand,.hand-return>div{isolation:isolate}
.grip-hand .grip-sleeve,.hand-return .grip-sleeve{clip-path:inset(44.8% 0 0)}

/* A light-blue halo starts on the discard pile at Joker contact. */
#topCard.joker-impact{animation:joker-landing-glow .85s ease-out}
@keyframes joker-landing-glow{
 0%,22%{filter:drop-shadow(0 0 3px #e8faff) drop-shadow(0 0 9px #9de4ff) drop-shadow(0 0 17px #63caff)}
 100%{filter:drop-shadow(0 0 0 transparent)}
}
@media(prefers-reduced-motion:reduce){
 #topCard.joker-impact{animation:none;filter:drop-shadow(0 0 7px #9de4ff)}
}

/* Extra cards scroll inside the same two-row hand area during play. */
.game-table .hand.scrolling-hand{height:40cqw;overflow-x:hidden;overflow-y:auto;align-content:flex-start;overscroll-behavior-y:contain;scrollbar-width:none}

.game-table.table-ended .table-outcome.blocked strong {
  inline-size: 32cqw;
  block-size: 8.2cqw;
  padding: 0;
  border: 0;
  background: url('interface/block-logo.png') center 40% / 100% auto no-repeat;
  color: transparent;
  text-shadow: none;
  box-shadow: none;
}

.ranks-guide-link {
  display: block;
  width: fit-content;
  margin: 12px auto 0;
  padding: 7px 14px;
  border: 1px solid #d6b465;
  border-radius: 999px;
  background: #103f2b;
  color: #ffe695;
  font: bold max(12px, 2.1cqw) Georgia,serif;
  text-align: center;
  text-decoration: none;
}
.dashboard .dashboard-ranks-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: auto;
  min-height: 52px;
  margin: 0 15px 16px;
  padding: 8px 18px;
  border: 2px solid #efcd7c;
  border-radius: 14px;
  background: linear-gradient(160deg, #174b36, #082c20);
  color: #fff1c5;
  font-size: 19px;
  line-height: 1.2;
  text-align: start;
}

.game-table.table-ended .table-outcome.winner strong {
  border-color: #ffe496;
  box-shadow: 0 0 0 1px #b88a34, inset 0 0 7px #ffe49642;
}
html:not([data-gold-glow=off]) .game-table.table-ended .table-outcome.winner strong {
  box-shadow: 0 0 0 1px #fff0ad, 0 0 10px 3px #ffd65e, 0 0 22px 5px #e6a827a8, inset 0 0 9px #ffe49670;
}

#liveBonus {
  position: fixed;
  z-index: 30;
  top: max(76px, calc(env(safe-area-inset-top) + 56px));
  left: 50%;
  transform: translateX(-50%);
  width: min(78vw, 320px);
  padding: 4px 6px 7px;
  border: 1px solid #ddbb6e;
  border-radius: 12px;
  background: #082f23;
  color: #fff1c5;
  font: bold 13px/1.35 Georgia,serif;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 5px 18px #05190dcc;
}
#liveBonus[hidden],#bonusRecap[hidden] { display: none; }
.bonus-art {
  aspect-ratio: 480 / 183;
  background: url('guide/live.webp') no-repeat;
  background-size: 226.25% 791.26%;
}
.bonus-art.smart-choice { background-position: 8.25% 17.07%; }
.bonus-art.joker-lock { background-position: 91.42% 17.07%; }
.bonus-art.clean-sweep { background-position: 8.25% 54.62%; }
.bonus-art.block-finish { background-position: 91.42% 54.62%; }
.bonus-art.sacrifice-goat,
.bonus-art.sacrifice-goat-hold,
.bonus-art.sacrifice-goat-pending {
  background-image: url('guide/sacrifice-goat.webp');
  background-size: 100% auto;
  background-position: center 23%;
}
#bonusRecap { color: #103621; margin-top: 18px; }
#bonusRecap h3 { text-align: center; }
#bonusScores { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#bonusScores section { padding: 10px; border: 1px solid #b68d3c; border-radius: 10px; background: #fff4db; }
#bonusScores h4 { margin: 0; }
#bonusScores ul { padding-left: 18px; }
.game-table.table-ended .end-actions { left: 10cqw; width: 80cqw; }
.bonus-timer-track { height: 3px; margin-top: 6px; border-radius: 4px; background: #fff1c530; }
#liveBonusTimer { height: 100%; border-radius: inherit; background: #e9bc59; transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .bonus-timer-track { visibility: hidden; } }

.game-table.table-ended.result-visible .turn-status { display: flex; }
.game-table.table-ended.result-visible[data-turn=cpu] .turn-status strong {
  background: linear-gradient(#ac2838,#741522) padding-box,var(--line) border-box;
}

.intro { flex-wrap: wrap; }

.legal-guide #legalGuideLabel.no-plays { white-space: normal; }
.legal-guide .joker-option { width: auto; padding: 0 .8cqw; font-size: max(11px, 2.3cqw); }

/* Keep gold inside the card so a nearby or clipped card cannot appear playable. */
html:not([data-gold-glow=off]) .game-table .hand > .card.playable:not(:disabled) {
  animation: playable-hand-gold 1.6s ease-in-out infinite !important;
}
@keyframes playable-hand-gold {
  0%, 100% { box-shadow: inset 0 0 0 2px #f6be32, inset 0 0 14px 4px #ffcc57b3; }
  50% { box-shadow: inset 0 0 0 3px #f9c53c, inset 0 0 22px 7px #ffd35ee6; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-gold-glow=off]) .game-table .hand > .card.playable:not(:disabled) {
    animation: none !important;
    box-shadow: inset 0 0 0 3px #f9c53c, inset 0 0 18px 5px #ffd35ee6;
  }
}

.look-page .difficulty-settings { flex-wrap: wrap; }
.difficulty-setting-button {
  margin-left: auto;
  min-height: 42px;
  padding: 7px 12px;
  border: 1px solid #dfbc65;
  border-radius: 999px;
  background: linear-gradient(#174e37, #082e21);
  color: #fff1c5;
  font: bold clamp(13px, 3.6vw, 16px) Georgia, serif;
  cursor: pointer;
}

/* The first two rows of the rank guide sheet hold the six progression badges. */
.dashboard-player > .player-rank-badge {
  flex: none;
  width: clamp(100px, 32vw, 176px);
  height: auto;
  aspect-ratio: 164 / 148;
  border: 0;
  border-radius: 0;
  background: url('guide/ranks.webp') var(--badge-column, 4%) var(--badge-row, 0%) / 317.07% 299.85% no-repeat;
}
.player-rank-badge:is([data-rank=contender], [data-rank=wizard]) { --badge-column: 50%; }
.player-rank-badge:is([data-rank=gatekeeper], [data-rank=legend]) { --badge-column: 97%; }
.player-rank-badge:is([data-rank=blockmaster], [data-rank=wizard], [data-rank=legend]) { --badge-row: 49%; }
.look-tab-icon { width: .7em; height: 1em; margin-right: .2em; vertical-align: -.12em; }

.player-rank { flex: 1; min-width: 0; padding-block: 7px; }
.player-rank-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; }
.player-rank-heading b {
  padding: 4px 11px;
  border: 1px solid #c69a42;
  border-radius: 999px;
  background: #10422e;
  color: #fff0bd;
  font: bold clamp(13px, 3.4vw, 19px) Georgia, serif;
}
.player-rank p { margin: 4px 0; font-size: clamp(12px, 3.1vw, 15px); }
.player-rank progress { display: block; width: 100%; max-width: 20rem; height: 8px; accent-color: #976811; }

.friend-status {
  margin: 0 0 .65rem;
  padding: .65rem;
  border: 1px solid #caac61;
  border-radius: .8rem;
  color: #fff1c5;
  background: #113d2c;
  text-align: center;
}
.friend-status p { margin: 0; font: bold 1rem Georgia, serif; }
#friendInviteActions:not([hidden]) { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; }
#friendInvite { width: min(62%, 22rem); min-width: 0; font: inherit; color: #153729; background: #f5e8c2; border-radius: .3rem; }
#friendDraw:not([hidden]) { display: block; }
.game-table.friend-match #friendDraw {
  position: absolute;
  z-index: 7;
  left: 43.15cqw;
  top: 75.5cqw;
}
.game-table.friend-match #friendDraw .card {
  --card-w: 13.7cqw;
  --card-h: 18.4cqw;
}
.game-table.friend-match.table-ended #cpuOutcome::before { content: 'FRIEND'; }

.solo-table-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .55rem;
  color: #fff1c5;
  font: bold .82rem Georgia, serif;
}
.solo-table-controls span { margin-right: auto; }
.solo-table-controls select {
  min-height: 40px;
  padding: .35rem .55rem;
  border: 1px solid #d2ad58;
  border-radius: .6rem;
  color: inherit;
  background: #103d2e;
  font: inherit;
}
.game-table.three-player .opponent { display: none; }
.opponent-seats {
  position: absolute;
  z-index: 3;
  inset: 29cqw 10cqw auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3cqw;
  align-items: start;
}
.opponent-seat {
  padding: 1cqw .5cqw;
  border: .2cqw solid #e2be67;
  border-radius: 1.2cqw;
  background: #103d2e;
  color: #fff0be;
  text-align: center;
}
.opponent-seat.active,.opponent-seat.winner {
  border-color: #fff0a7;
  box-shadow: 0 0 1.35cqw #ffdd72;
}
.opponent-seat.blocked { background: #681d26; }
.opponent-seat h2 { margin: 0; font: bold max(12px, 2.9cqw)/1.2 Georgia, serif; }
.opponent-seat p { margin: .3cqw 0 .75cqw; font: bold max(10px, 2.15cqw)/1.2 Georgia, serif; }
.opponent-seat-cards {
  display: grid;
  grid-template-columns: repeat(4, 7.6cqw);
  gap: .6cqw;
  justify-content: center;
}
.opponent-seat-cards .card { --card-w: 7.6cqw; --card-h: 10.4cqw; }
.game-details .result-scores.three-scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 540px) {
  .game-details .result-scores.three-scores { grid-template-columns: 1fr; }
}

.profile-page { min-height: 100vh; }
.profile-shell {
  width: min(100% - 20px, 620px);
  margin: 10px auto;
  padding: clamp(12px, 3vw, 26px);
  border: 3px solid #caa653;
  border-radius: 22px;
}
.profile-shell .screen-title { margin: 12px 0 18px; }
.profile-shell .screen-title h1 { margin: 0; text-align: center; font: bold clamp(28px, 7vw, 48px) Georgia, serif; }
.profile-shell .dashboard-player { margin-inline: 0; }
.profile-shell #profileName { overflow-wrap: anywhere; }
.profile-back, .profile-guide, .profile-sign-in { color: #103d2e; font: bold 1rem Georgia, serif; }
.profile-section { margin-block: 14px 0; }
.profile-section h2 { margin: 0 0 4px; font: bold clamp(22px, 5vw, 29px) Georgia, serif; }
.profile-section label { display: block; margin: 12px 0 5px; font-weight: bold; }
.profile-section :is(input, select) {
  min-width: 0;
  min-height: 42px;
  padding: 6px 9px;
  border: 1px solid #9d7a30;
  border-radius: 6px;
  background: #fff8e3;
  color: #103d2e;
  font: inherit;
}
.profile-form-row { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-form-row input { flex: 1 1 140px; }
.profile-form-row .quiet { font-size: 15px; }
.profile-section [role=status]:not(:empty), #profileTitleNote { margin-top: 8px; font-size: 14px; }
.profile-record {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 14px 0;
  text-align: center;
}
.profile-record div { padding: 7px 2px; border: 1px solid #b99955; border-radius: 8px; }
.profile-record dt { font-size: clamp(11px, 3.1vw, 15px); }
.profile-record dd { margin: 2px 0 0; font: bold clamp(17px, 4.8vw, 26px) Georgia, serif; }
.profile-guide, .profile-sign-in { display: inline-block; margin-top: 10px; }

.profile-club-link { margin-inline: 0; }
.club-button, .club-code { margin-top: 10px; }
#friendCode { font-family: ui-monospace, monospace; font-size: 14px; }
#friendCodeHelp { margin-top: 6px; font-size: 14px; }
.club-list { display: grid; gap: 7px; padding: 0; margin: 8px 0 4px; list-style: none; }
.club-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 5px 0; }
.club-list li + li { border-top: 1px solid #b99955; }
.club-list strong { flex: 1 1 90px; overflow-wrap: anywhere; }
.club-list .quiet { font-size: 13px; }

.recap-replay {
  margin: 16px auto;
  max-width: 520px;
  padding: 12px;
  border: 1px solid #e4bf6c;
  border-radius: 14px;
  background: #103d2c;
  color: #fff0c5;
  text-align: center;
}
.replay-controls, .replay-seats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.replay-controls .primary { min-height: 40px; }
.replay-board { margin-top: 12px; padding-top: 12px; border-top: 1px solid #c9a65d; }
.replay-seats > span {
  flex: 1 1 75px;
  padding: 5px;
  border: 1px solid #d1ab6580;
  border-radius: 8px;
  font-size: 13px;
}
.replay-seats > .acting { background: #ffe2a5; color: #103621; border-color: #e4bf6c; }
.replay-piles {
  --card-w: 62px;
  --card-h: 89px;
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 13px auto 0;
  font-size: 13px;
}
.replay-piles > div { min-width: 86px; display: grid; justify-items: center; gap: 5px; }
.replay-deck { width: var(--card-w); height: var(--card-h); border: 1px solid #e4bf6c; border-radius: 7px; }
.replay-deck.has-cards { background: #0a459b url('table/approved-card-back-v2.png') center / cover; }
.replay-piles .card { animation: replay-deal .22s ease-out; }
@keyframes replay-deal {
  from { opacity: .35; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .replay-piles .card { animation: none; } }
#replayAction { min-height: 2.5em; margin: 10px 0 0; font-size: 15px; }
#replayOutcome { margin: 0 0 8px; font-weight: bold; }
#replayProgress { display: block; width: 100%; height: 9px; accent-color: #eebf59; }
#replayTurn { display: block; margin-top: 4px; font-size: 12px; }

.difficulty-dialog {
  box-sizing: border-box;
  width: min(92vw, 480px);
  max-height: 94svh;
  padding: 23px clamp(14px, 4vw, 27px) 22px;
  overflow-y: auto;
  color: #fff0c8;
  border: 14px solid transparent;
  border-image: url('interface/difficulty-frame.svg') 38 / 14px / 0 stretch;
  border-radius: 3px;
  background: linear-gradient(#003724df, #002b1de8), url('interface/jade-texture.png') center / 280px;
  box-shadow: 0 0 0 1px #f7da87, 0 15px 55px #000b;
  font-family: Georgia, 'Times New Roman', serif;
}
.difficulty-dialog::backdrop { background: #00150fbb; }
.difficulty-form { position: relative; margin: 0; }
.difficulty-close {
  display: grid;
  place-items: center;
  position: absolute;
  top: -22px;
  right: -10px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #e7c76b;
  border-radius: 50%;
  color: #fff2bc;
  background: #003d2c;
  font: 34px/1 Georgia, serif;
  box-shadow: 0 2px 7px #0009;
  cursor: pointer;
}
.difficulty-dialog h2 {
  margin: 16px 0 8px;
  color: #fff1c6;
  text-align: center;
  font: bold clamp(25px, 6vw, 37px)/1.12 Georgia, serif;
}
.difficulty-divider { color: #f6d477; text-align: center; font-size: 15px; }
.difficulty-divider::before, .difficulty-divider::after {
  display: inline-block;
  width: 24%;
  height: 1px;
  margin: 0 12px 4px;
  background: linear-gradient(90deg, transparent, #eac45e, transparent);
  content: '';
}
.difficulty-dialog p { margin: 6px 0 18px; text-align: center; font: italic clamp(17px, 4vw, 22px)/1.2 Georgia, serif; }
.difficulty-dialog fieldset { display: grid; gap: 9px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.difficulty-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  min-height: 65px;
  padding: 9px 14px;
  border: 1px solid #dec16f;
  border-radius: 14px;
  background: #002c1e8c;
  box-shadow: inset 0 0 0 1px #fff1ac25;
  cursor: pointer;
}
.difficulty-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.difficulty-option span { min-width: 0; }
.difficulty-option strong { display: block; font-size: clamp(23px, 5.5vw, 29px); line-height: 1.1; }
.difficulty-option small { display: block; margin-top: 3px; font-size: clamp(13px, 3.3vw, 16px); line-height: 1.25; }
.difficulty-option i { flex: 0 0 21px; height: 21px; border: 2px solid #eacb70; border-radius: 50%; box-shadow: 0 1px 3px #0009; }
.difficulty-option:has(input:checked) {
  background: #fff1d1 url('interface/ivory-texture.png') center / 240px;
  color: #063c28;
  border-color: #ffdd7b;
  box-shadow: 0 0 9px #ecc9638c, inset 0 0 0 2px #ddb358;
}
.difficulty-option input:checked ~ i { background: #00543b; box-shadow: inset 0 0 0 2px #fff4d8, 0 0 0 1px #9f6a20; }
.difficulty-option:has(input:focus-visible) { outline: 3px solid #8bd9ff; outline-offset: 3px; }
.difficulty-start {
  width: 100%;
  min-height: 60px;
  margin-top: 18px;
  border: 3px solid #f5d57a;
  border-radius: 999px;
  color: #ffe8a4;
  background: linear-gradient(#12523b, #002619);
  box-shadow: inset 0 0 0 1px #fff2bd, 0 0 10px #e9b64375;
  font: bold 30px/1.1 Georgia, serif;
  text-shadow: 0 2px 2px #000;
  cursor: pointer;
}
.difficulty-dialog button:focus-visible { outline: 3px solid #8bd9ff; outline-offset: 3px; }
@media (max-height: 690px) {
  .difficulty-dialog { padding-top: 12px; padding-bottom: 12px; }
  .difficulty-option { min-height: 55px; padding-block: 6px; }
  .difficulty-dialog p { margin-bottom: 12px; }
  .difficulty-start { margin-top: 12px; min-height: 52px; }
}