:root{
  font-family:ui-rounded,"Pretendard","Noto Sans KR",system-ui,sans-serif;
  color:#263238;background:#fff9ef;font-synthesis:none;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,#app{margin:0;width:100%;min-height:100%;background:#fff9ef}
body{overscroll-behavior:none}
button{font:inherit;color:inherit}
body.playing,#app:has(.playScreen){height:100dvh;overflow:hidden}

.homeScreen,.selectScreen{
  min-height:100dvh;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right))
          max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  max-width:1180px;margin:auto
}
.hero{display:flex;align-items:center;gap:20px;padding:24px 8px 18px}
.heroEmoji{font-size:68px}.eyebrow{font-size:14px;font-weight:900;color:#ff6b5f}
.hero h1{font-size:clamp(32px,5vw,56px);margin:3px 0}.hero p{margin:0;color:#6e7a7e;font-weight:700}
.homeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.homeCard{
  border:0;background:#fff;border-radius:30px;padding:24px;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  box-shadow:0 10px 32px rgba(98,73,36,.10);min-height:140px;cursor:pointer
}
.homeCard:active{transform:scale(.99)}.cardEmoji{font-size:54px}
.homeCard b{display:block;font-size:26px}.homeCard small{display:block;color:#7b8588;font-size:15px;margin-top:5px;font-weight:700}
.chev{font-size:44px;color:#c1c7c9}
.homeNote{margin:18px 0 0;background:#fff3d8;border-radius:20px;padding:14px 18px;font-weight:800;color:#695b43}

.playHeader{height:64px;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:10px;padding:4px 6px}
.backBtn{width:48px;height:48px;border:0;border-radius:16px;background:#dff1ff;font-size:26px;font-weight:900;cursor:pointer}
.playTitle{text-align:center;font-size:clamp(24px,3vw,36px);font-weight:950}
.versionPill{font-size:12px;font-weight:900;background:#fff0d7;border-radius:999px;padding:7px 10px}

.selectIntro{font-weight:800;color:#788286;text-align:center;margin:4px 0 18px}
.selectGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.selectCard{border:0;background:white;border-radius:24px;overflow:hidden;padding:0;box-shadow:0 10px 28px rgba(98,73,36,.10);cursor:pointer}
.selectCard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.selectCard>div{display:flex;justify-content:center;gap:8px;align-items:center;padding:14px}
.selectCard b{font-size:18px}

.playScreen{
  height:100dvh;overflow:hidden;
  padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right))
          max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  display:grid;grid-template-rows:64px 1fr
}
.playBody{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,27vw,330px);gap:10px}
.boardZone{
  min-width:0;min-height:0;display:grid;place-items:center;background:#fff;border-radius:26px;
  overflow:hidden;box-shadow:0 8px 24px rgba(98,73,36,.08);padding:8px
}
.toolZone{
  min-height:0;background:#fffdfa;border:1px solid #eadfc9;border-radius:24px;padding:12px;
  display:flex;flex-direction:column;gap:10px;overflow:hidden
}
.toolLabel{font-size:14px;font-weight:950;color:#6f7779}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.swatch{aspect-ratio:1;border-radius:50%;border:5px solid white;box-shadow:0 0 0 2px #eadfc9;cursor:pointer}
.swatch.active{box-shadow:0 0 0 4px #263238}
.toolButtons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.toolButtons button,.secondaryWide{
  border:1px solid #eadfc9;background:white;border-radius:16px;padding:11px 8px;font-weight:900;cursor:pointer
}
.toolButtons button.active{background:#ff6b5f;color:white;border-color:#ff6b5f}
.secondaryWide{width:100%}
.uploadBtn{position:relative;text-align:center;overflow:hidden}.uploadBtn input{position:absolute;inset:0;opacity:0}

.canvasBoard,.hiddenBoard{
  position:relative;width:min(100%,calc((100dvh - 96px)*4/3));aspect-ratio:4/3;
  background:white;border-radius:22px;overflow:hidden
}
.canvasBoard img,.canvasBoard canvas,.hiddenBoard img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.canvasBoard canvas{touch-action:none;z-index:1}.lineArt{pointer-events:none;z-index:2;mix-blend-mode:multiply}

.referenceMini{display:grid;grid-template-columns:58px 1fr;gap:8px;align-items:center;font-weight:900}
.referenceMini img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid #eadfc9}
.puzzleBoard{
  position:relative;width:min(100%,calc((100dvh - 96px)*4/3));aspect-ratio:4/3;
  display:grid;gap:5px;background:#f5ead4;padding:6px;border-radius:22px;overflow:hidden
}
.piece{border:0;border-radius:10px;background-repeat:no-repeat;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8);touch-action:manipulation}
.piece.selected{box-shadow:inset 0 0 0 6px #ff6b5f;transform:scale(.96)}

.compareBoard{position:relative;width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
.findPanel{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#f4ead9}
.findPanel img{width:100%;height:100%;display:block}
.panelTag{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.9);border-radius:999px;padding:6px 10px;font-weight:950;font-size:13px}
.diff,.hidden{
  position:absolute;transform:translate(-50%,-50%);border:0;background:rgba(255,255,255,.28);
  font-size:clamp(34px,5vw,60px);line-height:1;border-radius:50%;padding:3px;touch-action:manipulation
}
.diff.found,.hidden.found{outline:5px solid #ff5f57;background:rgba(255,255,255,.72)}
.ring{position:absolute;transform:translate(-50%,-50%);width:64px;height:64px;border:5px solid #ff5f57;border-radius:50%}
.complete{
  position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,253,247,.82);
  font-size:clamp(38px,7vw,72px);font-weight:950;z-index:9;pointer-events:none
}
.statusBig{text-align:center;font-size:44px;font-weight:950}
.targetList{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.targetList span{display:grid;place-items:center;background:#fff2c7;border-radius:14px;font-size:32px;padding:8px}
.targetList span.done{opacity:.3}
.hiddenBoard img{object-fit:cover}

@media(max-width:820px){
  .homeGrid{grid-template-columns:1fr}
  .selectGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .playScreen{grid-template-rows:58px 1fr}.playHeader{height:58px}
  .playBody{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:7px}
  .toolZone{
    max-height:28dvh;border-radius:18px;padding:8px;display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:7px;overflow:auto
  }
  .toolLabel{display:none}.swatches{grid-column:1/-1;grid-template-columns:repeat(9,1fr);gap:6px}
  .swatch{width:100%;max-width:42px;justify-self:center}
  .toolButtons{grid-column:1/4;grid-template-columns:repeat(4,1fr)}
  .secondaryWide{padding:9px 7px}
  .referenceMini{grid-column:1/3;grid-template-columns:50px 1fr}
  .referenceMini img{max-height:72px;object-fit:contain}
  .statusBig{font-size:30px}
  .targetList{grid-column:1/4;display:flex;justify-content:center}
  .targetList span{font-size:24px;padding:5px 10px}
  .canvasBoard,.puzzleBoard{width:min(100%,calc((72dvh - 78px)*4/3));max-height:100%}
  .compareBoard{grid-template-columns:1fr 1fr;gap:6px}
  .diff,.hidden{font-size:clamp(30px,8vw,52px)}
}
@media(max-width:520px){
  .playTitle{font-size:21px}.versionPill{display:none}.playHeader{grid-template-columns:48px 1fr 48px}
  .selectGrid{grid-template-columns:1fr 1fr;gap:10px}.selectCard>div{padding:10px}.selectCard b{font-size:15px}
  .homeScreen,.selectScreen{padding:12px}.heroEmoji{display:none}.homeCard{min-height:115px;padding:18px}
  .cardEmoji{font-size:42px}.homeCard b{font-size:22px}
  .toolZone{max-height:31dvh;grid-template-columns:repeat(4,minmax(0,1fr))}
  .compareBoard{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .findPanel{height:100%;width:auto;justify-self:center;max-width:100%}
}
@media(orientation:landscape) and (max-height:650px){
  .playScreen{grid-template-rows:52px 1fr;padding:4px}.playHeader{height:52px}
  .playBody{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:1fr}
  .toolZone{max-height:none;display:flex}.swatches{display:grid;grid-template-columns:repeat(3,1fr)}
  .toolButtons{display:grid;grid-template-columns:repeat(2,1fr)}.referenceMini{display:grid;grid-template-columns:58px 1fr}
  .targetList{display:grid;grid-template-columns:repeat(2,1fr)}
  .canvasBoard,.puzzleBoard{width:min(100%,calc((100dvh - 68px)*4/3))}
  .compareBoard{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
}

/* V3.1 content library */
body.playing,#app:has(.playScreen){height:100dvh;overflow:hidden}
.categoryTabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0 16px;position:sticky;top:0;z-index:5;background:rgba(255,249,239,.96);padding:8px;border-radius:18px;backdrop-filter:blur(10px)}
.categoryTabs button{border:1px solid #eadfc9;background:#fff;border-radius:999px;padding:11px 16px;font-weight:900;cursor:pointer;box-shadow:0 3px 10px rgba(98,73,36,.05)}
.categoryTabs button.active{background:#263238;color:#fff;border-color:#263238}
.contentGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-bottom:26px}
.contentCard{border:2px solid transparent;background:#fff;border-radius:22px;overflow:hidden;padding:0;box-shadow:0 8px 22px rgba(98,73,36,.09);cursor:pointer;text-align:left}
.contentCard.active{border-color:#ff6b5f}
.contentCard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#fff}
.contentCard>div{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;gap:8px}
.contentCard b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contentCard span{font-size:20px}
.photoStart{display:block;width:max-content;margin:4px auto 24px;border:1px dashed #ff6b5f;background:#fff5f1;border-radius:999px;padding:12px 18px;font-weight:900;position:relative;overflow:hidden}
.photoStart input{position:absolute;inset:0;opacity:0;cursor:pointer}
.toolTitle{text-align:center;font-size:20px;font-weight:950;padding:4px 0 2px}
.hiddenBoard{width:min(100%,calc((100dvh - 96px)*4/3));aspect-ratio:4/3}
@media(max-width:980px){.contentGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.contentGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.categoryTabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.categoryTabs::-webkit-scrollbar{display:none}.categoryTabs button{flex:0 0 auto;padding:10px 14px}.contentCard b{font-size:14px}}
@media(max-width:820px){.toolTitle{grid-column:1/-1;font-size:15px;padding:0}.hiddenBoard{width:min(100%,calc((72dvh - 78px)*4/3));max-height:100%}}