@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap");
:root{color-scheme:dark;--paper:#f6ead5;--gold:#d9bc83;--muted:#b3adb0;--line:#586258;--dark:#142427}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 20%,#324044 0%,#1b282d 52%,#121c21 100%);color:var(--paper);font:15px/1.45 Outfit,Arial,sans-serif}
button{font:inherit;cursor:pointer}
button:focus-visible,[role=button]:focus-visible{outline:3px solid #ecce88;outline-offset:3px}
button:disabled{cursor:not-allowed}
#shell{min-height:calc(100vh - 48px)}
#notice:not([hidden]){position:fixed;z-index:1000;top:56px;left:50%;transform:translateX(-50%);border:1px solid #dd9696;background:#4b2429;padding:10px 18px;color:white;box-shadow:0 8px 24px #0008}
#game{width:100%;min-width:980px}
.coup-table{max-width:1480px;margin:auto;padding:16px clamp(12px,2.5vw,42px) 32px;display:flex;flex-direction:column;gap:13px;position:relative}
.court-seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;align-items:stretch}
.court-seat{appearance:none;border:0;border-bottom:1px solid #68706b60;background:linear-gradient(100deg,#b9caaf10,transparent);color:var(--paper);min-width:0;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;text-align:left;min-height:117px}
.court-seat:nth-child(even){background:linear-gradient(100deg,#ced0b419,transparent)}
.court-seat.self{background:linear-gradient(100deg,#a4aa7530,transparent)}
.court-seat.turn{box-shadow:inset 4px 0 var(--gold)}
.court-seat.decider .seat-tag{color:#f4ddac}
.court-seat.out{opacity:.56}
.court-seat.winner{background:linear-gradient(100deg,#baa76953,#47665a22);box-shadow:inset 4px 0 #efcf83}
.court-seat.target{background:linear-gradient(100deg,#a4bd9245,#5a69552a);outline:2px solid #cfdfaf;outline-offset:-2px;transition:background .15s,transform .15s}
.court-seat.target:hover{background:#74845b65;transform:translateY(-2px)}
.court-seat.target:focus-visible{outline:3px solid #fbe1a9}
.court-seat .target-label{position:absolute;right:3px;bottom:0px;color:#fff4d4;background:#3e5f49;font:700 10px Outfit;padding:2px 7px;letter-spacing:.12em}
.seat-heading{display:flex;align-content:center;align-items:flex-start;flex-wrap:wrap;gap:4px 8px;flex:1;min-width:0}
.seat-name{font-size:clamp(14px,1.3vw,18px);line-height:1.2;flex:0 1 auto;max-width:100%;overflow-wrap:anywhere;font-weight:700}
.seat-tag{font-size:10px;letter-spacing:.13em;color:#a5adac;font-weight:800;align-self:center}
.seat-coins{display:flex;align-items:center;gap:6px;width:100%;font-size:18px;font-variant-numeric:tabular-nums;color:#f0d499}
.coin-mark{display:inline-grid;place-items:center;border:2px solid #cda86a;border-radius:50%;width:23px;height:23px;background:#5d4726;font-size:13px;color:#e7c787;box-shadow:inset 0 0 0 2px #79633c}
.seat-influence{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex:0 0 auto}
.role-card{--role-border:#c5a877;appearance:none;position:relative;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;width:156px;aspect-ratio:5/7.25;flex:0 0 auto;overflow:hidden;color:#fff5dd;border:3px solid var(--role-border);border-radius:6px;background:#344142;box-shadow:0 8px 20px #0007,0 0 0 1px #1b1d1b;outline-offset:2px;padding:0;transition:transform .16s ease,filter .16s ease,box-shadow .16s}
.role-card.small{width:72px;border-width:2px;border-radius:4px;box-shadow:0 3px 10px #0006}
.role-card.role-duke{--role-border:#82c1b6}.role-card.role-assassin{--role-border:#d58d8d}.role-card.role-captain{--role-border:#8badd1}.role-card.role-ambassador{--role-border:#a88fd4}.role-card.role-contessa{--role-border:#98bf98}
.role-card .role-art{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-1;background-color:#394446}
.role-card .role-art::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 54%,#111c2066 74%,#101c24df 100%)}
.role-name{display:block;z-index:1;text-align:center;padding:13px 4px 4px;font:700 30px/1 "Cormorant Garamond",Georgia,serif;text-shadow:0 2px 5px #000f;background:linear-gradient(transparent,#080d12c0)}
.role-power{z-index:1;font-weight:700;font-size:13px;text-align:center;padding:3px 2px 13px;color:#fbe9bd;background:#080d12bb}
.role-card.small .role-name{font-size:16px;padding:6px 2px 4px}
.role-card.back{background:repeating-linear-gradient(135deg,#2c4544 0,#2c4544 9px,#34504d 9px,#34504d 11px,#1a3030 11px,#1a3030 19px);border-color:#c1a778}
.role-card.back::before{content:"";position:absolute;inset:8px;border:1px solid #c9ad7b82}
.role-card.back::after{content:"";position:absolute;inset:14px;border:1px solid #b1a07765;transform:rotate(0deg)}
.card-stamp{align-self:center;justify-self:center;margin:auto;color:#dbc08b;border:2px solid #c9ab74;background:#183038c9;display:grid;place-items:center;width:56px;height:56px;transform:rotate(45deg);font-size:39px;line-height:1;box-shadow:0 0 0 5px #142c2b80}
.role-card.small .card-stamp{width:28px;height:28px;font-size:21px}
.role-card.revealed{filter:grayscale(.48) brightness(.78)}
.role-card.selectable,.role-card.reveal-choice{cursor:pointer}
.role-card.selectable:hover,.role-card.reveal-choice:hover{transform:translateY(-7px);filter:brightness(1.13)}
.role-card.reveal-choice{box-shadow:0 0 0 3px #ce9c8c,0 0 22px #c5766d70}
.role-card.chosen{box-shadow:0 0 0 4px #f1d695,0 12px 32px #0009;transform:translateY(-10px)}
.role-card.empty-card{opacity:.42;filter:grayscale(1)}
.role-card[role=button]:not(.small):hover{filter:brightness(1.12)}
.court-main{display:flex;flex-direction:column;gap:9px}
.decision{min-height:86px;display:grid;grid-template-columns:120px 1fr auto;gap:16px;align-items:center;padding:12px 20px;border-block:1px solid #8e977f;background:linear-gradient(90deg,#32494177,#37463ddd,#2c3b3add)}
.decision.arrived{animation:decision-flash .55s ease-out}
.turn-number{font-size:11px;font-weight:800;letter-spacing:.12em;color:#cbb88a;line-height:1.5}
.decision-copy{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 12px;text-align:center;min-width:0}
.decision-primary{font:700 clamp(18px,2vw,27px)/1.08 "Cormorant Garamond",serif;color:#f8eed7}
.decision-sub{font-size:13px;color:#cbbfba}
.decision-help{font-size:12px;line-height:1.3;color:#c7d1c9;flex-basis:100%;text-align:center}
.decision-wait{font-size:12px;color:#b6c2ba}
.role-tag{display:inline-block;background:color-mix(in srgb,var(--tag-color),transparent 76%);color:var(--tag-color);border:1px solid color-mix(in srgb,var(--tag-color),transparent 35%);padding:3px 9px;font-weight:700;font-size:12px;border-radius:3px;cursor:help}
.decision-buttons{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.court-button{color:#1c2524;background:#e2c995;border:1px solid #f8e0ae;padding:9px 14px;border-radius:4px;font-weight:750;font-size:13px;min-height:39px;white-space:nowrap}
.court-button.quiet{background:#2c3a3a;color:#e7e3d5;border-color:#738078}
.court-button.danger{background:#723d3e;border-color:#bf7f78;color:#ffebdf}
.court-button.block{background:#3d615b;border-color:#8aaca1;color:#e6f4e4}
.court-button:hover:not(:disabled){filter:brightness(1.12)}
.court-button:disabled{opacity:.35}
.court-dock{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:256px;padding:4px 0;position:relative}
.action-list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;align-items:stretch;width:100%}
.action-option{--action-color:#d1b77f;min-width:0;min-height:155px;text-align:left;display:flex;flex-direction:column;gap:11px;align-items:flex-start;justify-content:space-around;color:#f6ead6;background:linear-gradient(150deg,#40524d,#293638);border:1px solid #788476;border-top:4px solid var(--action-color);border-radius:5px;padding:14px 10px;transition:transform .15s,box-shadow .15s}
.action-option strong{font:700 clamp(19px,1.8vw,26px)/.96 "Cormorant Garamond",serif}
.action-option span{font:700 14px Outfit;color:#f3d9a1}
.action-option small{font:600 11px Outfit;color:#bdc8c2}
.action-option:hover:not(:disabled){transform:translateY(-5px);box-shadow:0 8px 20px #0006;background:#455f58}
.action-option.picked{outline:3px solid #ecd4a0;outline-offset:2px;transform:translateY(-4px)}
.action-option:disabled{opacity:.34;filter:grayscale(.8)}
.my-influence{display:flex;align-items:center;gap:20px;padding:5px 0;min-height:246px}
.vertical-heading{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;letter-spacing:.18em;color:#c7b68e;font-weight:800}
.my-cards,.exchange-cards{display:flex;gap:16px;align-items:center;justify-content:center}
.exchange-cards{flex-wrap:wrap;gap:14px;padding:10px 0}
.court-pile{display:flex;align-items:center;gap:12px;flex-direction:column;position:absolute;right:0;bottom:0;min-width:98px}
.court-pile span{font-size:10px;letter-spacing:.12em;color:#bfc6b8;white-space:nowrap}
.spectator-copy{font:italic 18px "Cormorant Garamond",serif;color:#a7b7ac}
.victory{align-self:center;font:700 28px "Cormorant Garamond",serif;color:#eed498;padding:5px 30px;border-top:1px solid #ac966b}
.history{align-self:flex-end;color:#acb7b1;font-size:12px;max-width:600px}
.history summary{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.history ol{padding:4px 0 3px 26px;max-height:160px;overflow:auto}
.history li{margin-bottom:4px}
dialog{color:#f4e8d2;background:#24383a;border:1px solid #ae9463;border-radius:7px;max-width:min(680px,92vw);box-shadow:0 15px 80px #000b;padding:20px 25px}
dialog::backdrop{background:#060c0dc7;backdrop-filter:blur(2px)}
dialog button{padding:7px 14px;border:1px solid #beac89;border-radius:4px;background:#e3c993;color:#202b29;font-weight:700}
dialog .rules-content{max-height:min(70vh,710px);overflow-y:auto;padding:4px 8px 4px 0}
.rules-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
dialog h2,dialog h3{font-family:"Cormorant Garamond",Georgia,serif;color:#ecd29b}
dialog h2{font-size:30px;margin:0 0 8px}dialog h3{font-size:23px;margin:14px 0 0}
dialog p{font-size:14px;line-height:1.5}
.inspect-content{display:flex;flex-direction:column;gap:8px;max-width:320px}
.inspect-art{background-position:center;background-size:cover;width:100%;aspect-ratio:5/7;max-height:410px}
.inspect-action,.inspect-block{font-weight:700;color:#e7c995}
.inspect-content button{align-self:flex-end}
.court-seat.coin-change .seat-coins{animation:coin-pulse .7s ease-out}
.court-seat.lost-influence .seat-influence{animation:influence-fall .7s ease-out}
@keyframes coin-pulse{0%{filter:brightness(2);transform:scale(1.14)}100%{filter:none;transform:scale(1)}}
@keyframes influence-fall{0%{filter:brightness(2) sepia(.7);transform:translateY(-6px)}100%{filter:none;transform:translateY(0)}}
@keyframes decision-flash{0%{box-shadow:inset 0 0 40px #ceb88165}100%{box-shadow:none}}
@media(max-width:1180px){.coup-table{padding:10px 12px}.seat-name{font-size:14px}.court-seat{padding:6px;gap:4px}.role-card.small{width:60px}.action-list{gap:5px}.action-option{padding:10px 6px;min-height:150px}.court-pile{right:8px}.decision{gap:6px;padding:10px}}
@media(max-height:790px){.coup-table{gap:7px;padding-top:4px}.court-seat{min-height:88px}.role-card.small{width:54px}.decision{min-height:68px}.court-dock{min-height:206px}.my-influence{min-height:200px}.my-cards .role-card{width:120px}.action-option{min-height:120px}.action-option strong{font-size:20px}.action-list{min-height:130px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}