body{margin:0;font-family:sans-serif;background:#fdf6ff}
.header {
  text-align: center;
  margin-bottom: 10px;
}

.dm-title {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;

  background: linear-gradient(90deg, #8b5cf6, #ec4899, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dm-subtitle {
  font-size: 12px;
  color: #8b5cf6;
  margin-top: 4px;
}

#dm8{
 max-width:420px;
 margin:auto;
 padding:15px;
 text-align:center;
}

.header h2{
 margin:10px 0;
 color:#8b5cf6;
}

#board{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:10px;
}

.card{
 perspective:800px;
}

.inner{
 position:relative;
 width:100%;
 aspect-ratio:1;
 border-radius:15px;
 transform-style:preserve-3d;
 transition:transform .4s;
}

.card.show .inner{
 transform:rotateY(180deg);
}

.front,.back{
 position:absolute;
 width:100%;
 height:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:15px;
 font-size:28px;
 backface-visibility:hidden;
}

.front{
 background:linear-gradient(135deg,#f3e8ff,#fde2f3);
 color:#8b5cf6;
}

.back{
 background:white;
 transform:rotateY(180deg);
 box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

#overlay{
 position:fixed;
 top:0;left:0;width:100%;height:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 background:rgba(0,0,0,0.4);
 backdrop-filter:blur(4px);
}

.hidden{display:none}

.modal{
 background:white;
 padding:25px;
 border-radius:20px;
 box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.actions{
 display:flex;
 gap:10px;
 margin-top:15px;
}

.actions button{
 flex:1;
 padding:10px;
 border:none;
 border-radius:10px;
 background:linear-gradient(135deg,#8b5cf6,#ec4899);
 color:white;
 font-weight:bold;
}

@media(max-width:480px){
 #board{grid-template-columns:repeat(3,1fr);}
}