:root{--ink:#f2eee5;--muted:#aaa99f;--line:#39483f;--panel:#121a17;--deep:#070b09;--gold:#e0a84d;--red:#a12d24;--felt:#123e2e}
body{background:
radial-gradient(circle at 12% 7%,rgba(151,44,34,.18),transparent 25rem),
radial-gradient(circle at 88% 4%,rgba(30,111,76,.16),transparent 28rem),
linear-gradient(150deg,#070b09,#0b120e 48%,#070907);color:var(--ink)}
.topbar{height:82px;background:linear-gradient(90deg,#090e0b 0%,#15130e 48%,#090e0b 100%);border-bottom:1px solid #705631;box-shadow:0 8px 28px #0008}
.brand{gap:15px}.brand-mark{width:60px;height:60px;clip-path:none;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#4f3420,#0d120e);border:2px solid #d39b43;box-shadow:0 0 0 3px #1b211a,0 0 22px #d24d2e55;flex:0 0 auto}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}.brand small{color:#e3a94c;margin:0 0 2px}.brand strong{font-size:1.12rem;letter-spacing:.015em;text-shadow:0 2px 12px #000}
.panel{background:linear-gradient(145deg,rgba(23,34,29,.98),rgba(13,19,16,.98));border-color:#34483e;box-shadow:0 12px 32px #0003}
.library,.settings{position:relative;overflow:hidden}.library:before,.settings:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#a12d24,#e0a84d,#1e6a4d)}
.button{border-color:#4c5c51}.gold{background:linear-gradient(#e7b65e,#c8862d);border-color:#efc273}.red{background:linear-gradient(#ad392e,#7e211c);border-color:#c64a3f;box-shadow:0 5px 16px #6c17173d}.ghost{background:#0c120f99}
textarea,input,select{background:#090e0c;border-color:#3a4d42}.deck-item{background:linear-gradient(135deg,#19241e,#101612);border-color:#35483d}.deck-item.active{border-color:#dfa547;box-shadow:inset 3px 0 #a12d24}
.deck-canvas{border-color:#7a6540;box-shadow:inset 0 0 42px #0006,0 8px 25px #0005;background-image:radial-gradient(#ffffff0f 1px,transparent 1px),radial-gradient(circle at 50% 0,#ffffff0c,transparent 40%);background-size:6px 6px,100% 100%}
.section-divider{border-bottom-color:#d6a24e;color:#f2bd5a;text-shadow:0 2px 7px #000}
.deck-caption{position:absolute;left:16px;bottom:14px;min-width:210px;max-width:45%;display:grid;gap:1px;padding:9px 14px 10px;border-left:3px solid #a12d24;border-top:1px solid #dcb05d;border-right:1px solid #6f5936;border-bottom:1px solid #6f5936;background:linear-gradient(135deg,rgba(8,12,10,.94),rgba(28,23,16,.91));border-radius:4px 10px 10px 4px;box-shadow:0 8px 24px #0009;pointer-events:none}
.deck-caption small{font:800 .57rem/1.1 Inter,Segoe UI,sans-serif;letter-spacing:.16em;color:#e0a84d}.deck-caption strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 1.08rem/1.25 Georgia,serif;color:#f4ead8}.deck-caption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 .7rem/1.25 Inter,Segoe UI,sans-serif;letter-spacing:.04em;color:#bfc8c1}
.watermark{right:16px;bottom:14px;align-items:center;gap:10px;padding:7px 11px 7px 7px;border:1px solid #ddb05c;background:linear-gradient(135deg,rgba(8,12,10,.92),rgba(32,24,15,.9));border-radius:10px;box-shadow:0 8px 24px #0009,inset 0 0 20px #df9a2712;filter:none}
.watermark img{width:54px;height:68px;object-fit:contain}.watermark div{display:grid;gap:1px}.watermark small{font:800 .58rem/1.1 Inter,Segoe UI,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e4aa4a}.watermark span{font-family:Georgia,serif;font-size:1.15rem;color:#f4e3bf;text-shadow:0 2px 4px #000}
.status-card{background:#0e1813;border-color:#31513f}.status-dot{background:#59b77a;box-shadow:0 0 0 4px #56a66e1d,0 0 14px #59b77a66}
dialog::backdrop{background:#020403d9}.dialog-card,.save-card{background:linear-gradient(145deg,#19251f,#0d1310);border-color:#7c643d}
@media(max-width:760px){.topbar{height:74px}.brand-mark{width:50px;height:50px}.brand small{font-size:.56rem}.brand strong{font-size:.82rem}.deck-caption{left:7px;bottom:7px;min-width:140px;max-width:48%;padding:6px 9px}.deck-caption strong{font-size:.82rem}.deck-caption span{font-size:.58rem}.watermark{right:7px;bottom:7px;padding:5px 8px 5px 5px}.watermark img{width:42px;height:52px}.watermark small{font-size:.48rem}.watermark span{font-size:.9rem}}
/* The deck workshop shares the mine's stone, lantern and crystal palette. */
body{background:radial-gradient(ellipse at 85% 5%,#23605b44,transparent 30%),radial-gradient(ellipse at 0 55%,#60391d55,transparent 35%),repeating-linear-gradient(126deg,#131a16 0,#131a16 2px,#0d130f 2px,#0d130f 6px)}
.topbar{background:linear-gradient(90deg,#131b18,#2a2119 53%,#111c19);border-bottom:2px solid #a66f36;box-shadow:0 8px 27px #0009,inset 0 -1px #5ab7a055}
.panel{background:linear-gradient(145deg,#28322d,#161e1a 52%,#101713);border-color:#786447;box-shadow:inset 0 1px #d6ba7c44,0 12px 32px #0006}
.library:before,.settings:before{background:linear-gradient(90deg,#b36b39,#e0b46b,#60bbae)}
.deck-item{background:linear-gradient(135deg,#26352e,#151e19);border-color:#556c5e}.deck-item.active{border-color:#dfaf68;box-shadow:inset 3px 0 #5cbaaa}
textarea,input,select{border-color:#766349;background:#111a16}
.tool-builder .editor-head,.tool-picture .editor-head{min-height:100px;margin:-12px -12px 12px;padding:16px 18px;align-items:center;border-bottom:1px solid #a0784b;border-radius:8px 8px 0 0;box-shadow:inset 0 -20px 24px #0a100d55}
.tool-picture .editor-head{background:linear-gradient(90deg,#121a17ef,#121a17bd 58%,#121a1733),url('/mine-deck-picture.webp') 70% center/cover no-repeat}
.tool-builder .editor-head{background:linear-gradient(90deg,#121a17ef,#121a17bd 58%,#121a1733),url('/mine-deck-builder.webp') 70% center/cover no-repeat}
.tool-picture .editor-head h1,.tool-builder .editor-head h1{text-shadow:0 2px 9px #060907}
.game-room-screen:has(.game-room-setup:not([hidden])) .game-room-head{min-height:130px;padding:18px;margin-bottom:16px;align-items:center;border:1px solid #a57840;border-radius:10px;background:linear-gradient(90deg,#101714ef,#101714ca 51%,#10171428),url('/mine-game-arena.webp') 70% center/cover no-repeat;box-shadow:inset 0 0 0 3px #0c120f66,0 10px 28px #0008}
.game-room-head h1,.game-room-head p{text-shadow:0 2px 9px #060907}
/* Carry the arena into the otherwise empty space beside the join form. */
@media(min-width:1100px){
  .game-room-screen:has(.game-room-setup:not([hidden])){position:relative;isolation:isolate}
  .game-room-screen:has(.game-room-setup:not([hidden]))::before{content:"";position:absolute;z-index:-1;top:155px;right:20px;bottom:0;width:max(0px,calc(100% - 890px));pointer-events:none;background:linear-gradient(90deg,#0e1511 0%,#0e151100 35%),linear-gradient(0deg,#0e1511 0%,#0e151100 50%),linear-gradient(#0e151155,#0e151155),url('/mine-game-arena.webp') 78% center/cover no-repeat;opacity:.78;mask-image:linear-gradient(180deg,transparent,#000 11%,#000 70%,transparent)}
}
@media(max-width:760px){.game-room-screen:has(.game-room-setup:not([hidden])) .game-room-head{min-height:0;background-position:60% center}.tool-picture .editor-head,.tool-builder .editor-head{margin:-10px -10px 10px}}