:root{
  --pink:#ff4fa3;
  --hot:#ff1f8f;
  --lav:#caa6ff;
  --dark:#1a0b20;
  --cream:#fff0f8;
  --gold:#ffd84d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
html,body{margin:0;padding:0;height:100%;font-family:"Comic Sans MS","Baloo 2",system-ui,sans-serif;background:linear-gradient(135deg,#ffd1ec 0%,#e4c9ff 50%,#ffb3d9 100%);overflow:hidden;touch-action:manipulation;}
#app{width:100vw;height:100vh;height:100dvh;display:flex;flex-direction:column;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);}

.home{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:30px;padding:20px;text-align:center;}
.title{font-size:clamp(48px,8vw,96px);color:var(--dark);text-shadow:4px 4px 0 var(--pink),8px 8px 0 var(--lav);margin:0;font-weight:900;letter-spacing:2px;line-height:1;}
.subtitle{font-size:clamp(22px,3vw,34px);color:var(--hot);margin:0;font-weight:700;}
.big-btn{background:linear-gradient(145deg,var(--hot),var(--pink));color:white;border:6px solid var(--dark);border-radius:40px;padding:28px 60px;font-size:clamp(28px,4vw,44px);font-weight:900;box-shadow:0 10px 0 var(--dark),0 15px 30px rgba(0,0,0,.3);cursor:pointer;min-width:320px;min-height:100px;transition:transform .1s;}
.big-btn:active{transform:translateY(6px);box-shadow:0 4px 0 var(--dark);}
.star-counter{background:var(--dark);color:var(--gold);padding:16px 28px;border-radius:30px;font-size:28px;font-weight:900;border:4px solid var(--pink);}
.kuromi-mascot{width:min(40vw,280px);height:auto;animation:bounce 1.6s infinite ease-in-out;}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-25px) rotate(3deg);}}

.level-select-wrap{display:flex;flex-direction:column;flex:1;min-height:0;}
.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;padding:20px 24px 24px;max-width:1200px;width:100%;margin:0 auto;overflow-y:auto;flex:1;min-height:0;box-sizing:border-box;align-items:start;}
.level-card{background:var(--cream);border:5px solid var(--dark);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;box-shadow:0 8px 0 var(--dark);text-align:center;transition:transform .1s;}
.level-card:active{transform:translateY(4px);box-shadow:0 4px 0 var(--dark);}
.level-card .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#ffd1ec;}
.level-card .thumb-placeholder{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#ffd1ec,#e4c9ff);display:flex;align-items:center;justify-content:center;font-size:48px;}
.level-card .card-info{padding:10px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;}
.level-card .num{font-size:36px;color:var(--hot);line-height:1;}
.level-card .card-title-text{font-size:16px;font-weight:800;color:var(--dark);}

.folder-card{background:linear-gradient(145deg,#fff9e6,#fff0d0);border-color:var(--gold);}
.folder-top{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#ffe08a,#ffd84d);}
.folder-previews{display:flex;width:100%;height:100%;}
.folder-preview-img{flex:1;object-fit:cover;height:100%;min-width:0;}
.folder-badge{position:absolute;top:8px;right:8px;background:var(--hot);color:white;font-size:13px;font-weight:900;border-radius:20px;padding:3px 9px;border:2px solid white;}
.folder-label{font-size:17px;font-weight:900;color:#b8860b;}
.folder-sub{font-size:13px;color:#a07020;font-weight:700;}

.series-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.series-cover-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#ffd1ec;}
.series-cover-placeholder{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#ffd1ec,#e4c9ff);display:flex;align-items:center;justify-content:center;font-size:64px;}
.series-card .card-title-text{font-size:22px;font-weight:900;padding-bottom:8px;}

.game-wrap{display:flex;flex-direction:column;flex:1;min-height:0;padding:10px;gap:10px;}
.hud{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--dark);border-radius:24px;color:white;flex-wrap:wrap;gap:10px;}
.hud .back-btn,.hud .hint-btn{background:var(--hot);border:4px solid white;border-radius:20px;color:white;font-size:22px;font-weight:900;padding:14px 24px;min-height:60px;min-width:80px;cursor:pointer;}
.progress{display:flex;gap:8px;}
.dot{width:40px;height:40px;border-radius:50%;background:#555;border:3px solid white;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;}
.dot.found{background:var(--gold);color:var(--dark);animation:pop .5s;}
@keyframes pop{0%{transform:scale(0);}60%{transform:scale(1.4);}100%{transform:scale(1);}}

.boards{display:flex;flex:1;gap:16px;align-items:stretch;justify-content:center;min-height:0;}
.board{flex:1;position:relative;background:white;border:6px solid var(--dark);border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 0 var(--hot);min-width:0;}
.board img{max-width:100%;max-height:100%;display:block;pointer-events:none;-webkit-user-drag:none;}
.hit-layer{position:absolute;inset:0;cursor:pointer;}
/* Overlay is repositioned by JS to exactly cover the image — rings live here */
.img-overlay{position:absolute;top:0;left:0;pointer-events:none;}

.ring{position:absolute;width:14%;aspect-ratio:1;border-radius:50%;border:8px solid var(--gold);background:rgba(255,216,77,.25);transform:translate(-50%,-50%) scale(0);animation:ring .9s ease-out forwards;pointer-events:none;box-shadow:0 0 20px var(--gold);}
@keyframes ring{0%{transform:translate(-50%,-50%) scale(0);opacity:1;}60%{transform:translate(-50%,-50%) scale(1.2);opacity:1;}100%{transform:translate(-50%,-50%) scale(1);opacity:.9;}}
.ring.permanent{animation:none;transform:translate(-50%,-50%) scale(1);border-color:var(--hot);background:rgba(255,31,143,.18);}
.miss{position:fixed;width:80px;height:80px;border-radius:50%;background:rgba(0,0,0,.3);transform:translate(-50%,-50%) scale(0);animation:miss .5s ease-out forwards;pointer-events:none;}
@keyframes miss{0%{transform:translate(-50%,-50%) scale(0);}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0;}}

@media (orientation:portrait){
  .boards{flex-direction:column;}
}

.win{position:fixed;inset:0;background:rgba(26,11,32,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;z-index:99;padding:20px;text-align:center;}
.win h1{color:var(--gold);font-size:clamp(48px,9vw,110px);text-shadow:4px 4px 0 var(--hot);margin:0;animation:wiggle 1s infinite;}
@keyframes wiggle{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}
.stars{font-size:90px;animation:bounce 1.2s infinite;}
.confetti{position:fixed;width:14px;height:14px;pointer-events:none;z-index:98;}

.kuromi-dance{position:fixed;bottom:20px;right:20px;width:140px;height:140px;z-index:50;pointer-events:none;animation:dance 1s ease-in-out;}
@keyframes dance{0%{transform:scale(0) rotate(-30deg);}30%{transform:scale(1.2) rotate(10deg);}60%{transform:scale(1) rotate(-10deg);}100%{transform:scale(0) rotate(0);}}