@font-face {
  font-family:Mansalva;
  src:url('./assets/fonts/Mansalva-Regular.ttf') format('truetype');
  font-display:swap;
  font-style:normal;
  font-weight:400;
}
:root {
  color-scheme:light;
  --ink:#382215;
  --muted:#51321f;
  --line:#a36943;
  --clay:#c88d5d;
  --sheet:#dba36f;
  --paper:#e2b384;
  --dark:#35251c;
  --well:#29231c;
  --green:#c6e4a4;
  --hand:Mansalva,'Comic Sans MS',cursive;
  font:14px 'Trebuchet MS',Verdana,Geneva,sans-serif;
}
* { box-sizing:border-box; }
body {
  margin:0;
  color:var(--ink);
  background:#bf874a;
  min-height:100dvh;
}
.clay-world { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.menu-board {
  position:relative;
  isolation:isolate;
  width:calc(100% - 32px);
  max-width:1120px;
   margin:40px auto;
   border:2px solid #e4bd86;
   border-radius:42px 58px 39px 47px / 35px 39px 49px 41px;
  background:
     radial-gradient(ellipse at 4% 7%,#f9d7a7,transparent 45%),
     radial-gradient(ellipse at 94% 95%,#b98754,transparent 40%),
     linear-gradient(110deg,#d6ac79,#e8c69b 48%,#d3aa78);
   box-shadow:inset 3px 5px 6px #ffe4b9,inset -5px -8px 12px #855c36,5px 14px 0 #59452c40,14px 26px 36px #35291966;
}
.menu-board::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  opacity:.18;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23grain)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
button,input,select { font:inherit; }
button,a,input,select,summary,label { touch-action:manipulation; }
button {
  cursor:pointer;
  color:var(--ink);
  background:linear-gradient(150deg,#edc69a,#ce945f 65%,#b37447);
  border:1px solid #9e623b;
  border-radius:11px 14px 12px 10px / 14px 10px 15px 12px;
  min-height:44px;
  padding:12px 18px;
  text-align:left;
  font-weight:bold;
  box-shadow:inset 1px 2px 3px #ffe5bb,inset -2px -3px 5px #a76339,1px 4px 2px #75452980;
  transition:filter .15s,transform .15s;
}
button:hover:not(:disabled) { filter:brightness(1.07); }
button:active:not(:disabled) { transform:translateY(2px); }
button:disabled { cursor:not-allowed; color:#846244; background:#c69a72; box-shadow:inset 0 2px 4px #875c3d70; border-color:#b0835e; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.file-picker:focus-within {
  outline:3px solid #17543a;
  outline-offset:4px;
}
.masthead { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 30px 17px; }
.brand { color:var(--ink); text-decoration:none; display:block; }
h1,h2 { font:400 34px/1.12 var(--hand); letter-spacing:.3px; margin:0 0 12px; text-shadow:0 1px #ffdbac; }
.brand h1 { font-size:43px; margin:0 0 3px; }
.brand-note { display:block; font-size:12px; color:var(--muted); }
.menu-stamp { border:1px solid #a77149; box-shadow:inset 0 1px 3px #94624080,0 1px #eec79a; border-radius:9px 13px 10px 12px; padding:8px 12px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:1.3px; transform:rotate(2deg); }
p { line-height:1.6; }
.workbench { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(275px,1fr); align-items:start; gap:24px; width:calc(100% - 48px); margin:12px auto 24px; }
.panel,.credits { border:1px solid #bc8458; border-radius:19px 15px 23px 17px / 21px 25px 16px 23px; padding:25px; }
.panel { position:relative; background:linear-gradient(130deg,#f0d0a6,#dcb27e); box-shadow:inset 2px 3px 5px #fff0ca,inset -2px -4px 6px #a77847,2px 5px 4px #79532d40; }
.section-number,.eyebrow { font-size:10px; font-weight:bold; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:12px; }
.game-panel>h2 { padding-right:108px; }
.game-panel>.section-number { padding-right:108px; }
.game-panel>#library-status { padding-right:96px; min-height:42px; }
.panel>p { font-size:13px; color:var(--muted); margin:0 0 16px; }
.import-copy { font-size:13px; margin:0 0 12px; }
.source-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.file-picker {
  position:relative;
  min-width:0;
  border:5px solid #bb7d4c;
  border-radius:12px 16px 11px 14px / 16px 11px 15px 12px;
  background:var(--well);
  box-shadow:inset 0 4px 9px #0d0806,0 1px 1px #f3c899,1px 2px 2px #825133;
}
.file-picker label { display:block; cursor:pointer; padding:15px 10px; text-align:center; font:26px/1.2 var(--hand); color:var(--green); text-shadow:0 1px #000; }
.file-picker:hover { background:#342c21; }
.file-picker:has(input:disabled) { opacity:.65; }
.file-picker:has(input:disabled) label { cursor:not-allowed; }
.file-picker input[type=file] { position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.selection { min-height:18px; font-size:11px; margin:12px 0; overflow-wrap:anywhere; color:var(--muted); }
#prepare,#play { display:flex; align-items:center; gap:16px; width:100%; min-height:58px; padding:4px 0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--ink); font:32px/1.1 var(--hand); text-shadow:0 1px #f9d2a5; }
#prepare::before,#play::before { content:''; display:block; flex:0 0 68px; height:44px; border:1px solid #8b5130; border-radius:10px 15px 12px 10px / 13px 10px 15px 11px; background:linear-gradient(140deg,#efc396,#d28e58 70%,#bb7445); box-shadow:inset 1px 2px 3px #ffe4b9,inset -2px -3px 4px #a66039,2px 5px 3px #74452a99; transition:transform .15s,box-shadow .15s; }
#prepare:disabled,#play:disabled { color:#815a3c; }
#prepare:disabled::before,#play:disabled::before { opacity:.65; box-shadow:inset 1px 2px 5px #845332,inset -1px -1px 2px #eac299; }
#prepare:active:not(:disabled)::before,#play:active:not(:disabled)::before { transform:translateY(3px); box-shadow:inset 1px 2px 5px #9a623a,0 1px 1px #77462b; }
#play { font-size:40px; margin:8px 0; }
.fine { font-size:12px; line-height:1.65; }
.import-help { margin-top:12px; }
.import-help summary { font-weight:normal; }
.advanced { border-top:1px solid #ae754c; box-shadow:0 -1px #f0c99b; margin-top:20px; padding-top:12px; }
summary { cursor:pointer; padding:7px 0; font-size:13px; font-weight:bold; }
.remove-control { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); margin-top:20px; padding-top:14px; }
.text-actions { display:flex; flex-wrap:wrap; gap:12px 20px; }
.text-button { border:0; border-bottom:1px solid #7c4a2d; border-radius:0; background:none; box-shadow:none; padding:5px 0; min-height:36px; font-size:12px; }
.text-button:disabled { background:none; border-color:#b68b65; box-shadow:none; }
.danger { color:#6f201b; }
.storage-row { display:flex; justify-content:space-between; gap:16px; padding:15px 0; border-top:1px solid var(--line); font-size:12px; }
dl { display:grid; grid-template-columns:auto 1fr; gap:9px; font-size:12px; margin:18px 0; }
dt { color:var(--muted); }
dd { margin:0; text-align:right; }
progress { width:100%; height:15px; margin-top:8px; accent-color:#64874b; border-radius:9px; overflow:hidden; }
progress::-webkit-progress-bar { background:var(--well); box-shadow:inset 0 2px 4px #000; border-radius:9px; }
progress::-webkit-progress-value { background:linear-gradient(#bbd98d,#6f9554); border-radius:9px; }
progress::-moz-progress-bar { background:#8cae69; }
#progress-wrap { margin-top:16px; font-size:12px; }
.message { padding:16px; border:1px solid #9c6038; background:#f1c7989c; border-radius:10px 14px 9px 12px; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; }
.game-panel .message { margin:18px 0 0; }
.message.error { color:#72251d; border-color:#9a3e29; }
.credits { background:#c49c6b45; border-color:#b68b5d; box-shadow:inset 1px 2px 5px #8e693f55,0 2px 1px #f7dab1; }
.credits h2 { font-size:31px; margin-bottom:18px; }
.credits a { color:inherit; text-underline-offset:4px; }
.engine-credit { font-size:13px; margin:0 0 10px; }
.engine-authors { list-style:none; margin:0 0 15px; padding:0; }
.engine-authors li { border-bottom:1px solid #b07b51; }
.engine-authors a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; text-decoration:none; }
.engine-authors strong { display:block; font-size:15px; }
.engine-authors code { display:block; font:11px/1.6 monospace; color:var(--muted); margin-top:3px; }
.engine-authors a:hover strong { text-decoration:underline; }
.credit-arrow { font-size:19px; color:#72492f; }
.engine-context { font-size:12px; line-height:1.7; }
.source-link { display:inline-block; font-size:13px; font-weight:bold; margin:6px 0 12px; }
.browser-credit { border-top:1px solid #af7950; padding-top:9px; margin-top:4px; }
.browser-credit summary { font-size:12px; font-weight:normal; }
.browser-credit p,.credits-note { font-size:11px; color:var(--muted); line-height:1.7; }
.credits-note { margin:14px 0 0; }
footer { margin:0 25px; padding:15px 0 20px; border-top:1px solid #aa744d; font-size:10px; color:var(--muted); text-align:center; }
.clay-bud { position:absolute; top:9px; right:12px; width:130px; height:126px; pointer-events:none; overflow:visible; }
.bud-jaw { transition:transform .45s ease; transform-origin:90px 123px; }
.jaw-top { transform:rotate(-27deg); }
.jaw-bottom { transform:rotate(27deg); }
.game-panel[data-state="preparing"] .jaw-top { animation:chew-top .6s ease-in-out infinite alternate; }
.game-panel[data-state="preparing"] .jaw-bottom { animation:chew-bottom .6s ease-in-out infinite alternate; }
.game-panel[data-state="ready"] .jaw-top,.game-panel[data-state="ready"] .jaw-bottom { transform:rotate(0); }
@keyframes chew-top { from { transform:rotate(-29deg); } to { transform:rotate(-3deg); } }
@keyframes chew-bottom { from { transform:rotate(29deg); } to { transform:rotate(3deg); } }
dialog { width:calc(100% - 32px); max-width:500px; background:linear-gradient(125deg,#e7b582,#cf945f); color:var(--ink); padding:26px; border:2px solid #925834; border-radius:17px 24px 16px 21px; box-shadow:inset 1px 3px 5px #ffe2b4,inset -2px -4px 7px #a6653f,0 12px 50px #0008; }
dialog::backdrop { background:#1d130ec4; }
dialog form { display:flex; justify-content:flex-end; gap:12px; margin-top:20px; }
.secondary { color:var(--ink); }
dialog .danger { color:#ffe7cb; background:linear-gradient(#a45e42,#7e3929); box-shadow:inset 0 1px 2px #e3a978,0 3px 2px #673b28; }
.save-controls { border-top:1px solid var(--line); margin-top:18px; padding-top:6px; }
.save-controls h3,dialog h3 { font-size:15px; margin:18px 0 10px; }
.save-controls .file-picker label { font:14px/1.5 'Trebuchet MS',Verdana,sans-serif; padding:12px; }
.save-list { list-style:none; padding:0; margin:12px 0 18px; max-height:220px; overflow:auto; }
.save-list li { padding:10px 0; border-bottom:1px solid #ae754b; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.save-list strong,.save-list span { display:block; }
.save-list span { color:var(--muted); }
.save-actions,.save-dialog-actions { display:flex; flex-wrap:wrap; gap:12px; }
.save-actions button,.save-dialog-actions button { font-size:12px; padding:12px 14px; }
.backup-label { display:block; font-size:12px; font-weight:bold; margin:24px 0 10px; }
#save-backups { width:100%; min-width:0; padding:11px; border:3px solid #ac744c; border-radius:9px; background:var(--well); color:var(--green); font-size:12px; }
#save-status.error,#save-dialog-status.error { color:#72251d; }
.overwrite-confirmation { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid #8e472c; border-radius:7px; font-size:12px; line-height:1.7; }
.overwrite-confirmation input { flex-shrink:0; margin-top:5px; }
.save-dialog-actions { justify-content:flex-end; margin-top:20px; }
#save-import-dialog { max-height:calc(100dvh - 32px); overflow:auto; }
body.playing { overflow:hidden; overscroll-behavior:none; }
#game { position:fixed; inset:0; z-index:100; height:100dvh; overflow:hidden; background:#000; color:#f1dec2; }
#fullscreen { position:absolute; z-index:2; display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; background:#181818b3; color:#f1dec2; border:1px solid #f1dec23d; border-radius:50%; box-shadow:none; }
#fullscreen:hover { background:#35312ad9; transform:none; }
#fullscreen:focus-visible { outline:3px solid #f1dec2; outline-offset:2px; }
#player-host { position:relative; width:100%; height:100dvh; }
#playframe { display:block; width:100%; height:100%; border:0; background:#000; }
#game-loading { position:absolute; inset:0; display:grid; place-items:center; background:#1c150ff2; padding:24px; pointer-events:none; }
.loading-card { width:min(420px,100%); padding:30px; background:var(--sheet); color:var(--ink); border:2px solid #a56a42; border-radius:18px 24px 16px 21px; box-shadow:inset 0 2px 4px #f7d0a3,inset 0 -3px 6px #ab7049; }
.loading-card p { font-size:13px; }
#cancel-loading { pointer-events:auto; margin-top:18px; }
[hidden] { display:none!important; }
@media(max-width:800px) {
  .menu-board { width:calc(100% - 20px); margin:10px auto; }
  .masthead { padding:16px 20px; }
  .brand h1 { font-size:34px; }
  .menu-stamp { font-size:8px; letter-spacing:.8px; padding:7px; }
  .workbench { grid-template-columns:1fr; width:calc(100% - 30px); margin:12px auto 18px; gap:18px; }
  .panel,.credits { padding:20px; }
  footer { margin:0 20px; }
}
@media(max-width:540px) {
  .menu-board { width:calc(100% - 16px); margin:8px auto; border-radius:19px 23px 20px 16px; }
  .masthead { padding:15px 17px 12px; gap:8px; }
  .brand h1 { font-size:29px; }
  .brand-note { font-size:10px; }
  .menu-stamp { display:none; }
  .workbench { width:calc(100% - 24px); margin:10px auto 16px; gap:16px; }
  .panel,.credits { padding:17px; }
  h2 { font-size:30px; margin-bottom:9px; }
  .section-number { font-size:9px; margin-bottom:9px; }
  .panel>p { font-size:12px; margin-bottom:12px; }
  .import-copy { font-size:12px; margin-bottom:10px; }
  .source-choices { gap:12px; }
  .file-picker { border-width:4px; }
  .file-picker label { font-size:24px; padding:13px 5px; }
  .selection { margin:10px 0; }
  #prepare,#play { font-size:29px; gap:13px; min-height:54px; }
  #prepare::before,#play::before { flex-basis:55px; height:39px; }
  #play { font-size:36px; }
  .clay-bud { width:94px; height:94px; right:5px; top:10px; }
  .game-panel>h2 { padding-right:76px; }
  .game-panel>.section-number { padding-right:65px; }
  .game-panel>#library-status { padding-right:68px; min-height:38px; }
  .credits h2 { font-size:29px; }
  .advanced { margin-top:17px; padding-top:10px; }
  footer { padding:13px 0 17px; margin:0 18px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
}