/* Reset-ish */
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;background:#0B1220;color:#E5E7EB}
h1,h2,h3{margin:.2rem 0}
button{font:inherit}

/* Layout */
.app{min-height:100vh;display:flex;flex-direction:column;gap:12px;padding:12px}
.app__header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand__title{font-size:18px;font-weight:800}
.dot{width:10px;height:10px;border-radius:999px;background:#64748B;display:inline-block}
.dot--green{background:#22C55E}

.actions{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #334155;border-radius:12px;background:#111827;color:#E5E7EB;cursor:pointer}
.btn:hover{box-shadow:0 0 0 1px #1f2937 inset}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn--ghost{background:transparent}

.dice{width:28px;height:28px;border:1px solid #334155;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-weight:800}

/* Main area */
.main{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}
.board-wrap{display:flex;flex-direction:column;gap:10px}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:min(720px,100%);aspect-ratio:1/1}
.cell{position:relative;border-radius:12px;overflow:hidden}
.tile{height:100%;border-radius:12px;padding:8px;color:#fff;display:flex;flex-direction:column;gap:4px}
.tile__title{font-weight:700;font-size:12px;line-height:1.1}
.promo{font-size:11px;opacity:.95}
.piece{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.piece__dot{width:16px;height:16px;border-radius:999px;background:#fff;transform:scale(1);transition:transform .1s}

.status{opacity:.9;font-size:14px}

/* Sidebar */
.sidebar{display:grid;gap:16px;align-content:start}
.card{background:#0F172A;border:1px solid #1F2937;border-radius:16px;padding:16px}
.card__title{font-weight:700;margin-bottom:8px}
.ad{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ad__name{font-weight:600}
.ad__text{opacity:.9}

/* Footer */
.footer{opacity:.7;font-size:12px;text-align:center;margin-top:auto}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal__dialog{background:#0F172A;border:1px solid #1F2937;border-radius:16px;padding:16px;max-width:520px;width:100%}
.modal__title{font-weight:800;font-size:18px;margin:0 0 6px}
.modal__desc{opacity:.9;margin:0 0 12px}
.coupon-list{display:grid;gap:8px;max-height:280px;overflow:auto}
.coupon{background:#111827;border:1px dashed #374151;border-radius:12px;padding:10px}
.coupon__company{font-weight:700}
.coupon__title{font-size:13px;opacity:.95}
.coupon__code{margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace}
.coupon__date{font-size:12px;opacity:.7}

/* Tile color helpers */
.bg-start{background:#111827}
.bg-tax{background:#F59E0B}
.bg-event{background:#2563EB}
.bg-free{background:#6B7280}

/* Adaptive */
@media (max-width: 980px){
  .main{grid-template-columns:1fr}
  .sidebar{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .actions .btn span#dice-text{display:none}
  .sidebar{grid-template-columns:1fr}
  .brand__title{font-size:16px}
  .board{gap:6px}
  .tile__title{font-size:11px}
}