@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');
:root {
 --ink:#f1f5ee; --muted:#a5bec0; --cream:#fff6dd; --teal:#104751; --deep:#092f38;
 --color-navy:#28466c; --color-gold:#e7b45c; --color-aqua:#67c4c5; --color-ink:#303f4d;
 --color-white:#dedde2; --color-green:#6e9d78; --color-violet:#9b7dba; --color-gray:#99a4aa;
 --color-pink:#dc8693; --color-peach:#efac85; --color-orange:#dc8d55; --color-sand:#b6ad8a;
 --session-bg:#082e36; --session-color:#f1f0dc; --session-accent:#f1ca86; --session-border:#2a5761;
 font-family:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;min-width:780px;background:radial-gradient(ellipse at 88% 6%,#23676a5c 0,transparent 45%),linear-gradient(145deg,#07323c,#092a34 65%,#09252e);color:var(--ink)}
button{font:inherit;cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid #ffc875;outline-offset:3px}
#shell{max-width:1580px;margin:auto;padding:15px 30px 36px}
#notice{padding:12px 18px;background:#643a3e;color:white;border-radius:6px}
#lobby{max-width:1100px;margin:3vh auto}
#game{min-width:0}
.sea-table{display:flex;flex-direction:column;gap:13px;margin:auto;max-width:1520px}
.standings{display:flex;align-items:stretch;gap:7px;min-height:62px;border-bottom:1px solid #b4d9d52a;padding-bottom:10px}
.round-id{min-width:88px;padding:2px 13px 2px 0;border-right:1px solid #a5c8c440;display:flex;flex-direction:column;gap:1px}
.overline,.pile-caption,.section-note,.card-hint{font-size:12px;font-weight:800;letter-spacing:.12em;color:#a3c4c4}
.round-id strong{font:600 31px/.95 'Fraunces',serif;color:#ffdc99}
.score-player{min-width:140px;flex:1;display:flex;align-items:baseline;gap:7px;padding:8px 13px;border-radius:5px;position:relative}
.score-player:nth-child(2n+1){background:#ffffff08}
.score-player.active{background:#d0b46b25}
.score-player.self{border-bottom:2px solid #f5c585}
.score-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.score-number{font:600 29px/1 'Fraunces',serif;color:#ffdfa8}
.score-player small{font-size:12px;color:#8cb1b3}
.you-tag{font:700 9px 'DM Sans',sans-serif;color:#ffe4a9;margin-left:6px;letter-spacing:.1em}
.turn-status{display:flex;align-items:baseline;gap:18px;min-height:24px;flex-wrap:wrap}
.turn-status strong{font-size:17px;color:#f5deb0}
.event-note{font-size:13px;color:#9cb9be;overflow:hidden;text-overflow:ellipsis}
.last-chance-tag,.extra-turn-tag{background:#bd66412c;color:#ffd2af;padding:4px 9px;border-radius:3px;font-size:11px;font-weight:800;letter-spacing:.04em}
.extra-turn-tag{background:#bfb36224;color:#f7e6a7}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:11px}
.section-heading h2{font:500 21px 'Fraunces',Georgia,serif;color:#eee1be;margin:0}
.section-note{letter-spacing:.02em;font-weight:500}
.sea-board{display:grid;grid-template-columns:minmax(385px,1fr) minmax(340px,.9fr);gap:26px;align-items:stretch;border-bottom:1px solid #91c8c329;padding-bottom:12px;min-height:225px}
.draw-area{min-width:0}
.piles{display:flex;align-items:start;justify-content:flex-start;gap:14px}
.pile-wrap{width:125px;flex:0 0 125px}
.pile-caption{height:26px;white-space:nowrap;text-align:center;letter-spacing:.04em}
.sea-card{--card-hue:#699d9f;display:flex;flex-direction:column;position:relative;isolation:isolate;flex:0 0 125px;width:125px;height:172px;min-width:0;padding:0;border-radius:6px;overflow:hidden;border:3px solid #f6ead6;background:var(--card-hue);box-shadow:0 5px 11px #001c24a1,0 0 0 1px #071a1d;color:#123d42;text-align:left;transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease}
.sea-card:before{content:"";position:absolute;top:0;bottom:0;left:0;width:7px;background:var(--card-hue);box-shadow:1px 0 0 #fff5d5aa;z-index:2;pointer-events:none}
.sea-card:after{content:'';pointer-events:none;position:absolute;inset:0;border:1px solid #fff9e488;border-radius:3px;z-index:3}
.sea-card .card-art{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(ellipse,#e5e4cf80,transparent 70%),var(--card-hue)}
.card-art img{height:100%;width:100%;object-fit:cover;display:block}
.card-corner{position:absolute;top:6px;left:7px;min-width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#fff6e7dd;color:#133740;font-size:17px;box-shadow:0 1px 3px #10323e77;z-index:2}
.card-footer{display:flex;flex-direction:column;justify-content:center;min-height:39px;gap:1px;padding:4px 9px;background:#fff5e0;color:#193f44;border-top:3px solid var(--card-hue);white-space:nowrap;overflow:hidden}
.card-name{font:700 13px/1.1 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis}
.card-hint{font-size:12px;letter-spacing:.02em;color:#608482}
.sea-card.small{width:74px;height:103px;flex-basis:74px;border-width:2px;border-radius:4px}
.sea-card.small .card-footer{min-height:27px;padding:2px 4px;border-top-width:2px}
.sea-card.small .card-name{font-size:12px}
.sea-card.small .card-hint{display:none}
.sea-card.small .card-corner{top:3px;left:3px;font-size:11px;width:17px;min-width:17px;height:17px}
.sea-card.large{width:244px;height:340px;flex:0 0 244px}
.sea-card.large .card-footer{min-height:68px;padding:8px 14px}
.sea-card.large .card-name{font-size:23px}
.sea-card.empty{display:grid;place-items:center;background:#15475180;color:#89b6b2;border:2px dashed #608a85;box-shadow:none}
.sea-card.pickable{cursor:pointer}
.sea-card.pickable:hover,.sea-card.pickable:focus-visible{border-color:#f2d17e;transform:translateY(-7px);box-shadow:0 12px 22px #001c24aa,0 0 0 2px #ffd680}
.sea-card.selected{transform:translateY(-9px);border-color:#ffdb80;box-shadow:0 0 0 3px #ffce6f,0 10px 26px #001b28}
.deck-back{background:linear-gradient(155deg,#174f58,#092e38);border-color:#d9c38e;align-items:center;justify-content:center;gap:15px}
.deck-back .back-pattern{font:500 70px/.9 'Fraunces',serif;color:#f6d69c;text-shadow:0 1px 16px #fbd3a55c;transform:rotate(23deg)}
.deck-back .back-label{color:#d6c59e;font-size:10px;letter-spacing:.17em;font-weight:700}
.deck-back:disabled{opacity:.68}
.draw-choices{margin-top:13px}
.draw-choices .section-heading h2{font-size:18px}
.draw-choice-cards{display:flex;gap:15px;padding-top:6px}
.choice-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0}
.choice-actions>span{font-size:12px;color:#acced0}
.action-area{border-left:1px solid #9bb9b636;padding-left:22px;min-width:0}
.context-actions{display:flex;align-items:flex-start;flex-direction:column;gap:12px;min-height:175px}
.instruction,.waiting{margin:0;font-size:14px;line-height:1.55;color:#c9d8d2;max-width:43ch}
.warning{color:#ffbd9e}
.primary,.secondary,.ghost,.stop-button,.chance-button{border-radius:5px;font-weight:700;font-size:13px;padding:10px 15px;border:1px solid transparent;transition:filter .15s}
.primary{background:#f2cd87;color:#123d43}.primary:hover{filter:brightness(1.1)}
.secondary{background:#204f58;color:#f4ebd6;border-color:#65918e}
.secondary:hover{background:#31636a}
.ghost{background:transparent;color:#b2cdcb;border-color:#628887}
.ghost:hover{color:white;border-color:white}
.action-primary{min-width:185px}
.action-end{margin-top:auto}
.call-actions{display:flex;flex-wrap:wrap;gap:9px;padding-top:10px;border-top:1px solid #91c8c329;width:100%}
.stop-button{background:#d3e7c4;color:#193f43;flex:1;min-width:88px}
.chance-button{background:#db9870;color:#1d3336;flex:1.4;min-width:135px}
.call-actions button:hover{filter:brightness(1.12)}
.score-calculation{display:flex;gap:18px;align-items:baseline;margin-top:auto;border-top:1px solid #ffffff1b;padding-top:9px;width:100%}
.score-calculation span{font-size:12px;color:#a3bbba}
.score-calculation strong{font:600 29px/1 'Fraunces',serif;color:#ffe0a0}
.crab-list{max-width:100%;width:100%;display:flex;flex-direction:column;gap:5px}
.crab-list>strong{font-size:12px;color:#e4d4ae}
.crab-cards{display:flex;gap:7px;overflow-x:auto;padding:9px 5px 13px}
.round-recap{width:100%;max-width:460px}
.recap-title{font:600 21px 'Fraunces',serif;color:#f5d4ac;margin-bottom:12px}
.outcome-name{font:700 23px 'Fraunces',serif;color:#f6d28f;margin-bottom:10px}
.recap-rows{display:flex;flex-direction:column;gap:4px}
.recap-row{display:flex;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid #ffffff23}
.recap-row>span:first-child{flex:1;font-weight:700;font-size:13px}
.recap-card-points{color:#9dbbb8;font-size:11px}
.recap-row strong{font-size:20px;color:#ffe0a4}
.players-area{padding-bottom:8px;border-bottom:1px solid #91c8c329}
.roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;min-height:110px}
.opponent{min-width:0;padding:8px 10px;background:#ffffff07;border-radius:4px}
.opponent.active{background:#e3c37d14}
.opponent-heading{display:flex;gap:10px;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.opponent-heading strong{font:600 15px 'Fraunces',serif;color:#f3e1bc}
.opponent-heading span{font-size:11px;color:#acc8c6}
.played-cards,.revealed-hand,.own-played-cards{display:flex;gap:5px;overflow-x:auto;padding:3px 2px 8px;min-height:40px}
.played-cards .sea-card,.revealed-hand .sea-card{width:60px;height:82px;flex-basis:60px}
.played-cards .card-corner,.revealed-hand .card-corner{display:grid}
.played-cards .card-footer,.revealed-hand .card-footer{min-height:26px}
.played-cards .card-name,.revealed-hand .card-name{font-size:9px}
.none{font-style:italic;color:#74969a;font-size:12px}
.hand-area{min-height:207px}
.hand-cards{display:flex;align-items:flex-start;gap:11px;overflow-x:auto;overflow-y:visible;min-height:184px;padding:10px 7px 14px}
.hand-cards .sea-card{width:118px;flex-basis:118px;height:168px}
.hand-cards .card-name{font-size:13px}
.empty-hand{font-style:italic;color:#86b1ac}
.your-played{display:flex;align-items:center;gap:14px;margin-top:3px}
.own-played-cards{min-height:45px}
.own-played-cards .sea-card{width:53px;flex-basis:53px;height:75px}
.own-played-cards .card-footer{min-height:23px}
.own-played-cards .card-name{font-size:8px}
dialog{border:1px solid #9db4ac;background:#103d46;color:#edf4e9;border-radius:8px;box-shadow:0 22px 70px #001c22ee;max-width:min(650px,90vw)}
dialog::backdrop{background:#001820b8}
.rules-content{padding:10px 24px 24px;max-height:80vh;overflow:auto;line-height:1.6;font-size:14px}
.rules-content header{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #ffffff29;margin-bottom:12px}
.rules-content h2,.rules-content h3,.decision-content h2,.inspect-dialog h2{font-family:'Fraunces',Georgia,serif;color:#ffe0aa}
.rules-content h3{margin:21px 0 5px}
.rules-content p{margin:5px 0 12px}
.rules-content button,.inspect-dialog button{background:#e8c889;border:0;border-radius:5px;padding:8px 12px;color:#163f44;font-weight:700}
.decision-content{padding:18px 23px;max-width:460px}
.decision-content p{line-height:1.6}
.decision-actions{display:flex;justify-content:end;gap:12px;margin-top:22px}
.decision-actions button{padding:10px 16px;border-radius:4px;background:#215360;border:1px solid #769c9b;color:white}
#decision-confirm{background:#f6c47a;color:#14343d;border:0;font-weight:800}
.inspect-dialog{text-align:center;padding:22px 30px;max-width:320px}
.inspect-dialog .sea-card{margin:0 auto}
.inspect-dialog p{font-size:14px;line-height:1.5}
@media (max-width:1060px){#shell{padding:12px 19px 28px}.sea-board{gap:18px;grid-template-columns:minmax(380px,1fr) minmax(300px,.9fr)}.action-area{padding-left:15px}.roster{gap:9px}.score-player{min-width:110px;padding:8px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:0.001ms!important;animation-duration:0.001ms!important}}

/* Tiny card thumbnails show distinctive art, not illegibly small printed labels. */
.played-cards .card-footer,.revealed-hand .card-footer,.own-played-cards .card-footer{display:none}