:root{font-family:system-ui,Roboto,Arial,sans-serif;color-scheme:dark;background:#091a13;color:#fff;line-height:1.32;font-size:17px}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#091a13}main{max-width:960px;margin:auto;padding:18px 20px 72px}
label,h2{display:block;font-size:1rem;font-weight:800;margin:20px 0 10px}h2{margin:20px 0 12px}
input,select{background:transparent;border:none;border-bottom:2px solid #8ce36d;border-radius:0;width:100%;color:#fff;font-size:1.15rem;padding:12px 3px;min-height:50px;outline-offset:4px}
input::placeholder{color:#abb6ad}select{background:#092016}select option{background:#14291e;color:#fff}
button{cursor:pointer;touch-action:manipulation;border:0;border-radius:3px;font-size:.94rem;font-weight:800;line-height:1.1;min-height:44px;white-space:normal;padding:9px 5px;background:#fff;color:#101710}
button[aria-pressed="true"]{background:#287d49;color:#fff}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b5ff66;outline-offset:3px}
button:disabled{opacity:.5;cursor:default}.button-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:9px 0 20px}
.primary{display:block;width:100%;min-height:51px;margin:14px 0 10px;font-size:1.12rem;background:#f6f6f6}
.secondary{background:#244635;color:#fff}.quiet{background:transparent;color:#c0cdc4;text-decoration:underline;font-size:.8rem;min-height:36px}
.status-row{display:flex;align-items:center;gap:10px;margin:10px 0}.status-row p{flex:1;margin:8px 0;font-size:1rem;overflow-wrap:anywhere}
#cancelButton{flex:0 0 auto}.panel{margin-top:22px;border:1px solid #527a5d;padding:14px}.panel strong{display:block;overflow-wrap:anywhere}.panel span{display:block;margin:6px 0}
#login{max-width:550px;margin:10vh auto;padding:8px}/* A real fixed, scrollable full-screen layer. Avoid native dialog.showModal()
   because it can be height-clipped inside the BrakeMonster Android WebView. */
body.choicesOpen{overflow:hidden}
.choicesOverlay[hidden]{display:none!important}
.choicesOverlay{
  position:fixed!important;inset:0!important;z-index:2147483647;
  display:flex;align-items:stretch;justify-content:center;
  width:100vw;height:100vh;height:100dvh;
  background:rgba(0,0,0,.93);
  padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  overflow:hidden;isolation:isolate;
}
.choicesPanel{
  flex:1;min-width:0;min-height:0;max-width:900px;
  display:flex;flex-direction:column;
  color:#fff;background:#07170f;border:2px solid #83df6c;
  border-radius:12px;overflow:hidden;
}
.choicesHeader{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 14px;background:#122e20;
  border-bottom:2px solid #609d63;
}
.choicesHeader h2{margin:0;color:#fff;font-size:clamp(1.05rem,3.4vw,1.5rem);line-height:1.2}
#closeDialog{min-width:110px;min-height:54px;padding:12px 16px;font-size:1.05rem;background:#d6a234;color:#06130a}
.choiceList{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:10px;
  padding:12px 14px max(22px,env(safe-area-inset-bottom));
}
#choiceList button{
  flex:0 0 auto;width:100%;min-height:76px;
  background:#214b35;color:#fff;border:2px solid #488a60;
  border-radius:10px;text-align:left;padding:14px 16px;
  overflow-wrap:anywhere;font-size:clamp(1.02rem,3vw,1.25rem);
  line-height:1.28;
}
#choiceList button strong{display:block}
#choiceList button small{display:block;color:#d8eadb;margin-top:6px;font-size:.95rem;font-weight:500}
#choiceList button:active{background:#31784a}

@media(max-width:500px){main{padding:12px 10px 56px}.button-grid{gap:5px}button{font-size:.76rem;padding:6px 3px}input,select{font-size:1rem}#choiceList button{font-size:.95rem}}

/* Prehistoric background and stone buttons */
body{background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.5)),url('/bm-background.jpg') center center / cover fixed no-repeat!important}
main{background:rgba(0,0,0,.12);min-height:100vh}
button:not(.quiet){background:linear-gradient(160deg,rgba(145,145,133,.53),rgba(49,53,47,.59))!important;color:#fff!important;border:2px solid rgba(205,205,188,.7)!important;border-radius:11px!important;box-shadow:inset 0 2px 2px #ffffff35,0 3px 7px #0008!important;text-shadow:0 1px 2px #000}
/* Filter buttons: fully transparent when idle; existing stone finish when selected. */
#modes button,#genres button,#decades button{background:transparent!important;background-color:transparent!important;box-shadow:none!important;border:2px solid rgba(205,205,188,.72)!important;color:#fff!important;text-shadow:0 2px 3px #000!important}
#modes button[aria-pressed="true"],#genres button[aria-pressed="true"],#decades button[aria-pressed="true"]{background:linear-gradient(160deg,rgba(145,145,133,.53),rgba(49,53,47,.59))!important;box-shadow:inset 0 2px 2px #ffffff35,0 3px 7px #0008!important;border-color:rgba(205,205,188,.7)!important}
input,select{background:rgba(0,0,0,.50)!important;color:#fff!important}
label,h2{text-shadow:0 2px 4px black}
#choiceList button{background:rgba(75,80,70,.8)!important}


/* One hand-hewn edge, never double borders or inset lines. */
#modes button,#genres button,#decades button,.primary{
 border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important;
 background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%2280%22%20viewBox%3D%220%200%20320%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M13%204%20L38%203%20L60%205%20L84%203%20L115%205%20L142%203%20L172%205%20L199%203%20L228%205%20L258%203%20L289%205%20L307%204%20L316%2013%20L314%2029%20L316%2047%20L313%2065%20L303%2075%20L278%2074%20L249%2076%20L219%2074%20L185%2076%20L151%2074%20L120%2076%20L88%2074%20L56%2076%20L30%2074%20L10%2076%20L4%2064%20L6%2048%20L4%2029%20L7%2013%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23e3dfce%22%20stroke-width%3D%223.3%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")!important;background-color:transparent!important;
 background-size:100% 100%!important;background-repeat:no-repeat!important;
 text-shadow:0 2px 3px #000!important;
}
#modes button[aria-pressed="true"],#genres button[aria-pressed="true"],#decades button[aria-pressed="true"],.primary{
 background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%2280%22%20viewBox%3D%220%200%20320%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M13%204%20L38%203%20L60%205%20L84%203%20L115%205%20L142%203%20L172%205%20L199%203%20L228%205%20L258%203%20L289%205%20L307%204%20L316%2013%20L314%2029%20L316%2047%20L313%2065%20L303%2075%20L278%2074%20L249%2076%20L219%2074%20L185%2076%20L151%2074%20L120%2076%20L88%2074%20L56%2076%20L30%2074%20L10%2076%20L4%2064%20L6%2048%20L4%2029%20L7%2013%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23e3dfce%22%20stroke-width%3D%223.3%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(155deg,rgba(227,226,218,.56),rgba(160,166,159,.48))!important;
 background-size:100% 100%,calc(100% - 10px) calc(100% - 9px)!important;
 background-position:center,center!important;
 background-repeat:no-repeat!important;
}
/* Search and load are stone slabs too. */
#resetSearchButton[hidden]{display:none!important}

/* Single unified action button */
#actionButton{display:block;width:100%;min-height:52px}
#searchButton[hidden],#loadButton[hidden],#saveButton[hidden]{display:none!important}

/* Animated prehistoric mascots: decorative, never intercept button taps. */
#modes button,#genres button,#decades button,#actionButton{
 position:relative!important;
 padding-right:32px!important;
 padding-left:5px!important;
}
#modes button::after,#genres button::after,#decades button::after,#actionButton::after{
 content:"";position:absolute;right:4px;top:50%;transform:translateY(-50%);
 width:25px;height:33px;background-position:center;background-repeat:no-repeat;
 background-size:contain;pointer-events:none;
}
#modes button::after{background-image:url('/mascot-bronto.webp')}
#genres button::after{background-image:url('/mascot-baba.webp')}
#decades button::after{background-image:url('/mascot-trex.webp')}
#actionButton{padding-right:74px!important;min-height:70px!important}
#actionButton::after{background-image:url('/mascot-diva.webp');width:65px;height:62px;right:8px}
@media(max-width:500px){
 #modes button,#genres button,#decades button{padding-right:24px!important;padding-left:3px!important;font-size:.7rem}
 #modes button::after,#genres button::after,#decades button::after{width:19px;height:27px;right:2px}
}

/* Mascots appear only on selected filters; diva always visible. */
#modes button::after,#genres button::after,#decades button::after{opacity:0;visibility:hidden}
#modes button[aria-pressed="true"]::after,#genres button[aria-pressed="true"]::after,#decades button[aria-pressed="true"]::after{opacity:1;visibility:visible}
#actionButton::after{opacity:1;visibility:visible}

/* Enlarged active mascots: Bronty/Baba 2x, T-Rex 1.5x. Keep button heights unchanged. */
#modes button,#genres button{padding-right:53px!important}
#decades button{padding-right:43px!important}
#modes button::after,#genres button::after{width:50px;height:42px;right:2px}
#decades button::after{width:38px;height:40px;right:3px}
@media(max-width:500px){
 #modes button,#genres button{padding-right:41px!important}
 #decades button{padding-right:33px!important}
 #modes button::after,#genres button::after{width:38px;height:38px;right:1px}
 #decades button::after{width:29px;height:34px;right:2px}
}