* { box-sizing: border-box; }
html,body,#app { height:100%; }
body { margin:0; font-family:'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#0f212e; color:#d0d9e3; overflow:hidden; }
:root { --accent:#1dd072; --accent2:#17a65b; --danger:#d64545; --danger2:#a72c2c; --panel:#131e28; --panel2:#182837; --tile:#132230; --tile-border:#203444; --tile-hover:#1b3344; --tile-safe:#1e6d41; --tile-safe-border:#239356; --tile-mine:#5a1f28; --tile-mine-border:#8c2d3a; --radius:10px; --tile-size:112px; }

/* Top Bar */
.top-bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:10px 28px; background:#1a2c38; border-bottom:1px solid #1d2b36; position:sticky; top:0; z-index:20; }
.brand { font-weight:600; letter-spacing:.5px; font-size:15px; opacity:.9; }
.balance-center { display:flex; justify-content:center; }
.top-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; }
.balance-pill { background:#0f212e; padding:10px 34px; border-radius:44px; font-weight:600; font-size:15px; box-shadow:inset 0 0 0 1px #253643; letter-spacing:.5px; }
.pill-btn { background:#176bc1; color:#fff; border:none; padding:6px 14px; border-radius:26px; font-size:13px; cursor:pointer; transition:.15s background; }
.pill-btn:hover { background:#1d7cd9; }
.pill-btn.subtle { background:#23323f; }
.pill-btn.subtle:hover { background:#2b3d4c; }

/* Layout */
.layout { display:flex; height:calc(100% - 52px); }
.sidebar { width:240px; background:#213743; padding:18px 14px 30px; display:flex; flex-direction:column; gap:18px; border-right:1px solid #15232f; }
.group { display:flex; flex-direction:column; gap:6px; }
.lbl { font-size:11px; text-transform:uppercase; letter-spacing:1px; opacity:.65; font-weight:500; }
.bet-box { display:flex; align-items:center; position:relative; background:#0f212e; border:1px solid #1f303d; border-radius:var(--radius); padding:6px 8px; gap:8px; flex-wrap:wrap; }
.bet-box input { flex:1 1 80px; background:transparent; border:none; color:#fff; font-size:14px; outline:none; min-width:0; }
.bet-box input::-webkit-outer-spin-button, .bet-box input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.currency { font-size:13px; opacity:.7; }
.quick-row { display:flex; gap:6px; width:100%; }
.quick-row button { flex:1; background:#2f4553; color:#ffffff; border:1px solid #2e495b; border-radius:6px; padding:6px 0; font-size:11px; font-weight:600; cursor:pointer; }
.quick-row button:hover { background:#557086; }
select { background:#0f212e; color:#e2eef5; border:1px solid #1f303d; border-radius:var(--radius); padding:8px 10px; font-size:14px; }

.buttons { display:flex; flex-direction:column; gap:10px; }
.action { width:100%; border:none; border-radius:var(--radius); height:44px; font-size:14px; font-weight:600; cursor:pointer; letter-spacing:.3px; transition:.17s background, .17s transform; display:flex; align-items:center; justify-content:center; }
.action:disabled { opacity:.45; cursor:default; }
.primary { background:#1fff20; color:#052913; }
.primary:hover:not(:disabled) { filter:brightness(1.07); }
.cashout-btn.primary { filter:grayscale(.4) brightness(.8); }
.cashout-btn.primary.ready { filter:none; }
.random { background:#2f4553; color:#dbe9f3; }
.random:hover:not(:disabled) { background:#557086; }
.hidden { display:none !important; }
/* Waiting icon animation */
.action.waiting .wait-icon { display:inline-block; animation:waitPulse .6s ease-in-out infinite; font-size:18px; color:#121f26; }
/* Slight dim for tile-triggered waiting (data-wait-tiles="1") */
.action.waiting[data-wait-tiles="1"] .wait-icon { opacity:.7; filter:brightness(.85); }
@keyframes waitPulse { 0% { transform:scale(1); opacity:.85;} 50% { transform:scale(1.35); opacity:1;} 100% { transform:scale(1); opacity:.85;} }
/* Cashout pending icon swap */
.cashout-btn .cashout-pending-icon { display:none; font-size:16px; margin-left:6px; }
.cashout-btn.pending-reveals .cashout-label { opacity:.35; }
.cashout-btn.pending-reveals .cashout-pending-icon { display:inline-block; animation:spin 1s linear infinite; }
@keyframes spin { from { transform:rotate(0deg);} to { transform:rotate(360deg);} }

/* Button press feedback (no bounce on hold) */
.bet-btn, .cashout-btn { transition:transform 120ms ease, box-shadow 120ms ease; will-change:transform; }
.bet-btn.is-pressing, .cashout-btn.is-pressing { transform:translateY(1px) scale(.965); }

.stats-row { display:flex; gap:12px; }
.stats-row.three .stat-box { flex:1; }
.stats-col { display:flex; flex-direction:column; gap:12px; }
.stat-box { flex:1; background:var(--panel); border:1px solid #223444; border-radius:var(--radius); padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.stat-box.wide { width:100%; }
.stat-box.potential { background:#122330; }
.stat-box.potential.short { flex:1; }
.cap { font-size:11px; text-transform:uppercase; opacity:.55; letter-spacing:1px; }
.val { font-size:15px; font-weight:600; letter-spacing:.5px; }

/* In-game info row */
.info-row { display:flex; gap:10px; }
.info-box { flex:1; background:#122330; border:1px solid #203645; padding:10px 12px; border-radius:var(--radius); font-size:13px; font-weight:600; display:flex; justify-content:space-between; }
.info-box span { font-weight:700; color:#1dd072; }

/* Profit box */
.profit-box { margin-top:10px; background:#122330; border:1px solid #203645; border-radius:var(--radius); padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; }
.profit-label { font-size:11px; text-transform:uppercase; letter-spacing:1px; opacity:.6; font-weight:600; }
.profit-value { font-size:15px; font-weight:700; color:#1dd072; letter-spacing:.5px; }

.game-wrapper { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:40px 0 60px; background:#0f212e; }
.board { --cols:5; --rows:5; display:grid; grid-template-columns:repeat(var(--cols), var(--tile-size)); grid-template-rows:repeat(var(--rows), var(--tile-size)); gap:18px; position:relative; min-height:630px; }
/* .board.locked removed (multi-click enabled) */
.tile { --tile-shadow-inset:-0.15em; --shadow:0.3em; --tile-shadow-lg:0.45em; --small-shadow:-0.15em; --duration:300ms; --fetch-duration:600ms; width:var(--tile-size); height:var(--tile-size); background:#2f4553; border:1px solid #2a3e4b; border-bottom:3px solid #1d313d; border-radius:14px; cursor:pointer; position:relative; display:flex; justify-content:center; align-items:center; transition:.12s background, .12s transform, .12s box-shadow; box-shadow:0 4px 10px rgba(0,0,0,.45); }
.tile:hover { background:#557086; }
/* Lift effect on hover for unrevealed tiles */
.tile:not(.revealed):hover { transform:translateY(-3px); }
.tile::before { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 var(--shadow) var(--tile-shadow-lg) -0.05em rgba(0,0,0,.55); transform:translateY(var(--small-shadow)); transition:transform var(--duration) ease, box-shadow var(--duration) ease; pointer-events:none; }
.tile.revealed.safe::before, .tile.revealed.mine::before { box-shadow:none; transform:none; }
.tile:focus-visible { outline:2px solid #2d85ff; outline-offset:2px; }
.tile.revealed.safe { background:#071824; border:none; box-shadow:none; }
.tile.revealed.mine { background:#071824; border:none; box-shadow:none; }
.tile.mine::after { content:'💣'; font-size:60px; animation:iconReveal .34s cubic-bezier(.55,1.4,.4,1); }
.tile.safe::after { content:'💎'; font-size:60px; animation:iconReveal .34s cubic-bezier(.55,1.4,.4,1); }
.tile.revealed[data-revealed="false"].safe::after,
.tile.revealed[data-revealed="false"].mine::after {
	filter:brightness(.6) saturate(.7);
	font-size:44px;
}
.tile.pending { animation:pendingScale .4s ease; }
@keyframes pendingScale {
	0% { transform:scale(1); }
	55% { transform:scale(1.08); }
	100% { transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){ .tile.pending { animation:none; } }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(29,208,114,.55);} 70% { box-shadow:0 0 0 18px rgba(29,208,114,0);} 100% { box-shadow:0 0 0 0 rgba(29,208,114,0);} }

@keyframes iconReveal {
	0% { transform:scale(.05); opacity:0; }
	100% { transform:scale(1); opacity:1; }
}
@keyframes popSafe { 0% { transform:scale(.92); } 60% { transform:scale(1.05);} 100% { transform:scale(1);} }
@keyframes shakeMine { 0%,100% { transform:translate3d(0,0,0);} 20% { transform:translate3d(-4px,0,0);} 40% { transform:translate3d(4px,0,0);} 60% { transform:translate3d(-3px,0,0);} 80% { transform:translate3d(3px,0,0);} }

/* Cashout Popup */
.cashout-popup { position:absolute; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; width:var(--cashout-size,170px); height:var(--cashout-size,170px); background:#13212c; border:4px solid #10d455; border-radius:14px; font-weight:700; color:#e5f5ec; box-shadow:0 0 0 2px rgba(16,212,85,.25), 0 10px 30px -8px rgba(0,0,0,.55); animation:popPopup .35s ease; pointer-events:none; z-index:50; transform:translate(-50%,-50%); }
.cashout-popup .cashout-mult { font-size:25px; letter-spacing:.5px; color:#1dd072; }
.cashout-popup .cashout-sep { width:70%; height:2px; background: #2f4553; border-radius:2px; }
.cashout-popup .cashout-amt { font-size: 21px; font-weight:700; color:#1dd072; letter-spacing:.5px; }
.game-wrapper { position:relative; }
@keyframes popPopup { 0% { transform:translate(-50%,-50%) scale(.6); opacity:0;} 60% { transform:translate(-50%,-50%) scale(1.08); opacity:1;} 100% { transform:translate(-50%,-50%) scale(1); opacity:1;} }

@media (max-width:1250px){ :root { --tile-size:80px; } }
@media (max-width:1020px){ :root { --tile-size:70px; } }
@media (max-width:880px){ .layout { flex-direction:column; } .sidebar { width:100%; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid #15232f; } .game-wrapper { padding-top:20px; } }

/* Additional mobile scaling */
@media (max-width:680px){
	:root { --tile-size:64px; }
	.board { gap:14px; min-height:unset; }
	.tile.mine::after, .tile.safe::after { font-size:48px; }
	.top-bar { padding:8px 16px; }
	.sidebar { padding:14px 10px 18px; gap:14px; }
	.balance-pill { padding:8px 20px; font-size:14px; }
	.cashout-popup { --cashout-size:140px; border-width:3px; }
	.cashout-popup .cashout-mult { font-size:22px; }
	.cashout-popup .cashout-amt { font-size:18px; }
}
@media (max-width:540px){
	:root { --tile-size:56px; }
	.board { gap:12px; }
	.tile.mine::after, .tile.safe::after { font-size:44px; }
	.quick-row button { font-size:10px; padding:5px 0; }
	.action { height:40px; font-size:13px; }
	.profit-box, .info-box { padding:8px 10px; }
	.cashout-popup { --cashout-size:130px; border-width:3px; }
	.cashout-popup .cashout-mult { font-size:20px; }
	.cashout-popup .cashout-amt { font-size:17px; }
}
@media (max-width:420px){
	:root { --tile-size:50px; }
	.board { gap:10px; }
	.tile.mine::after, .tile.safe::after { font-size:40px; }
	.top-bar { padding:6px 12px; }
	.sidebar { padding:10px 8px 14px; }
	.brand { font-size:0; } /* hide text if any; image remains */
	.balance-pill { padding:6px 14px; font-size:13px; }
	.action { height:38px; font-size:12px; }
	.profit-label, .lbl { font-size:10px; }
	.cashout-popup { --cashout-size:110px; border-width:2px; }
	.cashout-popup .cashout-mult { font-size:18px; }
	.cashout-popup .cashout-amt { font-size:16px; }
}

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(4,12,18,.72); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:200; }
.modal { width:320px; background:#13212c; border:1px solid #203645; border-radius:14px; padding:18px 20px 20px; display:flex; flex-direction:column; gap:16px; box-shadow:0 8px 34px -8px rgba(0,0,0,.65); animation:fadeInScale .28s ease; }
.modal-header { display:flex; justify-content:space-between; align-items:center; }
.modal-header h2 { font-size:16px; margin:0; letter-spacing:.5px; }
.modal-close { background:#1f2f3b; color:#b9c9d6; border:none; width:32px; height:32px; border-radius:8px; font-size:18px; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:#2a3e4d; }
.modal-body { display:flex; flex-direction:column; gap:10px; }
.modal-bet-box { width:100%; }
.modal-bet-box input::-webkit-inner-spin-button,
.modal-bet-box input::-webkit-outer-spin-button { -webkit-appearance: none; margin:0; }
.modal-bet-box input[type=number] { -moz-appearance:textfield; appearance:textfield; }
.modal-actions { display:flex; gap:10px; }
.action.mini { height:40px; font-size:13px; }
.action.mini.alt { background:#1f2f3b; color:#d0d9e3; }
.action.mini.alt:hover { background:#2a3e4d; }
.error-msg { font-size:12px; color:#ff5f66; font-weight:500; }
@keyframes fadeInScale { 0% { opacity:0; transform:translateY(12px) scale(.96);} 100% { opacity:1; transform:translateY(0) scale(1);} }

        .brand a{
          color:#fff;
          text-decoration:none;
          position:relative;
          display:inline-block;
        }
        .brand a::after{
          content:"";
          position:absolute;
          left:0;
          bottom:-2px;
          height:2px;
          width:0;
          background:currentColor;
          transition:width .22s cubic-bezier(.2,.9,.3,1);
        }
        .brand a:hover::after,
        .brand a:focus::after{
          width:100%;
        }