/* King's Imperium surface theme — single source of translucent surface color. */
body { background:linear-gradient(180deg,rgba(3,11,22,.14),rgba(3,11,22,.24)), url("/assets/marble.webp") center/cover fixed no-repeat,#071322; }
.panel { background:rgba(9,30,51,.08);border:1px solid rgba(190,157,94,.76);box-shadow:inset 0 0 0 1px rgba(242,217,161,.14),0 12px 36px rgba(0,0,0,.12);backdrop-filter:none;-webkit-backdrop-filter:none; }
.table { background:rgba(8,28,49,.07);box-shadow:inset 0 0 0 1px rgba(230,200,137,.10),inset 0 0 30px rgba(0,0,0,.10); }
.table::before { border-color:rgba(225,198,130,.35); }
.opponent { background:rgba(10,33,53,.12);border-color:rgba(208,173,113,.52);box-shadow:inset 0 1px 0 rgba(248,226,178,.07); }
.opponent.active { background:rgba(70,73,67,.20);border-color:#f5d789; }
.suit-badge { background:rgba(8,25,42,.16); }
#identity,#name-label,.fields label { background:rgba(7,24,43,.11);border-color:rgba(203,177,124,.34); }
input,select { background:rgba(5,20,35,.20); }
#setup .setup-controls>button:not(.primary),button:not(.primary) { background:rgba(14,34,54,.22); }
#records { background:rgba(8,30,51,.075); }
#notice { color:#fff0cf;text-shadow:0 1px 8px rgba(0,0,0,.8); }
.opponent strong { text-shadow:0 1px 6px rgba(0,0,0,.8); }
/* Keep the official small wordmark in the header, not repeated behind gameplay. */

.title-wordmark{display:block;width:min(330px,70vw);height:auto;margin:6px auto 0;filter:drop-shadow(0 3px 9px rgba(0,0,0,.30))}
.title h1{margin:0 0 3px;text-shadow:0 2px 12px rgba(0,0,0,.50)}
body::before{content:none}
header{position:relative;padding-top:15px}
header::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(420px,90%);height:14px;background:url('/assets/royal-divider-top.png') center/contain no-repeat;pointer-events:none}
.panel{overflow:hidden}
.setup .intro-cards{filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
#notice{font-size:14px}
@media(max-width:720px){
 .shell{padding:5px 8px 20px}
 header{gap:5px;padding-top:12px;padding-bottom:8px}
 .title{order:-1;width:100%;min-width:0}
 .title-wordmark{width:177px;max-width:54vw;margin:4px auto 0}
 .title .eyebrow{font-size:9px;letter-spacing:.14em}
 .title h1{font-size:27px;line-height:1.1}
 .subtitle{font-size:10px;line-height:1.25}
 header>a{min-height:38px;margin-right:auto;font-size:11px}
 header button{min-height:38px;font-size:12px;padding:6px 10px}
 #setup{padding:12px 13px 16px;gap:12px;grid-template-columns:1fr}
 .intro-cards{height:148px;margin:3px 0 9px}
 .intro-cards img{width:30%;max-width:98px}
 .intro-cards img:first-child{transform:rotate(-14deg) translateX(16px)}
 .intro-cards img:nth-child(2){transform:translateY(-5px)}
 .intro-cards img:last-child{transform:rotate(14deg) translateX(-16px)}
 .intro .eyebrow{font-size:9px;line-height:1.3;margin-bottom:4px}
 .intro h2{font-size:27px;line-height:1.15;margin-bottom:7px}
 .intro>p:not(.eyebrow){font:12px/1.35 system-ui;margin-bottom:6px}
 .setup-controls{gap:9px}
 #name-label,.fields label{padding:7px 9px;font-size:12px}
 .fields{grid-template-columns:1fr 1.16fr;gap:8px}
 input,select{min-height:42px}
 .setup-controls>button{min-height:43px}
 .table{padding:12px 8px;min-height:270px}
 .opponents{margin-bottom:9px;gap:5px}
 .opponent{min-width:86px;flex-basis:86px;padding:7px 8px;font-size:11px}
 .opponent strong{font-size:12px}
 .table-heading{gap:5px;font-size:11px}
 .suit-badge{padding:5px 9px}
 .piles{gap:clamp(22px,8vw,45px);margin:13px 0 10px}
 .pile-card{width:clamp(85px,24vw,112px)}
 .pile span{font-size:11px}
 #notice{font-size:12px;line-height:1.3;min-height:30px}
 .hand-panel{margin-top:10px;padding:10px 5px}
 .hand-heading{padding:0 6px;gap:5px}
 .hand-heading h2{font-size:18px;margin:0}
 #hand-hint{width:100%;order:5;font-size:10px}
 .hand-heading #unum{min-height:40px;padding:8px 11px}
 .hand{gap:7px;padding:11px 7px 8px;min-height:155px}
 .hand button{flex-basis:87px}
 .play-controls{gap:5px;padding-top:10px}
 .play-controls button{min-width:0;flex:1 1 26%;padding:9px 7px;min-height:43px;font-size:12px}
}

/* Restore the mobile Quick Play control present in the v0.4.5 standalone. */
.quick-play,#quick-play-hint{display:none}
@media(max-width:720px){.quick-play{display:block;width:100%;min-height:48px;font-size:18px;letter-spacing:.015em;margin:11px auto 0}.quick-play span{display:block;font:10px/1.4 system-ui;color:#43341c;letter-spacing:0}#quick-play-hint{display:block;font-size:10px;line-height:1.3;color:#dbcbad;text-align:center;margin:5px 0 2px}}