:root {
  --navy: #07152f; --ink: #111629; --gold: #f5a91a; --sand: #e9a957;
  --lapis: #087ceb; --cyan: #25d6ff; --green: #13d75b; --cream: #fff1c4;
}
* { box-sizing: border-box; }
.sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
html, body { margin: 0; min-height: 100%; font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; color: white; }
body {
  min-height: 100svh; overflow-x: hidden;
  background: #178ac9 url("assets/egypt-oasis-bg-v2.png") center bottom/cover fixed;
}
body::before { content:""; position:fixed; inset:0; background:linear-gradient(90deg,rgba(3,13,34,.22),rgba(3,13,34,.02) 45%,rgba(3,13,34,.24)); pointer-events:none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rotate-notice { display:none;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;flex-direction:column;gap:11px;text-align:center;background:#087ec7 url("assets/egypt-oasis-bg-v2.png") center/cover;color:#fff;text-shadow:0 3px 8px #001640;padding:30px; }
.rotate-notice::before { content:"";position:absolute;inset:0;background:#06152c77;backdrop-filter:blur(4px); }
.rotate-notice>*{position:relative;z-index:1}
.rotate-notice img{width:min(270px,70vw);filter:drop-shadow(0 8px 7px #00113f99)}
.rotate-notice strong{font-size:clamp(24px,8vw,42px);color:#ffd45c}
.rotate-notice span{font-size:14px}
.rotate-phone{width:82px;height:56px;margin-top:18px;border:4px solid #ffd65b;border-radius:15px;display:grid;place-items:center;font-size:35px;color:#fff7c9;background:radial-gradient(circle at 35% 25%,#159df4,#06377d 68%,#041b46);box-shadow:inset 0 0 0 2px #5ee4ff,inset 0 -7px 10px #00194d99,0 0 0 3px #7c4208,0 9px 22px #001538aa;text-shadow:0 2px 3px #00123e;animation:turn 1.9s cubic-bezier(.65,-.15,.35,1.15) infinite}
@keyframes turn{0%,20%,100%{transform:rotate(0deg)}55%,78%{transform:rotate(90deg)}}
@media (orientation:portrait) { .app-shell{display:none}.rotate-notice{display:flex} }
.app-shell { position:relative; z-index:1; width:min(1440px,100%); min-height:100svh; margin:auto; padding:18px clamp(14px,2vw,32px); display:flex; flex-direction:column; }
.hud,.game-layout { position:relative;z-index:2; }
.hud { min-height:80px; display:grid; grid-template-columns:minmax(220px,1fr) 230px 180px 54px; align-items:center; gap:14px; }
.hud .brand { grid-column:1;grid-row:1;justify-self:start;justify-items:start;align-items:start;align-self:start;text-align:left;height:112px; }
.hud .wallet { grid-column:2;grid-row:1;align-self:start; }
.hud .win { grid-column:3;grid-row:1;align-self:start; }
.hud .icon-button { grid-column:4;grid-row:1;align-self:start; }
.card { background:linear-gradient(180deg,rgba(13,29,58,.96),rgba(5,13,31,.96)); border:2px solid #f6bd3c; box-shadow:0 8px 22px #04122666,inset 0 1px #ffffff24; border-radius:18px; }
.wallet,.win { padding:10px 16px; display:flex; align-items:center; gap:12px; }
.wallet small,.win small { display:block; color:#f9cc52; font-size:11px; letter-spacing:1.3px; }
.wallet strong,.win strong { display:block; font-size:25px; line-height:1.1; }
.coin { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#7c3d00;background:radial-gradient(circle at 35% 30%,#fff7a2,#f5a91a 45%,#a75500 75%);border:3px solid #ffe07a; }
.win { flex-direction:column; align-items:flex-start; gap:2px; }
.brand { text-align:center; position:relative; height:78px; display:grid; place-items:center; }
.brand img { width:min(500px,98%); max-height:130px; object-fit:contain; filter:drop-shadow(0 8px 7px #00113f99); }
.demo-tag { position:absolute; right:calc(50% - 162px); top:4px; background:#e9374d;padding:3px 7px;border:1px solid #ffb05d;border-radius:6px;font-size:9px;font-weight:900;letter-spacing:1px;transform:rotate(3deg); }
.icon-button { width:54px;height:54px;border-radius:15px;border:2px solid #f6bd3c;background:linear-gradient(#26395a,#08152c);font-size:23px; }
.game-layout { flex:1; min-height:0; display:grid; grid-template-columns:minmax(460px,1fr) 330px; gap:18px; align-items:stretch; padding-top:8px; }
.board-wrap { position:relative; min-height:620px; display:flex; justify-content:center; align-items:stretch; }
#board { width:100%; height:100%; min-height:620px; display:block; }
.board-crown { position:absolute;z-index:2;top:1.5%;left:50%;transform:translateX(-50%);width:62px;height:62px;border:8px solid #f7bd3f;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff9d2 0 20%,#20253b 23% 100%);color:#f8c549;box-shadow:0 0 0 4px #8f4c0b,0 0 25px #ffe778; }
.shell-ready .board-crown { display:none; }
.guardian { display:block;position:absolute;z-index:4;pointer-events:none;filter:drop-shadow(0 14px 12px #00122f99); }
.guardian-left { left:var(--guardian-left-x,-11%);bottom:var(--guardian-left-bottom,-6%);width:var(--guardian-left-w,30%); }
.guardian-right { left:var(--guardian-right-x,78%);bottom:var(--guardian-right-bottom,-6%);width:var(--guardian-right-w,32%); }
.result { position:absolute; left:50%; bottom:7px; transform:translateX(-50%); color:#fff2bd; background:#06132ddd; border:1px solid #f1b536; border-radius:999px; padding:7px 14px; font-size:12px; white-space:nowrap; pointer-events:none; }
.controls { position:relative;padding:68px 31px 28px;min-height:min(585px,calc(100svh - 105px));align-self:center;display:flex;flex-direction:column;gap:7px;background:transparent url("assets/control-panel-shell.png") center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none; }
.control-group { display:flex;flex-direction:column;gap:8px; }
.label-row { display:flex;justify-content:space-between;align-items:end; }
.label-row label { color:#ffd366;font-size:13px;font-weight:900;letter-spacing:1px; }
.label-row span { color:#93a6c9;font-size:10px; }
.controls .label-row { justify-content:center; }.controls .label-row label { color:#2b1505;font-size:15px;text-shadow:0 1px #ffd980; }.controls .label-row span { display:none; }
.segmented { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#020916;padding:5px;border-radius:12px; }
.segmented button { min-height:45px;border:1px solid #8d5e20;border-radius:9px;background:linear-gradient(#45331f,#211a14);font-weight:900; }
.segmented button.active,.presets button.active { background:linear-gradient(180deg,#29baff 0%,#087cf2 45%,#064ec5 100%);border-color:#8beaff;box-shadow:inset 0 2px 1px #d5f8ff,inset 0 -4px 7px #002d9b,0 0 0 2px #073884,0 0 12px #087ceb88;text-shadow:0 2px 2px #002c83; }
.stepper { display:grid;grid-template-columns:48px 1fr 48px;align-items:center;text-align:center;background:#020916;padding:5px;border-radius:12px; }
.stepper button { height:45px;border:2px solid #ffe576;border-radius:9px;background:linear-gradient(180deg,#fff18b 0%,#ffd137 28%,#ffb009 72%,#ed8b00 100%);box-shadow:inset 0 2px 1px #fffbd2,inset 0 -3px 2px #bb6500,0 2px 3px #0008;color:#241000;font-size:26px;font-weight:1000; }
.stepper strong { font-size:25px; }
.presets { display:grid;grid-template-columns:repeat(4,1fr);gap:4px; }.presets button { min-height:33px;border:1px solid #8d5e20;border-radius:8px;background:linear-gradient(#503821,#251b13);font-size:12px;font-weight:900; }
.auto-count { background:none!important;border:0!important;box-shadow:none!important;color:#fff!important;font-size:21px!important;text-shadow:0 2px #000; }
.auto-count.active { color:#ffe163!important; }
.drop-button { min-height:78px;border:3px solid #ffdf5f;border-radius:999px;padding:12px;background:linear-gradient(180deg,#43f06d 0%,#08c64a 48%,#009033 100%);box-shadow:inset 0 3px 2px #d8ffc8,inset 0 0 0 3px #27e86d,inset 0 -7px #02782b,0 0 0 4px #955307,0 8px 18px #0008; text-shadow:0 2px #035b27; }
.drop-button span { display:block;font-size:34px;font-weight:1000;letter-spacing:1px; }.drop-button small { text-transform:uppercase; }
.drop-button:active { transform:translateY(2px); }.drop-button:disabled { filter:grayscale(.7);cursor:not-allowed; }
.reset-button { display:none; }.fairness { display:none;margin:0;color:#55300f;font-size:8px;text-align:center;line-height:1.2;font-weight:800; }
@media (max-width: 800px) {
  .app-shell { padding:8px; }
  .hud { min-height:62px; grid-template-columns:1fr 1fr 44px; gap:7px; }
  .brand { grid-row:2;grid-column:1/-1; position:absolute;top:62px;left:50%;transform:translateX(-50%);z-index:3;width:190px;height:72px; }
  .brand img { width:190px;max-height:72px; }.demo-tag { display:none; }
  .wallet,.win {padding:8px 10px;border-radius:13px}.wallet strong,.win strong{font-size:17px}.coin{width:31px;height:31px}.icon-button{width:44px;height:44px}
  .game-layout { grid-template-columns:1fr;display:flex;flex-direction:column;gap:6px;padding-top:0; }
  .board-wrap { min-height:0; height:min(62svh,650px); margin-top:4px; }
  #board { min-height:0; }
  .board-crown {width:45px;height:45px;border-width:6px;top:5.5%}.result{bottom:3px;max-width:90%;overflow:hidden;text-overflow:ellipsis}
  .controls { width:100%;min-height:0;padding:10px;gap:9px;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(180deg,rgba(13,29,58,.96),rgba(5,13,31,.96));border:2px solid #f6bd3c;box-shadow:0 8px 22px #04122666,inset 0 1px #ffffff24;border-radius:15px; }
  .control-group {gap:4px}.label-row span{display:none}.segmented button{min-height:38px;font-size:12px}.stepper button{height:38px}.stepper strong{font-size:19px}
  .drop-button {grid-column:1/-1;grid-row:1;padding:9px}.drop-button span{font-size:25px}.drop-button small{display:none}
  .controls .label-row {justify-content:flex-start}.controls .label-row label{color:#ffd366;font-size:11px;text-shadow:none}.presets,.reset-button,.fairness{display:none}
}
@media (max-width: 430px) { .board-wrap{height:56svh}.controls{position:sticky;bottom:max(6px,env(safe-area-inset-bottom));}.game-layout{justify-content:space-between;} }
@media (orientation: landscape) and (max-height: 600px) {
  html,body { height:100%;overflow:hidden; }
  .app-shell { height:100svh;min-height:0;padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left)); }
  .hud { min-height:48px;height:48px;grid-template-columns:minmax(170px,1fr) minmax(145px,190px) minmax(105px,145px) 40px;gap:7px; }
  .wallet,.win { padding:4px 8px;border-radius:11px;min-width:0; }
  .wallet small,.win small { font-size:8px;letter-spacing:.8px; }
  .wallet strong,.win strong { font-size:15px; }
  .coin { width:28px;height:28px;border-width:2px;flex:0 0 auto; }
  .icon-button { width:38px;height:38px;border-radius:10px;font-size:18px; }
  .hud .brand { position:relative;inset:auto;transform:none;grid-row:1;grid-column:1;width:auto;height:68px;z-index:3;justify-self:start;justify-items:start;align-items:start;align-self:start;text-align:left; }
  .wallet { grid-row:1;grid-column:2; }.win { grid-row:1;grid-column:3; }.hud .icon-button { grid-row:1;grid-column:4; }
  .brand img { width:min(340px,43vw);max-height:82px; }
  .demo-tag { display:none; }
  .game-layout { flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,29vw);gap:8px;padding-top:2px;min-height:0; }
  .board-wrap { width:auto;height:auto;min-height:0;margin:0; }
  #board { width:100%;height:100%;min-height:0; }
  .board-crown { width:37px;height:37px;border-width:5px;top:2%;box-shadow:0 0 0 3px #8f4c0b,0 0 15px #ffe778; }
  .result { bottom:1px;padding:4px 9px;font-size:9px;max-width:80%;overflow:hidden;text-overflow:ellipsis; }
  .controls { position:static;width:100%;height:auto;min-height:0;align-self:stretch;display:flex;grid-template-columns:none;justify-content:center;padding:7px;gap:4px;background:linear-gradient(180deg,rgba(13,29,58,.96),rgba(5,13,31,.96));border:2px solid #f6bd3c;border-radius:12px;overflow:hidden; }
  .control-group { gap:2px;min-height:0; }
  .label-row label { font-size:9px; }.label-row span { display:none; }
  .segmented { padding:3px;gap:3px;border-radius:8px; }
  .segmented button { min-height:27px;height:27px;border-radius:6px;font-size:9px; }
  .stepper { padding:3px;border-radius:8px;grid-template-columns:34px 1fr 34px; }
  .stepper button { height:28px;border-radius:6px;font-size:18px; }.stepper strong { font-size:15px; }
  .drop-button { grid-column:auto;grid-row:auto;padding:7px;border-width:2px;box-shadow:inset 0 2px 2px #d5ffbd,inset 0 -3px #03752d,0 0 0 3px #955307,0 4px 10px #0007; }
  .drop-button span { font-size:21px; }.drop-button small { display:none; }
  .presets,.reset-button,.fairness { display:none; }
}
/* The full sandstone panel already includes the sculpted green button artwork. */
@media (orientation:landscape) and (max-height:600px) {
  .controls { position:relative;background:transparent url("assets/control-panel-shell.png") center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;overflow:visible;padding:0; }
  .controls .control-group { position:absolute;left:12%;right:12%;gap:2px; }
  .controls .control-group:nth-child(1) { top:12%; }
  .controls .control-group:nth-child(2) { top:29%; }
  .controls .control-group:nth-child(3) { top:46%; }
  .controls .control-group:nth-child(4) { top:66%; }
  .controls .label-row { justify-content:center; }
  .controls .label-row label { color:#2b1505;text-shadow:0 1px #ffe09a;font-size:10px;letter-spacing:.5px; }
  .controls .drop-button { position:absolute;left:19%;right:19%;top:80%;height:14%;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center; }
  .controls .drop-button span { font-size:22px; }
  .controls .drop-button small { display:block;font-size:8px; }
}
@media (min-width:801px) and (min-height:601px) {
  .controls .drop-button { position:absolute;left:19%;right:19%;top:80%;height:14%;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center; }
  .controls { padding-bottom:124px; }
  .controls .drop-button span { font-size:32px; }
}
@media (orientation:landscape) {
  html,body { width:100%;height:100%;overflow:hidden; }
  .app-shell { height:100svh;min-height:0; }
  .board-wrap,#board { min-height:0; }
  .controls { min-height:0;height:100%;align-self:stretch; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important; } }