:root{color-scheme:light;--ink:#183c3a;--paper:#f5f0e4;--gold:#9a6c29;--line:#d9cfba}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,sans-serif}header{padding:15px 5vw 13px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:3px;align-items:center;text-align:center}header>a{font-family:Georgia,serif;font-size:32px;line-height:1.15;text-decoration:none}nav{display:flex;justify-content:center;gap:18px;align-items:center;font-size:12px;letter-spacing:.06em}nav .text-button{font-size:inherit}a{color:inherit}main{max-width:1440px;margin:auto;padding:32px 5vw 70px}h1,h2{font-family:Georgia,serif;font-weight:400;line-height:1.15}h1{font-size:clamp(34px,5vw,60px);margin:12px 0 20px}h2{font-size:28px}p{max-width:850px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--gold)}label{display:block;font-size:14px;margin:12px 0 5px}input{font:inherit;background:#fffcf6;border:1px solid #9b9e8d;border-radius:4px;padding:10px 12px;width:100%;max-width:550px;color:var(--ink)}button{font:inherit;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:#fffaf0;padding:10px 17px;cursor:pointer}button:disabled{opacity:.5;cursor:default}.secondary{background:transparent;color:var(--ink)}.text-button{border:0;padding:4px;background:transparent;color:var(--ink);text-decoration:underline}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}.modes{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:30px 0}.modes article{border-top:2px solid var(--gold);padding:10px 0}.modes button{margin:12px 8px 0 0}.note{font-size:14px;color:#596755}#notice{padding:14px 18px;background:#fae4cb;border-left:4px solid #a45224}.table-top,.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.table-top h1{font-size:36px}.scores{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:24px 0}.score{padding:14px 20px;background:#e6e4d5;border-left:3px solid var(--gold)}.score strong{font-size:22px;display:block}.client-count{display:block}.deck-summary{display:flex;align-items:center;gap:14px;margin-top:12px}.deck-pile{position:relative;flex:0 0 78px;width:78px;height:101px}.deck-card{position:absolute;width:64px;height:87px;border:1px solid #6e4c20;border-radius:3px;background:url('/art/pages/page-031.webp') center/cover no-repeat;box-shadow:0 2px 5px #183c3a40}.deck-card::before{content:'✦';position:absolute;inset:13% 12%;display:grid;place-items:center;border:1px solid #88682f;border-radius:50%;background:radial-gradient(circle,#efe2ac99 0 28%,transparent 70%);color:#6f5425;font:700 27px/1 Georgia,serif;text-shadow:0 1px #fff8d1}.deck-card::after{content:'';position:absolute;inset:31%;border:1px solid #88682f;transform:rotate(45deg)}.deck-card-1{left:0;top:0;transform:rotate(-1.5deg)}.deck-card-2{left:5px;top:4px;transform:rotate(.5deg)}.deck-card-3{left:10px;top:8px;transform:rotate(1.5deg)}.deck-count{position:absolute;right:0;bottom:0;z-index:4;min-width:28px;padding:2px 6px;border:2px solid var(--paper);border-radius:999px;background:var(--ink);color:#fffaf0;font-size:12px;font-weight:700;line-height:1.5;text-align:center}.deck-pile.empty{height:90px;border:1px dashed #9b9e8d;border-radius:3px}.deck-label{max-width:125px;font-size:13px;font-weight:600;line-height:1.35}.controls{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0 20px}.round-guidance{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .4em;min-height:32px}.round-guidance p{margin:0}#turn-status{font-size:20px;font-weight:600}#selection{min-height:26px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:15px}#board section{padding-top:12px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:18px;margin:18px 0}.card{min-width:0;max-width:230px}.card img{width:100%;height:auto;display:block}.card-face{display:block;border:0;padding:0;background:transparent;color:inherit;border-radius:0;width:100%}.card-face:disabled{opacity:1}.card-face.available{outline:3px solid #558775;outline-offset:3px}.card-face.selected{outline:4px solid #b2751d;outline-offset:3px}.both-sides{display:block;width:100%;background:transparent;border:0;color:var(--ink);padding:8px 0;text-decoration:underline;font-size:12px}.empty{color:#667163;font-style:italic}summary{cursor:pointer;padding:12px 0}#chronicle{padding-left:25px;max-height:430px;overflow:auto}#chronicle li{border-bottom:1px solid var(--line);padding:10px 0}.dice{font-weight:600;color:#795719}.narrative{font-style:italic}dialog{max-width:730px;width:calc(100% - 24px);max-height:94dvh;overflow:auto;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:24px;border-radius:6px}dialog::backdrop{background:#102e2bc9}#viewer-image{display:block;max-width:100%;max-height:70dvh;width:auto;height:auto;margin:20px auto 0}#online-info{padding-bottom:20px;border-bottom:1px solid var(--line)}@media(max-width:600px){header{align-items:center;flex-direction:column}header>a{font-size:27px}nav{gap:16px}.modes{grid-template-columns:1fr;gap:15px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.scores{gap:8px}.score{padding:10px;font-size:13px}.score strong{font-size:18px}.table-top{align-items:start}.table-top h1{font-size:29px}.table-top button{font-size:13px}.actions button{flex-grow:1}}
@media(max-width:600px){.deck-summary{gap:8px}.deck-pile{flex-basis:79px;width:62px;height:79px}.deck-card{width:50px;height:68px}.deck-card-2{left:4px;top:3px}.deck-card-3{left:8px;top:6px}.deck-pile.empty{height:70px}.deck-label{font-size:12px}}
.player-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0 0}.player-panel{min-width:0;padding:18px;border:1px solid var(--line);border-top:3px solid var(--gold);background:#ebe9dd}.player-panel .score{padding:0 0 16px;margin:0 0 16px;background:transparent;border:0;border-bottom:1px solid #cfc5b0}.player-panel .deck-summary{margin-top:10px}.player-zone+.player-zone{margin-top:20px;padding-top:18px;border-top:1px solid #cfc5b0}.player-zone h2{margin:0;font-size:22px}.player-zone>p{margin:6px 0 0;font-size:14px}.player-zone .cards{grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:12px;margin:12px 0 0}.player-zone .card{max-width:180px}.village-panel{margin:0 0 18px;padding:0 0 18px!important;border-bottom:2px solid var(--gold)}.village-panel h2{margin-top:0}
@media(max-width:900px){.player-panels{grid-template-columns:1fr}.player-panel .score{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:start}.player-panel .score strong,.player-panel .client-count{grid-column:1}.player-panel .deck-summary{grid-column:2;grid-row:1/3;margin-top:0}}
@media(max-width:600px){.player-panel{padding:12px}.player-panel .score{display:block}.player-panel .deck-summary{margin-top:10px}.player-zone .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.deck-summary{flex-wrap:wrap}.deck-draw{margin-left:auto;align-self:center;white-space:nowrap;background:var(--gold);border-color:#76501f}.deck-draw:focus-visible{outline-color:var(--ink)}.deck-draw:disabled{opacity:.72}.deck-draw.secondary:disabled{opacity:1;background:#e0d7c5;color:var(--ink);border-color:#9b9e8d}
@media(max-width:600px){.deck-draw{margin-left:0}}
.roll-panel,.computer-pause{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:16px 0;padding:16px 18px;border:1px solid #c6b995;border-left:4px solid var(--gold);background:#eee7d6}.roll-panel[hidden],.computer-pause[hidden]{display:none}.dice-prompt{display:flex;gap:8px;color:var(--ink);font:42px/1 Georgia,serif}.computer-pause p{flex:1;min-width:220px;margin:0;font-size:18px;font-weight:600}.dice-board{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0}.dice-set{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);background:#fffaf0}.dice-set strong{margin-right:4px}.die-face{font:34px/1 Georgia,serif;color:var(--ink)}#latest-result>strong{display:block;margin-top:12px}
@media(max-width:600px){.roll-panel,.computer-pause{align-items:stretch;flex-direction:column}.roll-panel button,.computer-pause button{width:100%}.dice-set{flex:1;justify-content:center}}

.table-buttons,.section-heading{display:flex;align-items:center;gap:10px}.section-heading{justify-content:space-between}.section-heading h2{margin-bottom:8px}.narration-panel{max-width:550px}.narration-panel summary{font-size:14px}.narration-panel label{margin-top:0}.card{position:relative}.both-sides{position:absolute;z-index:3;top:5px;right:5px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #ffffffc9;border-radius:999px;background:#183c3ae6;color:#fffaf0;text-decoration:none;font-size:17px;line-height:1;box-shadow:0 1px 4px #0005}.both-sides:hover{background:var(--gold)}
body.compact header{padding:8px 3vw 7px}body.compact header>a{font-size:28px}body.compact main{max-width:1800px;padding:10px 3vw 32px}body.compact .village-panel{margin-bottom:6px;padding-bottom:7px!important}body.compact .village-panel h2{margin-bottom:4px;font-size:22px}body.compact .village-panel .cards{grid-template-columns:repeat(auto-fit,minmax(64px,98px));gap:7px;margin:5px 0}body.compact .table-top{gap:10px}body.compact .table-top h1{margin:5px 0 7px;font-size:28px}body.compact .table-buttons button{padding:6px 10px;font-size:13px}body.compact .controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px;padding:6px 0 8px}body.compact .round-guidance{flex:1 0 100%;min-height:25px;font-size:14px}body.compact #turn-status{font-size:17px}body.compact #selection{min-height:0}body.compact #latest-result{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px}body.compact #latest-result>strong{margin:0}body.compact .roll-panel,body.compact .computer-pause{margin:0;padding:6px 10px;gap:9px}body.compact .dice-prompt{font-size:28px}body.compact .computer-pause p{min-width:180px;font-size:15px}body.compact .dice-board{gap:7px;margin:0}body.compact .dice-set{gap:4px;padding:4px 7px;font-size:13px}body.compact .die-face{font-size:25px}body.compact .narration-panel{order:8;margin-right:auto}body.compact .narration-panel summary{padding:5px 0}body.compact .actions{order:9;gap:7px;margin:0}body.compact .actions button{padding:7px 11px;font-size:14px}body.compact .player-panels{gap:10px;margin-top:9px}body.compact .player-panel{padding:9px}body.compact .player-panel .score{padding-bottom:7px;margin-bottom:8px}body.compact .score strong{font-size:18px}body.compact .client-count{font-size:13px}body.compact .deck-summary{gap:7px;margin-top:0}body.compact .deck-pile{flex-basis:56px;width:56px;height:73px}body.compact .deck-card{width:45px;height:61px}body.compact .deck-card::before{font-size:19px}body.compact .deck-card::after{inset:30%}body.compact .deck-card-2{left:3px;top:3px}body.compact .deck-card-3{left:6px;top:6px}body.compact .deck-pile.empty{height:64px}body.compact .deck-count{min-width:23px;padding:1px 5px;font-size:10px}body.compact .deck-label{max-width:82px;font-size:11px}body.compact .deck-draw{padding:6px 9px;font-size:12px}body.compact .player-zone h2{font-size:18px}body.compact .player-zone>p{margin-top:3px;font-size:12px;line-height:1.35}body.compact .player-zone .cards{grid-template-columns:repeat(auto-fill,minmax(72px,92px));gap:7px;margin-top:6px}body.compact .player-zone .card{max-width:92px}body.compact .both-sides{top:3px;right:3px;width:24px;height:24px;font-size:14px}body.compact .chronicle-panel{padding-top:5px!important}body.compact .chronicle-panel h2{margin:7px 0;font-size:20px}body.compact #chronicle{margin-top:0;max-height:260px;font-size:13px}body.compact #chronicle li{padding:5px 0}
@media(min-width:901px){body.compact .player-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}body.compact .player-panel .score{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:start}body.compact .player-panel .score strong,body.compact .player-panel .client-count{grid-column:1}body.compact .player-panel .deck-summary{grid-column:2;grid-row:1/3;margin:0}body.compact .player-zone+.player-zone{margin:0;padding:0 0 0 10px;border-top:0;border-left:1px solid #cfc5b0}}
@media(max-width:600px){.table-buttons{flex-wrap:wrap;justify-content:flex-end}.section-heading{align-items:start}.section-heading button{font-size:12px;padding:6px 9px}}

.room-visibility{display:flex;align-items:center;gap:.7rem;margin:1rem 0}.room-visibility input{width:auto;flex:none;margin:0}.room-visibility small{display:block;font-weight:normal}.public-rooms{margin-top:2rem;padding-top:1rem;border-top:1px solid #4b7771}.public-room-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1rem;margin-top:1rem}.public-room-card{border:1px solid #4b7771;border-radius:12px;padding:1rem;background:#153d3b}.public-room-card h3{margin-top:0}.public-room-card ul{padding-left:1.25rem}#waiting-controls{margin-bottom:1rem}

/* Center the remaining people in either layout, including partial rows. */
.village-panel h2{font-size:22px;text-align:center;font-style:italic}
body.compact .village-panel h2{font-size:18px}
.village-panel .cards,body.compact .village-panel .cards{display:flex;flex-wrap:wrap;justify-content:center}
.village-panel .card{flex:0 0 calc((100% - 126px)/8);width:calc((100% - 126px)/8);min-width:145px;max-width:230px}
body.compact .village-panel .card{flex:0 0 98px;width:98px;min-width:64px;max-width:98px}
@media(max-width:600px){.village-panel .card{flex-basis:calc((100% - 14px)/2);width:calc((100% - 14px)/2);min-width:0}body.compact .village-panel .card{flex-basis:98px;width:98px}}

/* Center the action area between the round heading and player panels. */
.controls,body.compact .controls{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.controls .round-guidance,body.compact .round-guidance{flex:0 1 auto;width:100%;justify-content:center}
.controls p{margin-left:auto;margin-right:auto}
.controls #latest-result,body.compact .controls #latest-result{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;width:100%}
.controls .dice-board,.controls .dice-set,.controls .dice-prompt{justify-content:center}
.controls .roll-panel,.controls .computer-pause{justify-content:center}
.controls .computer-pause p{flex:0 1 auto}
.controls .narration-panel,body.compact .controls .narration-panel{width:100%;margin-left:auto;margin-right:auto}
.controls .actions,body.compact .controls .actions{justify-content:center}

/* Spell resolution: announcement, dice with totals, then outcome. */
.controls #latest-result.spell-resolution,body.compact .controls #latest-result.spell-resolution{flex-direction:column;gap:8px}
.controls #latest-result.spell-resolution>strong{margin:0}
.controls #latest-result.spell-resolution .dice-board{margin:0}
.controls #latest-result.spell-resolution .spell-outcome{font-size:18px}

/* Center each guidance sentence independently; empty selection must take no space. */
.controls .round-guidance,body.compact .controls .round-guidance{flex-direction:column;align-items:center;gap:0}
.controls .round-guidance p{width:100%;max-width:none;margin:0;text-align:center}
.controls .round-guidance p:empty{display:none}

/* Keep long victory announcements centered across the full action area. */
.controls .round-guidance #turn-status,body.compact .controls .round-guidance #turn-status{display:block;align-self:stretch;flex:none;width:100%;max-width:none;margin:0;text-align:center}

/* Center the landing title, tagline and player name entry. */
.lobby-intro{text-align:center}
.lobby-intro p{margin-left:auto;margin-right:auto}
.lobby-intro #name{display:block;margin-left:auto;margin-right:auto;text-align:center}

.story-panel{max-width:850px;margin:36px auto;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.story-panel h2{text-align:center}
.story-panel p{margin:16px 0}

/* Papyrus photograph: B. Simpson / Cairocamels, public domain.
   https://commons.wikimedia.org/wiki/File:Blank_papyrus_paper.jpg */
header{
 background-color:#e4cf98;
 background-image:linear-gradient(rgba(245,240,228,.58),rgba(245,240,228,.58)),url('https://upload.wikimedia.org/wikipedia/commons/a/ae/Blank_papyrus_paper.jpg');
 background-position:center,center 45%;
 background-size:cover;
 border-bottom-color:#b59a63;
}
header>a,header nav{color:#183c3a;text-shadow:0 1px 2px #fff6da}

/* Approved Coptic manuscript-inspired artwork, kept behind the opaque game panels. */
body{
 background-image:url('/art/coptic-magic-background.webp');
 background-position:center 78px;
 background-size:100% auto;
 background-repeat:repeat-y;
}

/* Center the expand control on the card's top-right corner. */
.cards .card .both-sides,body.compact .cards .card .both-sides{top:0;right:0;transform:translate(50%,-50%)}

/* Consolidated play choices; the room directory opens only when requested. */
.play-options{margin:28px auto;max-width:1100px;padding:20px 24px;border:1px solid var(--line);border-top:2px solid var(--gold);background:#f5f0e4e8}
.play-options>h2{text-align:center;margin:0 0 16px}
.play-options .modes{margin:0;gap:24px}
.play-options .modes article{border-top:0;padding:0;min-width:0}
.play-options h3{font:24px/1.2 Georgia,serif;margin:0 0 10px}
.play-options p{font-size:14px;margin:8px 0}
.play-options .lobby-buttons{display:flex;flex-wrap:wrap;gap:8px}
.play-options .modes button{margin:0;padding:8px 12px}
.room-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.room-options details{min-width:0;border-top:1px solid var(--line)}
.room-options summary{font-size:14px;font-weight:600}
.room-options input{margin-bottom:10px}
#public-rooms-dialog{max-width:900px}
#public-rooms-dialog .public-rooms{border:0;padding:0;margin:0}
#public-rooms-dialog .public-rooms h2{margin:8px 0}
#public-rooms-dialog .public-room-card{background:#ebe9dd;color:var(--ink);border-color:var(--line)}
#room-browser-error{color:#8a321d}
@media(max-width:600px){.play-options{padding:16px}.play-options .modes{gap:24px}.room-options{grid-template-columns:1fr;gap:0}}

/* Six illustrated ivory die faces replace font-dependent dice glyphs. */
img.die-face{display:block;flex:none;width:48px;height:48px;object-fit:contain}
body.compact img.die-face{width:38px;height:38px}
.dice-prompt img{display:block;width:44px;height:44px}
body.compact .dice-prompt img{width:34px;height:34px}

/* Landing page: give the game title the former welcome-heading size. */
body:has(#lobby:not([hidden])) header>a,
body.compact:has(#lobby:not([hidden])) header>a{font-size:clamp(34px,5vw,60px)}
.lobby-intro h1{font-size:32px}
body.compact .lobby-intro h1{font-size:28px}
@media(max-width:600px){body .lobby-intro h1,body.compact .lobby-intro h1{font-size:27px}}