*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:Arial, Helvetica, sans-serif;margin:0;padding:0;background:#fafafa;color:#222;height:100vh;overflow-x:hidden;overscroll-behavior-x:contain}
#game-root{display:flex;flex-direction:column;align-items:stretch;gap:10px;touch-action:pan-y;overflow-x:hidden;width:100%;max-width:none;padding:0;height:100vh}
#hud{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1400px;position:relative;z-index:70;padding:8px 12px}
.controls{display:flex;gap:6px;flex-wrap:wrap;align-items:center;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.controls .btn{padding:8px 12px;margin-right:6px;border:1px solid #ccc;background:#fff;border-radius:6px;cursor:pointer;white-space:nowrap}
#hud .status{display:flex;gap:12px;align-items:center}
#score{font-weight:700}
#combo{color:#ff5722}
#board-wrapper{position:relative;overflow:visible;max-width:100%;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#board{display:grid;position:relative;background:transparent;border-radius:6px;max-width:100%;box-sizing:border-box}
/* keep board centered and prevent horizontal overflow on small screens */
#board-wrapper{display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;max-width:100%;width:100%;flex:1}
.tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:transform 140ms ease,opacity 260ms ease}
.tile.empty{cursor:default}
.tile.selected{transform:scale(1.04);outline:3px solid rgba(76,175,80,0.85);}
.tile.removed{opacity:0;transform:scale(0.85);pointer-events:none}
.tile .icon{width:80%;height:80%;display:block}
#overlay{will-change:transform}
#board .tile{will-change:transform,opacity}
#overlay{position:absolute;left:0;top:0;pointer-events:none}
#timer{width:120px;height:10px;background:rgba(255,255,255,0.14);border-radius:8px;overflow:hidden;margin-left:4px}
#progress{width:100%;height:100%;background:linear-gradient(90deg,#6cf,#09f);transform-origin:left;transition:width 250ms linear}
.btn:active{transform:translateY(1px)}
/* simple responsive container */
@media (max-width:600px){#hud{flex-direction:column;gap:8px;height:auto} .controls{justify-content:center}}

/* small-screen tweaks to avoid clipping */
@media (max-width:420px){
	#board{transform-origin:top center}
	.tile{border-radius:6px}
	.tile .icon{width:72%;height:72%}
}

/* responsive tweaks for larger and smaller devices */
@media (max-width:480px){
	body{padding:0}
	#timer{width:160px}
	.controls .btn{padding:6px 8px;font-size:13px}
}
@media (min-width:481px) and (max-width:1024px){
	#game-root{max-width:none}
	#timer{width:200px}
}
@media (min-width:1025px){
	#game-root{max-width:none}
}

/* settings and leaderboard modals content */
.setting-group{display:flex;gap:12px;justify-content:center;margin-top:8px}
.setting-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}

/* leaderboard list */
#leaderboard-list{max-height:300px;overflow:auto;text-align:left}
#leaderboard-list .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #eee}

/* new leader table rows */
.leader-row{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #eee}
.leader-row.header{font-weight:700;color:#333;border-bottom:2px solid #ddd}
.leader-row .col.rank{width:36px;text-align:center}
.leader-row .col.name{flex:1;padding-left:6px}
.leader-row .col.score{width:70px;text-align:right}
.leader-row .col.flips{width:56px;text-align:right}
.leader-row .col.duration{width:76px;text-align:right}
.leader-row .col.ts{width:160px;text-align:right;font-size:12px;color:#666}

/* Level complete overlay */
.overlay{position:fixed;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:60}
.overlay.hidden{display:none}
.modal{background:#fff;padding:20px;border-radius:10px;min-width:300px;max-width:92%;text-align:center}
.modal h2{margin:0 0 8px}
.modal-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}

/* toast notification */
.toast-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;top:auto;z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:linear-gradient(90deg,#222,#444);color:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,0.32);min-width:220px;text-align:center}

/* elapsed timer in HUD */
#elapsed{font-weight:600;color:inherit;margin-left:0}

/* shared modal inputs */
.modal input{padding:8px;border:1px solid #ddd;border-radius:4px;width:100%;}

/* gamemode modal layout */
#gamemode-modal .setting-group{flex-direction:column;align-items:flex-start}

/* numeric tile styling for 'Số' theme */
.tile .tile-number{width:80%;height:80%;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(90deg,#ffb74d,#ff8a65);color:#fff;font-weight:800;font-size:calc(12px + 1.4vmin)}
/* when using image-based number tiles */
.tile .tile-number-img{width:80%;height:80%;display:block;object-fit:contain;border-radius:8px}

/* 2026 large-screen refinement pass */
#hud.topbar {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

#board-wrapper {
  min-height: 0;
}

#board {
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.14));
}

.tile {
  border-radius: 8px;
}

.tile:not(.empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 255, 0.94));
  border: 1px solid rgba(30, 58, 90, 0.12);
  box-shadow: 0 8px 20px rgba(16, 35, 50, 0.12);
}

.tile.wrong {
  outline: 3px solid rgba(239, 83, 80, 0.85);
}

.saved-row {
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
}

@media (max-width:600px) {
  html,
  body {
    overflow: auto;
  }

  #game-root {
    min-height: 100vh;
    height: auto;
  }

  .leader-row {
    min-width: 620px;
  }
}