:root{font-family:Georgia,serif;color:#f9e6bf;background:#160f0a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#44301e,#130d09 80%);min-height:100vh}.shell{max-width:1200px;margin:auto;padding:22px}header{text-align:center;border-bottom:3px double #ad8951;padding:15px}header img{width:110px;height:110px;object-fit:contain}h1{font-size:clamp(2.5rem,7vw,5rem);color:#eec978;letter-spacing:.09em;margin:0;text-shadow:0 4px 0 #281407}h2{color:#efcb83;margin-top:0}p{line-height:1.6}.muted,small{color:#c3ad8b}.panel{background:linear-gradient(140deg,#38281b,#251910);border:2px solid #977143;box-shadow:inset 0 0 0 3px #24170e,0 10px 35px #0008;border-radius:12px;padding:22px;margin:18px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.pill{display:inline-block;padding:8px 12px;border:1px solid #b68d4f;border-radius:40px}input,select{display:block;margin:8px 0 15px;background:#110c08;color:#ffe6a7;border:1px solid #a8834d;padding:12px;width:100%;font:inherit;border-radius:6px}button,.button{border:1px solid #d1a763;border-radius:7px;background:linear-gradient(#d6ae63,#916322);color:#1c1207;padding:12px 18px;cursor:pointer;font-weight:bold;font-size:1rem}button:disabled{opacity:.4;cursor:not-allowed}button.secondary{background:#3a2a1a;color:#f8dfa8}button.selected{outline:3px solid #dfff81}.notice{background:#233d27;color:#d6ffd1;border:1px solid #83bb70;padding:12px;border-radius:8px;margin:12px 0}.error{background:#4b2020;color:#ffe1d9;border:1px solid #d17b7b;padding:12px;border-radius:8px;margin:12px 0}.code{font-size:2.4rem;letter-spacing:.2em;color:#a5f2a1}.card{display:flex;flex-direction:column;justify-content:space-between;width:84px;height:125px;flex:none;border-radius:10px;border:4px solid #e5c88a;box-shadow:0 4px 12px #0008;color:white;padding:8px;background:#77282a;text-shadow:0 2px 2px #0007}.card strong{font-size:2.4rem;text-align:center}.card.red{background:linear-gradient(140deg,#a72c38,#58141c)}.card.blue{background:linear-gradient(140deg,#267ca9,#11374f)}.card.green{background:linear-gradient(140deg,#328653,#163f28)}.card.yellow{background:linear-gradient(140deg,#c4942a,#745118)}.card.split{background:linear-gradient(125deg,#9a2a36 48%,#245f91 52%)}.card.special{background:linear-gradient(130deg,#47396e,#181328);font-size:.75rem;text-align:center}.hand{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.hand button{padding:0;border:0;background:none}.hand button.selected .card{outline:4px solid #91e5a1}.opponent{border:1px solid #977143;padding:14px;border-radius:8px;background:#1b140e}.onair{background:#a72b2b;color:white;font-weight:bold;letter-spacing:.15em;padding:8px 14px;border-radius:5px}.example{display:flex;gap:5px;flex-wrap:wrap}.example .card{width:41px;height:59px;padding:3px;border-width:2px;border-radius:5px}.example .card strong{font-size:1.25rem}.example .card small{font-size:.45rem}.table{display:flex;align-items:center;gap:30px;flex-wrap:wrap}.table .card{width:105px;height:155px}.table .card strong{font-size:3.2rem}a{color:#e6c987}footer{text-align:center;padding:25px;color:#ac9778}@media(max-width:550px){.shell{padding:8px}.panel{padding:14px}.card{width:69px;height:106px}.card strong{font-size:1.9rem}}

/* v1.1: illustrated studio, playing table and matching card art */
body{background:#130b06 url("assets/radio-studio.webp") center top / cover fixed no-repeat}
body::before{content:"";position:fixed;inset:0;background:#090b08a6;pointer-events:none;z-index:-1}
.shell{max-width:1320px;background:linear-gradient(180deg,#1b120de8,#12150ee9);border:3px solid #a37437;border-radius:22px;box-shadow:0 12px 55px #000d;margin:16px auto;padding:clamp(12px,2vw,26px)}
header{background:linear-gradient(#1b1008e8,#100e0ac9);border:2px solid #9f733c;border-radius:14px}
header h1{color:#ffce67;text-shadow:0 4px 1px #5b190b,0 0 16px #e8591680}
.panel{background:linear-gradient(135deg,#332016ed,#18130eea);backdrop-filter:blur(3px)}
.table{justify-content:center;min-height:265px;padding:28px 20px;background:radial-gradient(ellipse at 50% 40%,#14623d,#0a432b 65%,#062b1d)!important;border:12px ridge #9a602e;border-radius:45% / 23%;box-shadow:inset 0 0 45px #001d13,0 8px 25px #000b}
.table>div{text-align:center}
.card.illustrated-special{background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;background-color:#e6d3ad!important;border:2px solid #e8d3a6!important;padding:0!important;box-shadow:0 4px 10px #000a!important}
.card.illustrated-special.draw2{background-image:url("assets/double-trouble.webp")!important}
.card.illustrated-special.reverse{background-image:url("assets/change-direction.webp")!important}
.card.illustrated-special.switch{background-image:url("assets/switch-a-roonie.webp")!important}
.card.illustrated-back{background:#071b34 url("assets/card-back.webp") center / 100% 100% no-repeat!important;border:2px solid #dfb66e!important}
.card.numbered{border-color:#e8d3a6;box-shadow:inset 0 0 0 2px #a47b45,0 4px 10px #0009}
.card.numbered strong{background:#0002;border-radius:50%;line-height:1.5}
.opponent{background:linear-gradient(#32251a,#141712);border:2px solid #9a7038;text-align:center}
.opponent strong{display:block}
.portrait{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 10px;border:5px ridge #c99849;border-radius:10px;background:linear-gradient(135deg,#765335,#271a11);background-position:center;background-size:cover;font-size:32px;box-shadow:0 3px 12px #000a}
.photo-picker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #bb9552;border-radius:8px;background:#292014;color:#ffe3a6;font-size:13px}
.photo-picker input{max-width:220px;width:auto;margin:0;padding:5px;font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hand{padding:15px;background:radial-gradient(#165538,#0b3324);border:7px ridge #80502a;border-radius:18px}
.hand button:hover:not(:disabled) .card{transform:translateY(-5px)}
@media(max-width:700px){.table{border-radius:24px;padding:15px;border-width:7px}.shell{margin:4px}.photo-picker{flex-wrap:wrap}.hand{padding:7px;gap:5px}}
