:root {
  --bg:#0b0f19;
  --text:#e9eefc;
  --muted:#a7b2d6;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,Arial;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.app{max-width:1000px;width:100%;padding:20px}
header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
h1{margin:0}
.sub{color:var(--muted);font-size:14px}

.panel{border:1px solid #333;padding:15px}
.content{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
@media(max-width:800px){.content{grid-template-columns:1fr}}

.boardWrap{display:flex;justify-content:center}
.board{
  position:relative;
  width:520px;
  max-width:100%;
  aspect-ratio:1365/2048;
  border:1px solid #444;
}
.tile{
  position:absolute;
  border:1px solid #111;
  background-repeat:no-repeat;
  transition:transform .2s ease;
  cursor:pointer;
}

.side{display:flex;flex-direction:column;gap:15px}
.card{border:1px solid #333;padding:10px}
.row{display:flex;gap:10px}
.stat{flex:1}
.label{color:#aaa;font-size:12px}
.value{font-size:20px;font-weight:bold}

.preview{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.thumb{border:1px solid #333;aspect-ratio:1365/2048}
.thumb img{width:100%;height:100%;object-fit:cover}

button{
  padding:8px 12px;
  background:#222;
  color:white;
  border:1px solid #555;
  cursor:pointer;
}
button:hover{background:#333}

.toast{
  position:fixed;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  background:#111;
  border:1px solid #444;
  padding:8px 12px;
  opacity:0;
  transition:.2s;
}
.toast.show{opacity:1}