:root {
  --ink: #ffe9a0;
  --ink-soft: #f3dfb0;
  --dark: #2a1606;
  --gold: #ffd34a;
  --bg: #0d1408;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { font-family: "Baloo 2", "Trebuchet MS", system-ui, sans-serif; color: var(--ink); }
#stage { position: absolute; left: 50%; top: 50%; width: 640px; height: 480px; transform-origin: 50% 50%; }
#game { position: absolute; inset: 0; width: 640px; height: 480px; display: block; cursor: crosshair; }
#overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.35); }
#overlay.on { display: flex; }

.dlg { min-width: 300px; max-width: 470px; max-height: 450px; overflow: auto; padding: 6px 14px 10px;
  border: 26px solid transparent; border-image: url(classic/img/dialog.png) 48 fill round;
  text-align: center; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6)); }
.dlg h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.1; color: var(--gold);
  text-shadow: 0 2px 0 var(--dark), 2px 0 0 var(--dark), -2px 0 0 var(--dark), 0 -2px 0 var(--dark); }
.dlg p { margin: 6px 0; font-size: 15px; line-height: 1.3; color: var(--ink-soft); text-shadow: 0 1px 0 #000; }
.dlg .row { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.dlg .col { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 10px; }
.dlg button { font: 700 15px "Baloo 2", system-ui, sans-serif; color: var(--gold); min-width: 96px; min-height: 34px;
  padding: 2px 14px; border: 0; border-radius: 6px; cursor: pointer;
  background: url(classic/img/dbutton.png) center / 100% 100% no-repeat; text-shadow: 0 2px 0 #3a1c00; }
.dlg button:hover:not([disabled]), .dlg button:focus-visible { color: #fff; filter: brightness(1.12); outline: none; }
.dlg button.primary { color: #fff6c9; }
.dlg button[disabled] { opacity: 0.4; cursor: default; }
.dlg button.small { min-width: 30px; min-height: 28px; padding: 0 8px; font-size: 13px; }
.dlg input[type=text], .dlg input:not([type]) { font: 700 20px "Baloo 2", system-ui, sans-serif; width: 240px; padding: 4px 10px;
  border-radius: 8px; border: 3px solid #7a5420; background: #fff8e0; color: #3a1c00; text-align: center; }
.dlg input.shake { animation: shake 0.35s; border-color: #c0301a; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.dlg.players { min-width: 380px; }
.plist { list-style: none; margin: 4px 0; padding: 0; text-align: left; }
.plist li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; flex-wrap: wrap; }
.plist li.cur { background: rgba(255, 211, 74, 0.18); }
.plist .pick { min-width: 120px; }
.plist .meta { flex: 1; font-size: 12px; color: var(--ink-soft); }
.plist .confirm { display: none; width: 100%; font-size: 14px; }
.plist li.ask .confirm { display: block; }

.dlg.options { min-width: 360px; text-align: left; }
.dlg.options .opt { display: block; margin: 8px 0 2px; font-size: 16px; }
.dlg.options small { color: var(--ink-soft); font-weight: 500; }
.dlg.options input[type=range] { width: 100%; accent-color: #d4881c; }
.dlg.options input[type=checkbox] { width: 18px; height: 18px; vertical-align: -3px; accent-color: #d4881c; }

.dlg.result table, .dlg.scores table { margin: 6px auto; border-collapse: collapse; font-size: 15px; }
.dlg.result td { padding: 1px 10px; text-align: left; color: var(--ink-soft); }
.dlg.result td:last-child { text-align: right; color: #fff; font-weight: 700; }
.dlg .badge { color: #fff; font-weight: 800; font-size: 17px; text-shadow: 0 0 8px #ff9a20; }
.dlg .who { font-weight: 700; color: #fff; }
.dlg.scores { min-width: 400px; }
.dlg.scores .tabs { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.dlg.scores .tab { min-width: 80px; font-size: 13px; opacity: 0.75; }
.dlg.scores .tab.on { opacity: 1; color: #fff; }
.dlg.scores td { padding: 1px 8px; text-align: left; color: var(--ink-soft); }
.dlg.scores td:last-child { text-align: right; color: #fff; }

.dlg.fragment .fossil { position: relative; margin: 6px auto; }
.dlg.fragment .fossil img { position: absolute; }

.dlg.help { max-width: 480px; text-align: left; }
.dlg.help h2 { text-align: center; }
.dlg.help .pg { font-size: 13px; color: var(--ink-soft); }
.bicon { display: inline-block; width: 26px; height: 29px; vertical-align: -9px;
  background: url("classic/img/bonus(egg)sheet.png") 0 0 no-repeat; }
.dlg.help .bl { line-height: 1.9; }