:root{--room:url('assets/art-1.jpg');--table:url('assets/art-2.jpg')}
*{box-sizing:border-box}body{margin:0;color:#fff2d3;font-family:Georgia,serif;background:#20150f var(--room) center/cover fixed}button,input{font:inherit}button{cursor:pointer;border:1px solid #c7a264;border-radius:7px;background:#503820;color:#fff2d3;padding:9px 14px}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #fff2a0;outline-offset:3px}.toolbar{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding:12px;background:#140d09c9}h1{font-size:clamp(20px,3vw,32px);text-align:center;margin:12px}.score{text-align:center;background:#1b120dd9;padding:10px;margin:auto;width:fit-content;border:1px solid #ae864a;border-radius:9px}.table{position:relative;background:var(--table) center/100% 100%;border-radius:28px;margin:16px auto;padding:30px 10%;width:min(1100px,96vw);min-height:400px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:15px;align-items:center}.seat{text-align:center;padding:12px;background:#26180cda;border:1px solid #b58a4c;border-radius:8px}.seat.active{box-shadow:0 0 0 3px #ffe199}.partner{grid-column:2}.left{grid-column:1}.right{grid-column:3}.center{grid-column:2;text-align:center}.center p{background:#00341dbf;padding:8px;border-radius:8px}.books{font:14px Arial;display:flex;justify-content:space-around;gap:10px;margin:10px}.hand-area{background:#150e09df;padding:16px;text-align:center}.hand{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px auto;max-width:1250px}.card{width:100px;height:145px;background:#fffdf8;color:var(--suit);border:2px solid #d6cbb5;border-radius:10px;position:relative;padding:7px 5px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;box-shadow:0 5px 9px #0007}.card.selected{outline:3px solid #ffe38a;transform:translateY(-6px)}.card .corner{align-self:flex-start;font:10px Arial;max-width:85px;text-align:left}.card .bottom{transform:rotate(180deg);align-self:flex-end}.burst{width:88px;height:88px;background:var(--suit);clip-path:polygon(50% 0,59% 9%,75% 3%,77% 20%,96% 20%,91% 38%,100% 50%,91% 62%,96% 80%,77% 80%,75% 97%,59% 91%,50% 100%,41% 91%,25% 97%,23% 80%,4% 80%,9% 62%,0 50%,9% 38%,4% 20%,23% 20%,25% 3%,41% 9%);display:flex;flex-direction:column;justify-content:center;align-items:center;color:white;font:bold 14px Arial;padding:9px;text-align:center;flex-shrink:0}.burst small{font:10px Arial;margin-top:4px}.actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.gold{background:#d3b060;color:#251a10;font-weight:bold}.muted{font:14px Arial;opacity:.85}.hidden{display:none!important}dialog{max-width:min(700px,94vw);max-height:90vh;overflow:auto;background:#fff2d3;color:#261b11;border:3px solid #ae864a;border-radius:12px;padding:24px}dialog::backdrop{background:#080604cf}dialog p,dialog li{font:16px/1.5 Arial}dialog input{width:100%;padding:9px;margin:8px 0 16px}dialog button{margin:5px}.gallery{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.back{display:inline-block;width:35px;height:50px;background:repeating-linear-gradient(45deg,#50341e,#50341e 4px,#b89453 5px,#b89453 6px);border:2px solid #e7c88b;border-radius:4px;margin-left:-17px}.fan{padding-left:17px;margin-top:8px}.status{min-height:22px;text-align:center;font:15px Arial;margin:12px}.draft-note{text-align:center;font:12px Arial;background:#24170dd9;padding:8px}.mono .card{filter:grayscale(1)}@media(max-width:650px){.table{padding:18px 10px;grid-template-columns:1fr 1fr 1fr;gap:8px;min-height:300px}.seat{padding:7px;font-size:13px}.center{grid-column:1/4;grid-row:3}.left{grid-row:2}.right{grid-row:2}.partner{grid-row:2;grid-column:2}.hand{gap:7px}.card{width:88px;height:131px}.burst{width:76px;height:76px;font-size:12px}.table h2{font-size:19px}.toolbar button{padding:7px 9px;font-size:13px}}
.table::before{content:"";position:absolute;inset:19% 27% 24%;background:#063d25;border:1px solid #b58a4c;border-radius:12px}.table>div{position:relative;z-index:1}@media(max-width:650px){.table::before{inset:36% 4% 4%}}
.burst{position:relative;isolation:isolate;clip-path:none;background:transparent;padding:8px}.burst svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.burst small{font-weight:bold;font-size:11px}.face-word{display:block}
.back{background:#07345d url("assets/card-back.svg") center/100% 100% no-repeat;border:0;aspect-ratio:62/87}

.table{min-height:320px;padding:20px 8%;margin:10px auto}.stock-card{display:inline-block;width:58px;height:81px;padding:0;border:0;background:none;box-shadow:2px 3px 7px #0008;border-radius:5px}.stock-card img{width:100%;height:100%;border-radius:5px}.center h2{margin:6px}.center p{margin:7px}.hand{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:1140px;padding:8px 4px 13px;margin:5px auto}.hand .card{flex:0 0 clamp(80px,7.4vw,100px);height:auto;aspect-ratio:62/87}.hand .burst{width:100%;height:auto;aspect-ratio:1}.hand-area{padding:8px 12px}.hand-area h2{margin:5px;font-size:21px}.books{margin:7px}.book-controls{margin-bottom:8px}.book-controls button{font:13px Arial;padding:6px 10px}.book-gallery{display:flex;flex-wrap:wrap;gap:16px}.book-pair{border:1px solid #c7a264;border-radius:8px;padding:10px;max-width:240px}.book-pair>.card{display:inline-flex;margin:0 3px;width:90px;height:127px}.book-pair p{margin:0 0 8px}.card.unavailable{filter:saturate(.6);border-style:dashed}.card.selected{filter:none}.corner{font-size:9px}.burst .face-word{font-size:13px}.burst small{font-size:10px}.gallery .card{height:145px}.draft-note{margin-top:4px}h1{margin:8px}
@media(max-width:650px){.hand .card{flex-basis:95px}.table{padding:12px 8px}.score{font-size:14px}.center{display:flex;flex-direction:column;align-items:center}.table::before{inset:30% 3% 3%}.book-controls{margin:7px}.toolbar{padding:6px}.stock-card{width:45px;height:63px}.hand-area .muted{font-size:12px}.card .corner{font-size:9px}}
#discard-pile .card{width:62px;height:87px;margin:8px auto}#discard-pile .burst{width:52px;height:52px}#discard-pile .corner{font-size:7px}#discard-pile .face-word{font-size:10px}#discard-pile small{font-size:8px}#take-discard{font-size:12px;padding:6px 9px}
#selection-help{font:14px/1.4 Arial;min-height:22px;margin:7px;color:#ffe09b}.hand .card.selected{outline:4px solid #ffdd66;box-shadow:0 0 14px #ffdd6699;transform:translateY(-4px)}
.quiz-choice{display:block;width:100%;text-align:left;padding:15px;margin:12px 0;line-height:1.5}#quiz-feedback{padding:12px;background:#eadab8;border-radius:8px}

/* Fixed seats: P1 bottom, P2 left, P3 top, P4 right. */
.table{width:min(1450px,98vw);padding:20px 2%;grid-template-columns:minmax(180px,1fr) minmax(280px,1.6fr) minmax(180px,1fr)}
.partner{grid-row:1;grid-column:2}.left{grid-row:2;grid-column:1}.right{grid-row:2;grid-column:3}.center{grid-row:2;grid-column:2}
.seat-hand{display:flex;gap:8px;overflow:auto;padding:10px 5px;max-height:345px;align-items:flex-start}.left .seat-hand,.right .seat-hand{flex-wrap:wrap;justify-content:center}.seat-hand .card{flex:0 0 92px;height:140px}.hand-area.active{box-shadow:inset 0 0 0 3px #ffe199}.card .bottom{transform:none}.seat-hand .face-word{overflow-wrap:anywhere}.hand>.fan{width:100%;text-align:center}.hand>.seat-hand{width:100%;justify-content:flex-start}.seat-hand .card .burst{min-height:75px}.seat{min-width:0}
@media(max-width:760px){.table{grid-template-columns:minmax(110px,1fr) minmax(160px,1.4fr) minmax(110px,1fr);overflow-x:auto;gap:5px}.center{grid-column:2;grid-row:2}.partner{grid-column:2;grid-row:1}.left,.right{grid-row:2}.seat-hand .card{flex-basis:88px}.table .seat{padding:5px}.seat-hand{max-height:300px}.center p{font-size:13px}.table button{padding:7px}.score{font-size:14px}}

.card.by-card{border-color:#8f64bf}.card.with-card{border:3px solid #e6c134;background:#fff5bb}.card.dual-colour{border:3px solid #8e62bd;background:linear-gradient(135deg,#f0e5ff 0 49%,#fff1a7 51% 100%)}.card .face-word{font-size:12px;line-height:1.12}.card .burst{min-height:90px}.card .corner{font-size:8px}.seat-hand .card{height:160px}.card.dual-colour .face-word{font-weight:bold}.card.with-card .burst path,.card.with-card .burst ellipse{fill:#8a6500}

/* Full, original tense contexts need upright readable sentence cards. */
.card,.seat-hand .card,.gallery .card,.hand .card{width:156px;height:218px;min-width:156px;flex-basis:156px;aspect-ratio:auto;padding:10px}
.card .burst,.seat-hand .card .burst,.hand .burst{width:132px;height:158px;min-height:158px;aspect-ratio:auto;padding:8px}
.card .corner{font:10px/1.2 Arial;max-width:132px}.card .face-word{font:600 14px/1.3 Arial;overflow-wrap:normal}
.sentence-card .burst svg{opacity:.12}.sentence-card .face-word{color:var(--suit)}.form-card .face-word{font-size:22px}
#discard-pile .card{width:156px;height:218px}#discard-pile .burst{width:132px;height:158px}#discard-pile .corner{font-size:10px}#discard-pile .face-word{font-size:14px}
.book-pair{max-width:365px}.book-pair>.card{width:156px;height:218px}.table{grid-template-columns:minmax(190px,1fr) minmax(310px,1.6fr) minmax(190px,1fr)}
@media(max-width:760px){.table{grid-template-columns:180px 260px 180px;justify-content:start}.seat-hand .card{flex-basis:156px}.seat-hand{max-height:470px}}

/* Sentence-game standard: exact original WHO cream/gold frame and folded fan.
   Sentence fan: 42% width, centred at 20% height; text begins at 37%.
   Word/form fan: 91% width, centred on the card. No generated approximation. */
.card.sentence-standard,.seat-hand .card.sentence-standard,.gallery .card.sentence-standard,.hand .card.sentence-standard,#discard-pile .card.sentence-standard,.book-pair>.card.sentence-standard{width:180px;height:270px;min-width:180px;flex:0 0 180px;aspect-ratio:2/3;padding:0;background:#fff8e5 url('assets/sentence-face.png') center/100% 100% no-repeat;border:2px solid var(--suit);border-radius:10px;color:#302817;isolation:isolate}
.card.sentence-standard.with-card{border-color:#d7b220}.card.sentence-standard.by-card{border-color:#8054ac}
.sentence-standard .original-sentence-fan{position:absolute;width:91%;height:auto;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.sentence-standard.sentence-card .original-sentence-fan{width:42%;top:20%}
.card.sentence-standard .face-word,#discard-pile .sentence-standard .face-word{position:absolute;left:12%;right:12%;top:37%;bottom:15%;display:flex;align-items:flex-start;justify-content:center;font:600 14px/1.35 Arial;text-align:center;overflow-wrap:normal;color:#302817}
.card.sentence-standard.form-card .face-word{top:20%;bottom:20%;align-items:center;font-size:26px;color:#201911;text-shadow:0 1px 3px #fff}
.sentence-standard .sentence-category{position:absolute;left:10%;right:10%;bottom:9%;font:600 10px/1.2 Arial;text-align:center;color:var(--suit);background:#fff8e5d9;border-radius:3px;padding:3px 0}
.card.sentence-standard.unavailable{border-style:dashed}.book-pair{max-width:410px}.seat-hand{max-height:585px}.left .seat-hand,.right .seat-hand{justify-content:flex-start}

/* Colour is the default. Tint only the original fan's RGB, preserving its
   transparent silhouette, folds and shadows; the supplied raster is unchanged. */
.colour-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.sentence-standard.by-card .original-sentence-fan{filter:url(#fan-purple)}
.sentence-standard.with-card .original-sentence-fan{filter:url(#fan-yellow)}
.card.sentence-standard.by-card{border:3px solid #7040a0}.card.sentence-standard.with-card{border:3px solid #d3ac12}
.sentence-standard .sentence-category{background:#7040a0;color:white;padding:5px 0}
.sentence-standard.with-card .sentence-category{background:#eed13f;color:#352700}
/* Ensure optional monochrome consistently overrides selection/unavailable filters. */
body.mono .card.sentence-standard{filter:grayscale(1)}