:root{--ink:#455443;--soft:#7d8c78;--green:#709668;--line:#e5eadf}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","나눔스퀘어라운드","맑은 고딕",sans-serif;font-weight:600}button,input,select{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a0bd8c;outline-offset:3px}.app{max-width:560px;margin:auto;padding:24px 16px}header{text-align:center;margin:5px 0 22px}header small{font-size:11px;letter-spacing:2px;color:#859079}h1{font-size:28px;letter-spacing:-1px;margin:10px 0 6px}header p{font-size:12px;color:var(--soft)}.row{display:flex;gap:9px;margin:13px 0}.card{flex:1;min-width:0;border:1px solid var(--line);border-radius:18px;padding:12px 4px;text-align:center;background:#fff;box-shadow:0 3px 0 #f3f5ef}.card small{display:block;color:var(--soft);font-size:10px}.card strong{display:block;margin-top:5px;font-size:20px}input,select{width:100%;min-width:0;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}.row select{flex:1}.stage{position:relative;overflow:hidden;border:4px solid #fff;border-radius:26px;box-shadow:0 0 0 1px var(--line),0 8px 25px #607e3810}.sky{min-height:112px;display:flex;align-items:center;justify-content:center;gap:18px;background:linear-gradient(#e5f3f4,#eef7e2);padding:14px}.avatar{position:relative;width:82px;height:82px;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:contain}.speech{max-width:230px;font-size:12px;line-height:1.9}.tears{display:none;position:absolute;inset:0;pointer-events:none}.cry .tears{display:block}.tears i{position:absolute;top:47%;width:9px;height:22px;border-radius:60% 60% 65% 65%;background:#80c6f1d9;box-shadow:inset 2px 0 #d1edff;animation:tear 1s infinite}.tears i:first-child{left:25%}.tears i:last-child{right:25%;animation-delay:.25s}.cry img{filter:saturate(.85)}@keyframes tear{0%{transform:translateY(0);opacity:1}100%{transform:translateY(21px);opacity:.15}}.garden{display:grid;grid-template-columns:repeat(3,1fr);gap:15px 10px;padding:25px 10px 22px;background:radial-gradient(circle at 20% 30%,#b5d18d 2px,transparent 3px),radial-gradient(circle at 70% 70%,#c1dba1 3px,transparent 4px),#d9eabd;background-size:41px 49px,67px 57px,auto;touch-action:none;user-select:none}.plot{position:relative;height:96px}.hole{position:absolute;bottom:3px;left:9%;width:82%;height:24px;border:5px solid #bdd39b;background:#927251;border-radius:50%;box-shadow:inset 0 4px 3px #75563755}.window{position:absolute;inset:-9px 0 14px;overflow:hidden;pointer-events:none}.crop{position:absolute;bottom:0;left:50%;width:84px;height:82px;display:flex;justify-content:center;align-items:center;transform:translate(-50%,115%);transition:transform .18s ease-out;pointer-events:auto;touch-action:none}.crop.risen{transform:translate(-50%,0)}.crop span{font-size:50px;pointer-events:none;filter:drop-shadow(0 3px 1px #41572c15)}.life{position:absolute;bottom:0;width:38px;height:4px;border-radius:8px;background:#ffffff88;overflow:hidden;pointer-events:none}.life i{display:block;height:100%;background:#79a85f;transform-origin:left}.urgent .life i{background:#cf8d7c}.overlay{position:absolute;inset:0;background:#f8fbf2f5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;z-index:3}.overlay .avatar{width:105px;height:105px}.overlay h2{font-size:23px;margin:17px 0 9px}.overlay p{font-size:12px;line-height:1.9;margin:3px 0}.primary{padding:13px 19px;background:var(--green);color:#fff;border-radius:16px;font-weight:800;box-shadow:0 4px 0 #557c4e}.secondary{padding:11px 16px;background:#fff;color:#72836a;border:1px solid var(--line);border-radius:14px}.overlay button{margin-top:13px;min-width:160px}.overlay .secondary{font-size:12px;min-width:auto}.feedback{position:absolute;top:103px;left:0;right:0;z-index:2;text-align:center;font-size:19px;font-weight:900;pointer-events:none;color:#658a4a;text-shadow:0 2px #fff;opacity:0}.feedback.show{opacity:1}.encouragement{flex:1;background:#f4f7ef;border-radius:16px;padding:13px 6px;text-align:center;font-size:12px;color:#8a9b7a}.pause{flex:0 0 42%;min-height:58px;background:#edf3e5;border:1px solid #d6e3c8;border-radius:17px;padding:16px 12px;color:#5c7750;font-size:15px;font-weight:800}.companion{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:#f8faf5}.companion small{font-size:10px;color:var(--soft)}.companion strong{font-size:13px}.mode-row select{flex:1} .actions{align-items:stretch}.actions .encouragement{display:flex;align-items:center;justify-content:center}.panel{border:1px solid var(--line);border-radius:22px;padding:18px;margin-top:20px}.panel h3{font-size:17px;margin:0 0 12px}.panel p{font-size:12px;line-height:1.9;color:var(--soft);white-space:pre-line}.panel button{width:100%;margin-top:10px}.roster{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(2px,1vw,7px);width:100%;min-width:0;padding:6px 0 10px}.friend{min-width:0;width:100%;padding:8px 1px;background:#fff;border:2px solid var(--line);border-radius:13px;color:var(--soft)}.friend img{display:block;width:100%;max-width:45px;height:auto;aspect-ratio:1;object-fit:contain;margin:auto}.friend small{display:block;min-width:0;font-size:clamp(7px,1.85vw,9px);letter-spacing:-.5px;line-height:1.4;white-space:nowrap;margin-top:5px}.friend.selected{border:2px solid #95b47d;background:#f6faef}.modal{position:fixed;inset:0;background:#3e4d3d70;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:30}.dialog{position:relative;background:#fff;width:100%;max-width:470px;border-radius:27px;padding:27px 20px;max-height:90vh;max-height:90dvh;overflow:auto;box-shadow:0 20px 70px #26321e30}.dialog h2{font-size:23px;text-align:center;margin:8px 0 15px}.close{position:absolute;right:11px;top:10px;border-radius:50%;width:32px;height:32px;background:#f0f4e9;color:#829075;font-size:21px}.rule{display:flex;gap:15px;align-items:center;background:#f6f8f1;border-radius:17px;padding:14px;margin-top:11px}.rule>span{font-size:32px}.rule strong{font-size:14px}.rule p{font-size:12px;line-height:1.8;color:var(--soft);margin:5px 0 0}.dialog>.primary,.dialog>.secondary{width:100%;margin-top:16px}.certificate-image{display:block;width:100%;height:auto;margin:17px 0;border-radius:16px;box-shadow:0 5px 20px #5c603c18;-webkit-touch-callout:default;user-select:auto}.tip,.status{text-align:center;font-size:12px;color:var(--soft);line-height:1.9}footer{text-align:center;color:#a0aa96;font-size:10px;line-height:1.9;margin:25px 0 5px}.hidden{display:none!important}.modal-open{overflow:hidden}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media(max-width:360px){.encouragement{font-size:10px}.garden{gap:12px 4px}h1{font-size:24px}}

/* 타이틀 강조 */
header h1{
  display:inline-block;
  position:relative;
  z-index:0;
  font-size:clamp(30px,7.5vw,40px);
  font-weight:900;
  line-height:1.3;
  letter-spacing:-1.5px;
  color:#35572f;
  padding:0 10px 5px;
  margin:13px 0 6px;
  text-shadow:0 2px 0 #fff;
}
header h1::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;right:0;bottom:3px;
  height:14px;
  border-radius:12px;
  background:#e2edcf;
}
/* 모바일: 터치하기 편한 4열 2줄 캐릭터 선택 */
@media(max-width:600px){
  .roster{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    padding:8px 0 12px;
  }
  .friend{
    min-height:94px;
    padding:10px 4px 8px;
    border-radius:16px;
  }
  .friend img{
    width:100%;
    max-width:58px;
    height:58px;
    aspect-ratio:1;
    object-fit:contain;
  }
  .friend small{
    font-size:12px;
    line-height:1.5;
    letter-spacing:-.5px;
    margin-top:6px;
  }
}


/* PC: 관리 화면과 게임 화면을 좌우로 배치 */
.workspace,.management,.play-area{min-width:0}
@media(min-width:1000px){
  .app{max-width:1280px;padding:28px 28px 24px}
  header{margin:0 0 24px}
  .workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
  .management{padding:0 24px 20px 0;border-right:1px solid var(--line)}
  .play-area{position:sticky;top:24px}
  .management>.row:first-child,.play-area>.row:first-child{margin-top:0}
  .management .panel{margin-top:18px}
  .play-area .garden{gap:22px 16px;padding:32px 16px 28px}
  .play-area .plot{height:112px}
  .play-area .sky{min-height:124px}
  .play-area .crop{width:94px;height:94px}
  .play-area .crop span{font-size:58px}
  .play-area .feedback{top:116px}
}
/* 모바일과 태블릿에서는 캐릭터 선택 → 게임 → 자격증 순서 유지 */
@media(max-width:999px){
  .workspace,.management{display:contents}
  .management>.row:first-child{order:1}
  .management>.roster{order:2}
  .management>.mode-row{order:3}
  .play-area{order:4}
  .management>.panel{order:5}
  .app{display:flex;flex-direction:column}
  .app>header{order:0}
  .app>footer{order:6}
}


/* 영문 문구와 한글 제목을 각각 한 줄로 표시 */
header small{display:block}
header h1{display:table;margin:13px auto 6px}
/* 모든 화면에서 캐릭터 4개씩 두 줄 */
.roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:8px 0 12px}
.friend{min-height:94px;padding:10px 4px 8px;border-radius:16px}
.friend img{width:100%;max-width:58px;height:58px;object-fit:contain}
.friend small{font-size:12px;line-height:1.5;letter-spacing:-.5px;margin-top:6px}


/* PC 화면 높이에 맞춘 한 화면 구성 */
@media(min-width:1000px){
  .app{height:100vh;height:100dvh;min-height:570px;max-width:1320px;padding:14px 24px 10px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}
  .app>header{margin:0}
  header small{font-size:10px;line-height:1.4}
  header h1{font-size:32px;margin:6px auto 0;padding-bottom:3px;line-height:1.2}
  header p{margin:5px 0 0;font-size:11px}
  .workspace{height:100%;min-height:0;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px;align-items:stretch}
  .management{min-height:0;padding:0 20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto minmax(0,1fr);gap:10px;align-content:start}
  .management>.row,.management>.roster{grid-column:1/-1;margin:0}
  .management>.roster{padding:0;gap:7px}
  .friend{min-height:68px;padding:6px 3px;border-radius:13px}
  .friend img{max-width:43px;height:43px}
  .friend small{font-size:11px;line-height:1.3;margin-top:3px}
  .management .card,.play-area .card{padding:8px 4px;border-radius:14px}
  .card strong{font-size:19px;margin-top:3px}
  .management .mode-row select,.companion{padding:8px 10px}
  .management>.panel{margin:0;padding:12px;min-width:0;align-self:start}
  .management .panel h3{font-size:14px;margin:0 0 8px}
  .management .panel p{font-size:11px;line-height:1.65;margin:7px 0;overflow-wrap:anywhere}
  .management .panel button{font-size:12px;padding:11px 5px;line-height:1.5;margin-top:8px}
  .management .panel input{font-size:11px;padding:10px 8px}
  .management .panel p:empty{display:none}
  .play-area{position:static;min-height:0;display:flex;flex-direction:column;gap:10px}
  .play-area>.row{margin:0;flex-shrink:0}
  .play-area .stage{flex:1;min-height:0;display:flex;flex-direction:column}
  .play-area .sky{min-height:0;height:clamp(72px,12vh,112px);flex-shrink:0;padding:9px 14px}
  .play-area .sky .avatar{width:68px;height:68px}
  .play-area .garden{flex:1;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));gap:10px 16px;padding:16px 14px}
  .play-area .plot{height:auto;min-height:0}
  .play-area .crop{height:clamp(57px,11vh,94px);width:94px}
  .play-area .crop span{font-size:clamp(39px,7vh,58px)}
  .play-area .feedback{top:clamp(65px,11vh,103px)}
  .play-area .actions{min-height:54px}
  .play-area .pause{min-height:54px;padding:13px 12px}
  .play-area .encouragement{padding:9px 6px}
  .app>footer{margin:0;font-size:9px;line-height:1.4}
}
@media(min-width:1000px) and (max-height:650px){
  .app{gap:8px;padding-top:10px}
  header p{display:none}
  header h1{font-size:29px}
  .management{gap:7px}
  .friend{min-height:58px;padding:4px 3px}
  .friend img{max-width:35px;height:35px}
  .management>.panel{padding:10px}
  .management .panel p{margin:5px 0;line-height:1.5}
  .play-area .sky{height:70px}
}


/* PC 관리 영역: 남는 높이를 활용해 읽기와 조작 크기 확대 */
@media(min-width:1000px) and (min-height:700px){
  .management{grid-template-rows:auto auto auto minmax(0,1fr);gap:12px}
  .management .companion{padding:12px 14px;gap:5px}
  .management .companion small{font-size:12px}
  .management .companion strong{font-size:16px;line-height:1.5}
  .management .mode-row select{font-size:16px;padding:12px 14px}
  .management>.panel{align-self:stretch;padding:18px 16px;border-radius:22px;display:flex;flex-direction:column}
  .management .panel h3{font-size:18px;line-height:1.5;margin:0 0 12px}
  .management .panel p{font-size:14px;line-height:1.85;margin:8px 0}
  .management .panel input{font-size:14px;padding:13px 11px;min-height:47px}
  .management .panel button{font-size:15px;min-height:51px;line-height:1.5;padding:13px 8px;margin-top:12px}
  .management #best{font-size:12px;line-height:1.8;margin:13px 0 0}
  .management #certificateInfo{margin-bottom:15px}
}
@media(min-width:1000px) and (min-height:850px){
  .management .panel h3{font-size:20px}
  .management .panel p{font-size:15px}
  .management .panel button{font-size:16px;min-height:56px}
  .management #best{font-size:13px}
}


@media(min-width:1000px) and (min-height:700px) and (max-height:849px){
  .management{gap:10px}
  .management .companion{padding:10px 12px}
  .management>.panel{padding:14px 12px}
  .management .panel h3{font-size:17px;margin-bottom:8px}
  .management .panel p{font-size:13px;line-height:1.65;margin:6px 0}
  .management .panel input{font-size:13px;min-height:42px;padding:10px}
  .management .panel button{font-size:14px;min-height:45px;padding:10px 5px;margin-top:9px}
  .management #best{font-size:11px;line-height:1.6;margin-top:9px}
  .management #certificateInfo{margin-bottom:10px}
}


/* 최고 기록: 제목과 기록을 분리해 두 줄로 표시 */
#best .best-title{display:block;font-size:12px;font-weight:800;color:#6c7d60;margin-bottom:6px}
#best .best-scores{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:12px;line-height:1.6;color:#52694b}
#best .best-scores>span{white-space:nowrap}
/* 상태 카드와 제목의 시각적 여유 */
.card{padding:15px 5px;border-radius:18px}
.card small{font-size:12px;line-height:1.5}
.card strong{font-size:24px;line-height:1.35;margin-top:5px}
header{padding:8px 0 10px}
header h1{margin:14px auto 10px;line-height:1.35}
@media(min-width:1000px){
  .app{gap:14px}
  .app>header{padding:10px 0 12px}
  header small{line-height:1.6;letter-spacing:2px}
  header h1{margin:10px auto 8px;line-height:1.3;font-size:36px}
  header p{margin:6px 0 0}
  .management .card,.play-area .card{padding:15px 5px;border-radius:17px}
  .management .card small,.play-area .card small{font-size:12px;line-height:1.5}
  .management .card strong,.play-area .card strong{font-size:27px;line-height:1.3;margin-top:5px}
  .management #best{margin-top:12px}
  .management #best .best-title{font-size:13px}
  .management #best .best-scores{font-size:13px;gap:4px 10px}
}
@media(min-width:1000px) and (min-height:850px){
  .app>header{padding:16px 0 18px}
  header h1{font-size:40px;margin:13px auto 11px}
  .management .card,.play-area .card{padding:20px 6px}
  .management .card strong,.play-area .card strong{font-size:30px}
}
@media(min-width:1000px) and (max-height:749px){
  .app{gap:9px}
  .app>header{padding:4px 0 6px}
  header h1{font-size:31px;margin:7px auto 5px}
  .management .card,.play-area .card{padding:11px 5px}
  .management .card strong,.play-area .card strong{font-size:24px}
  .management #best .best-title,.management #best .best-scores{font-size:11px}
}


#certificateInfo .certificate-badge{display:table;background:#edf4e5;color:#54734a;border:1px solid #deead1;border-radius:10px;padding:6px 10px;font-size:13px;line-height:1.5;font-weight:800}
#certificateInfo .certificate-hint{display:block;margin-top:8px;font-size:12px;line-height:1.65;color:#89957e;word-break:keep-all}
@media(min-width:1000px) and (min-height:850px){
 #certificateInfo .certificate-badge{font-size:15px;padding:7px 12px}
 #certificateInfo .certificate-hint{font-size:13px}
}

/* 모바일 자격증 안내도 등급 배지 + 저장 안내 두 줄로 통일 */
@media(max-width:999px){
  #certificateInfo{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:12px 0 16px;white-space:normal}
  #certificateInfo .certificate-badge{display:inline-block;font-size:14px;line-height:1.5;padding:7px 12px;border-radius:11px}
  #certificateInfo .certificate-hint{display:block;margin:0;font-size:13px;line-height:1.7;word-break:keep-all}
}


/* PC 상태 카드 크기를 한 단계 작게 조정 */
@media(min-width:1000px){
  .management .card,.play-area .card{padding:12px 5px;border-radius:16px}
  .management .card small,.play-area .card small{font-size:11px;line-height:1.5}
  .management .card strong,.play-area .card strong{font-size:24px;line-height:1.3;margin-top:4px}
}
@media(min-width:1000px) and (min-height:850px){
  .management .card,.play-area .card{padding:15px 6px}
  .management .card strong,.play-area .card strong{font-size:26px}
}
@media(min-width:1000px) and (max-height:749px){
  .management .card,.play-area .card{padding:9px 5px}
  .management .card strong,.play-area .card strong{font-size:22px}
}


/* 게임창 안 상태 표시와 상단 콤보 연출 */
.game-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex-shrink:0;background:#fffef9;border-bottom:1px solid #e0e9d5;padding:12px 10px;gap:6px}
.hud-stat{text-align:center;border-right:1px solid #e5eadf}
.hud-stat:last-child{border:0}
.hud-stat small{display:block;font-size:11px;line-height:1.5;color:#8a977c}
.hud-stat strong{display:block;margin-top:4px;font-size:24px;line-height:1.3;color:#45673a;font-variant-numeric:tabular-nums}
.hud-stat em{font-size:12px;font-style:normal;margin-left:3px}
.stage{position:relative}
.combo-effect{position:absolute;top:92px;left:50%;z-index:4;display:flex;align-items:baseline;gap:8px;transform:translateX(-50%);padding:6px 18px;border-radius:30px;background:#fff9dbea;box-shadow:0 4px 16px #82702620;color:#c68b31;opacity:0;pointer-events:none;white-space:nowrap}
.combo-effect small{font-size:18px;font-weight:900;font-style:italic;letter-spacing:1px}
.combo-effect strong{font-size:32px;font-weight:900;line-height:1.2}
.combo-effect.active{animation:combo-pop 1s both}
.combo-effect.milestone{background:#ffedb8;color:#c47a20}
@keyframes combo-pop{0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.6)}18%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.12)}35%,75%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-9px) scale(.98)}}
.crop .direction{position:absolute;right:0;top:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#fffdf4;color:#648247;border:2px solid #9cb784;border-radius:50%;font-size:23px;line-height:1;box-shadow:0 2px 4px #546b3720;pointer-events:none}
.direction.up{animation:point-up .7s ease-in-out infinite}
.direction.left{animation:point-left .7s ease-in-out infinite}
.direction.right{animation:point-right .7s ease-in-out infinite}
@keyframes point-up{50%{translate:0 -5px}}
@keyframes point-left{50%{translate:-5px 0}}
@keyframes point-right{50%{translate:5px 0}}
.harvest-effect{position:absolute;bottom:5px;left:50%;z-index:2;pointer-events:none;display:flex;align-items:center;gap:4px;animation:harvest-up .5s ease-out both}
.harvest-effect span{font-size:35px}
.harvest-effect b{font-size:17px;color:#497b35;text-shadow:0 2px #fff;white-space:nowrap}
.harvest-effect.down{animation-name:harvest-down}
.harvest-effect.left{animation-name:harvest-left}
.harvest-effect.right{animation-name:harvest-right}
@keyframes harvest-up{from{opacity:1;transform:translate(-50%,0) scale(1)}to{opacity:0;transform:translate(-50%,-65px) scale(1.2)}}
@keyframes harvest-down{from{opacity:1;transform:translate(-50%,0) scale(1)}to{opacity:0;transform:translate(-50%,45px) scale(.8)}}
@keyframes harvest-left{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-120%,-35px)}}
@keyframes harvest-right{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(30%,-35px)}}
.first-guide span{display:block;margin:7px 0}
.first-guide b{color:#5a7f43}
.overlay .first-guide{font-size:12px;line-height:1.65}
.play-area .feedback{top:auto;bottom:12px;z-index:2;font-size:16px}
@media(min-width:1000px){
 .game-hud{padding:13px 12px}
 .hud-stat strong{font-size:25px}
 .play-area .combo-effect{top:92px}
 .play-area .sky{height:clamp(64px,10vh,90px)}
 .play-area .sky .avatar{width:60px;height:60px}
 .overlay .avatar{width:78px;height:78px}
 .overlay h2{margin:10px 0 6px;font-size:21px}
 .overlay .first-guide span{margin:5px 0}
}
@media(prefers-reduced-motion:reduce){
 .combo-effect.active{animation:none;opacity:1}
 .direction.up,.direction.left,.direction.right{animation:none}
 .harvest-effect{animation:none;opacity:1}
}


/* キャラクター → 点数 → 畑。コンボは畑の右上に控えめに表示 */
.stage{display:flex;flex-direction:column}
.game-hud{border-top:1px solid #e0e9d5;border-bottom:1px solid #d7e3c9}
.sky{flex-shrink:0}
.combo-effect,.play-area .combo-effect{left:auto;right:12px;top:208px;transform:none;padding:5px 12px;gap:6px;box-shadow:0 3px 10px #82702618;max-width:calc(100% - 24px)}
.combo-effect small{font-size:15px}
.combo-effect strong{font-size:26px}
@keyframes combo-pop{0%{opacity:0;transform:translateY(7px) scale(.7)}18%{opacity:1;transform:translateY(0) scale(1.08)}35%,75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-6px) scale(.98)}}
.direction.down{animation:point-down .7s ease-in-out infinite}
@keyframes point-down{50%{translate:0 5px}}
@media(min-width:1000px){
 .play-area .combo-effect{top:calc(clamp(64px,10vh,90px) + 95px);right:14px}
}
@media(prefers-reduced-motion:reduce){.direction.down{animation:none}}


.garden{position:relative}
.garden .combo-effect,.play-area .garden .combo-effect{top:7px;right:10px;left:auto}

/* 타원형 배경 대신 강한 타이포그래피. 밭과 분리해 대상을 가리지 않음 */
.combo-lane{position:relative;flex:0 0 44px;height:44px;background:#d9eabd;overflow:hidden;isolation:isolate}
.combo-lane .combo-effect,.play-area .combo-lane .combo-effect{
 position:absolute;top:3px;right:16px;left:auto;max-width:none;
 padding:0;gap:7px;border:0;border-radius:0;background:none;
 box-shadow:none;transform:none;align-items:center;line-height:1;
 color:#ffb42b;filter:drop-shadow(2px 3px 0 #496034);
}
.combo-lane .combo-effect small{
 font-family:Impact,"Arial Black",sans-serif;font-size:27px;
 line-height:1;letter-spacing:1px;font-weight:900;font-style:italic;
 -webkit-text-stroke:1px #70462c;
 paint-order:stroke fill;text-shadow:1px 1px 0 #fff5be;
}
.combo-lane .combo-effect strong{
 font-family:Impact,"Arial Black",sans-serif;font-size:35px;
 line-height:1;font-weight:900;color:#fff6c2;
 -webkit-text-stroke:1px #70462c;paint-order:stroke fill;
}
.combo-lane .combo-effect.milestone{background:none;color:#ff7e32;filter:drop-shadow(2px 3px 0 #673e27)}
.combo-lane .combo-effect.milestone strong{color:#ffe158}
.combo-effect.active{animation:combo-impact 1s both}
@keyframes combo-impact{
 0%{opacity:0;transform:translateX(12px) scale(.45) rotate(-8deg)}
 12%{opacity:1;transform:translateX(-3px) scale(1.13) rotate(-4deg)}
 21%{opacity:1;transform:translateX(2px) scale(.98) rotate(1deg)}
 31%,76%{opacity:1;transform:translateX(0) scale(1) rotate(-3deg)}
 100%{opacity:0;transform:translateY(-7px) scale(1.03) rotate(-3deg)}
}
@media(max-width:999px){
 .sky{min-height:76px;height:76px;padding:9px 14px;gap:13px}
 .sky .avatar{width:54px;height:54px}
 .sky .speech{font-size:11px;line-height:1.75;max-width:230px}
 .sky .tears i{width:6px;height:15px}
 .combo-lane{flex-basis:34px;height:34px}
 .combo-lane .combo-effect,.play-area .combo-lane .combo-effect{top:4px;right:13px;gap:5px;filter:drop-shadow(1px 2px 0 #496034)}
 .combo-lane .combo-effect small{font-size:20px;letter-spacing:.6px;-webkit-text-stroke:.8px #70462c}
 .combo-lane .combo-effect strong{font-size:25px;-webkit-text-stroke:.8px #70462c}
}
@media(prefers-reduced-motion:reduce){.combo-effect.active{animation:none;opacity:1;transform:rotate(-3deg)}}


/* 위험 생물 접촉 시 눈에 띄는 감점 */
.harvest-effect.penalty{z-index:6;animation:penalty-hit .65s ease-out both;gap:6px}
.harvest-effect.penalty span{font-size:29px}
.harvest-effect.penalty b{font-family:Impact,"Arial Black",sans-serif;font-size:32px;font-weight:900;color:#ed4f56;-webkit-text-stroke:1px #fff;paint-order:stroke fill;text-shadow:2px 2px 0 #7d292b}
@keyframes penalty-hit{0%{opacity:0;transform:translate(-50%,0) scale(.6)}18%{opacity:1;transform:translate(-50%,-10px) scale(1.25) rotate(-5deg)}38%{opacity:1;transform:translate(-50%,-19px) scale(1)}100%{opacity:0;transform:translate(-50%,-52px) scale(1)}}
@media(max-width:999px){.harvest-effect.penalty b{font-size:28px}}
@media(prefers-reduced-motion:reduce){.harvest-effect.penalty{animation:none;opacity:1}}


/* 게임 중 피드백은 밭과 분리되는 진한 안내 배경으로 표시 */
.play-area .feedback{
 left:12px;right:12px;bottom:10px;top:auto;
 width:fit-content;max-width:calc(100% - 24px);margin:0 auto;
 padding:9px 15px;border-radius:12px;
 background:rgba(39,62,32,.94);border:1px solid rgba(255,255,255,.45);
 color:#fff!important;font-size:14px;font-weight:800;
 line-height:1.55;text-shadow:none;
 box-shadow:0 3px 12px #273d2425;z-index:2;
 word-break:keep-all;
}
.actions .encouragement{color:#526b45;background:#edf3e4;font-weight:800}
@media(max-width:999px){
 .play-area .feedback{font-size:12px;padding:8px 12px;bottom:8px}
 .actions .encouragement{font-size:11px}
}


/* 게임 중 하단 알림 문구 완전히 숨김 */


/* 게임 밖, 일시정지 버튼 옆의 고정 공간에서만 알림 표시 */
.actions .feedback-slot{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:54px;padding:9px 10px;overflow:hidden}
.actions #feedback{
 display:none;position:static;inset:auto;width:auto;max-width:100%;margin:0;
 padding:0;border:0;border-radius:0;background:none;box-shadow:none;
 color:#45653b!important;font-size:13px;line-height:1.6;font-weight:800;
 text-shadow:none;opacity:1;pointer-events:none;word-break:keep-all;
}
.actions #feedback.show{display:block;animation:status-appear .18s ease-out}
@keyframes status-appear{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:999px){.actions #feedback{font-size:11px}.actions .feedback-slot{padding:8px}}
@media(prefers-reduced-motion:reduce){.actions #feedback.show{animation:none}}


/* 게임 밖 알림 글자 확대 */
.actions #feedback{font-size:15px;line-height:1.55}
@media(max-width:999px){
 .actions #feedback{font-size:13px;line-height:1.55}
 .actions .feedback-slot{padding:8px 6px}
}


/* 기본 응원 문구와 알림 문구 크기 통일 */
.actions #encouragementDefault{font-size:15px;line-height:1.55}
@media(max-width:999px){.actions #encouragementDefault{font-size:13px;line-height:1.55}}

/* 게임창 내부 일시정지 버튼과 블러 화면 */
.pause-icon{position:absolute;top:13px;right:13px;z-index:5;width:43px;height:43px;display:flex;align-items:center;justify-content:center;border:1px solid #d7e4cc;border-radius:14px;background:#fffffff0;color:#5d7d4c;box-shadow:0 3px 10px #4f6d2d12}
.pause-icon:hover{background:#edf5e5}
.sky{padding-right:65px}
.pause-screen{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:rgba(245,249,238,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);padding:22px}
.pause-card{text-align:center;width:100%;max-width:285px;border:1px solid #ffffffb0;background:#ffffffd9;border-radius:26px;padding:28px 20px;box-shadow:0 12px 35px #58713b18}
.pause-symbol{display:inline-flex;align-items:center;justify-content:center;width:55px;height:55px;border-radius:50%;background:#e9f2df;color:#6a8b53;font-size:28px;font-weight:900}
.pause-card h2{font-size:22px;color:#4f6a40;margin:16px 0 7px}
.pause-card p{font-size:12px;line-height:1.8;color:#859477;margin:0 0 22px}
.pause-card button{width:100%;min-height:48px}
.is-paused .sky,.is-paused .game-hud,.is-paused .combo-lane,.is-paused .garden{filter:blur(3px)}
.is-paused .garden *,.is-paused .combo-effect{animation-play-state:paused!important;transition:none!important}
@media(min-width:1000px){.play-area .sky{padding-right:65px}}
@media(max-width:999px){.pause-icon{width:38px;height:38px;top:12px;right:11px;border-radius:12px}.sky{padding-right:58px}.pause-card{max-width:265px;padding:24px 18px}}


/* 일시정지 버튼과 아이콘 확대 */
.pause-icon{width:58px;height:58px;top:14px;right:14px;border-radius:17px;border:2px solid #c5d7b6;background:#fff;box-shadow:0 4px 12px #4f6d2d20}
.pause-icon svg{width:28px;height:30px}
.sky{padding-right:87px}
@media(min-width:1000px){.play-area .sky{padding-right:87px}}
@media(max-width:999px){
 .pause-icon{width:50px;height:50px;top:13px;right:12px;border-radius:15px}
 .pause-icon svg{width:25px;height:27px}
 .sky{padding-right:76px}
}


/* 선택한 캐릭터 이미지와 땀방울 모션 */
.pause-avatar{position:relative;width:148px;height:134px;margin:0 auto 8px;isolation:isolate}
.pause-avatar img{position:absolute;left:16px;top:6px;width:116px;height:116px;object-fit:contain;animation:rest-breath 2.4s ease-in-out infinite}
.pause-avatar .rest-shadow{position:absolute;z-index:-1;bottom:5px;left:28px;width:92px;height:13px;background:#dee8cf;border-radius:50%;opacity:.7}
.sweat-drop{position:absolute;z-index:2;top:40px;width:12px;height:21px;background:linear-gradient(120deg,#c3eeff,#73bce9);border:1px solid #70b4df;border-radius:75% 15% 65% 65%;transform:rotate(-18deg);box-shadow:inset 2px 1px 0 #e6faff;pointer-events:none;animation:sweat-rest 1.8s ease-in infinite}
.sweat-left{left:29px}
.sweat-right{right:25px;top:48px;animation-delay:.75s}
.pause-avatar[data-character="usagi"] .sweat-left{top:66px}
.pause-avatar[data-character="usagi"] .sweat-right{top:70px}
.pause-avatar[data-character="kani"] .sweat-left{top:58px}
.pause-avatar[data-character="kani"] .sweat-right{top:60px}
@keyframes rest-breath{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes sweat-rest{0%{opacity:0;translate:0 -5px;scale:.8}20%{opacity:1;scale:1}80%{opacity:1}100%{opacity:0;translate:0 15px;scale:.8}}
.pause-card{max-width:310px;padding:22px 22px 25px}
.pause-card h2{margin:9px 0 7px}
@media(max-width:999px){
 .pause-card{max-width:280px;padding:18px 18px 22px}
 .pause-avatar{width:132px;height:119px}
 .pause-avatar img{left:14px;top:5px;width:104px;height:104px}
 .pause-avatar .rest-shadow{left:24px;bottom:3px;width:84px}
 .sweat-left{left:25px}.sweat-right{right:22px}
 .sweat-drop{width:11px;height:19px}
 .pause-avatar[data-character="usagi"] .sweat-left{top:58px}
 .pause-avatar[data-character="usagi"] .sweat-right{top:62px}
 .pause-avatar[data-character="kani"] .sweat-left{top:51px}
 .pause-avatar[data-character="kani"] .sweat-right{top:54px}
}
@media(min-width:1000px) and (max-height:700px){
 .pause-card{padding:14px 18px 20px}
 .pause-avatar{height:103px}
 .pause-avatar img{width:94px;height:94px;left:27px;top:0}
 .pause-avatar .rest-shadow{bottom:0}
 .pause-card h2{font-size:20px}
 .pause-card p{margin-bottom:15px}
}
@media(prefers-reduced-motion:reduce){.pause-avatar img,.sweat-drop{animation:none}.sweat-drop{opacity:1}}


/* 게임 전용 헤더: 모든 메뉴를 접기 없이 노출 */
.game-site-header{position:relative;z-index:20;margin:0;padding:0;text-align:left;background:#fffefb;border-bottom:1px solid #e3ecd9}
.game-header-inner{width:100%;max-width:1320px;min-height:76px;margin:auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.game-header-brand{flex-shrink:0;display:flex;align-items:center;gap:8px;color:#63834f;font-size:17px;font-weight:900;letter-spacing:-.5px;text-decoration:none;white-space:nowrap;line-height:1.5}
.game-header-brand>span{font-size:24px}
.game-site-nav{display:flex;align-items:center;gap:6px;min-width:0}
.game-site-nav a{display:flex;align-items:center;justify-content:center;min-height:42px;padding:10px 13px;border:1px solid #e3ecd8;border-radius:15px;background:#f4f8ed;text-decoration:none;color:#667b56;font-size:13px;font-weight:800;line-height:1.5;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.game-site-nav a:hover,.game-site-nav a:focus-visible{background:#e7f0db;border-color:#b7cda2;color:#456935}
.game-site-header a:focus-visible{outline:3px solid #aecb91;outline-offset:3px}
@media(min-width:1000px){
 .app{height:calc(100vh - 76px);height:calc(100dvh - 76px)}
}
@media(max-width:999px){
 .game-header-inner{min-height:0;flex-direction:column;padding:16px 20px;gap:12px}
 .game-header-brand{font-size:17px}
 .game-site-nav{display:grid;width:100%;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
 .game-site-nav a{min-width:0;white-space:normal;word-break:keep-all;text-align:center;padding:10px 6px;font-size:12px;border-radius:13px}
}
@media(max-width:600px){
 .game-header-inner{padding:14px 16px;gap:10px}
 .game-site-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 .game-site-nav a{font-size:13px;min-height:42px;padding:9px 7px}
 .game-site-nav a:last-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.game-site-nav a{transition:none}}


/* PC 사이트 헤더 확대, 모바일은 기존 크기 유지 */
@media(min-width:1000px){
 .game-header-inner{max-width:1400px;min-height:88px;padding:16px 24px;gap:20px}
 .game-header-brand{font-size:22px;line-height:1.5}
 .game-header-brand>span{font-size:28px}
 .game-site-nav{gap:5px}
 .game-site-nav a{font-size:16px;font-weight:800;min-height:46px;line-height:1.5;padding:11px 12px}
 .app{height:calc(100vh - 88px);height:calc(100dvh - 88px)}
}


/* 모바일 게임 페이지 메뉴 접기/펼치기 */
.game-menu-toggle{display:none;align-items:center;justify-content:center;gap:7px;min-height:43px;padding:8px 13px;border:1px solid #d6e4c7;border-radius:14px;background:#f3f8ec;color:#63804f;font:inherit;font-size:13px;font-weight:750;cursor:pointer}
.game-menu-toggle>span:first-child{font-size:22px;line-height:1}
.game-menu-toggle:focus-visible{outline:3px solid #aecb91;outline-offset:3px}
@media(max-width:999px){
 .game-header-inner{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:10px;min-height:74px;padding:12px 18px}
 .game-menu-toggle{display:inline-flex}
 .game-site-nav{display:none;flex:0 0 100%;width:100%;padding:8px 0 3px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:calc(100dvh - 108px);overflow-y:auto}
 .game-site-nav.is-open{display:grid}
 .game-site-nav a{font-size:13px;min-height:44px;padding:10px 7px}
 .game-site-nav a:last-child{grid-column:1/-1}
}
@media(max-width:380px){.game-header-inner{padding:11px 14px}.game-header-brand{font-size:15px;gap:5px}.game-header-brand>span{font-size:21px}.game-menu-toggle{padding:8px 10px}}



.time-stat{position:relative;isolation:isolate}
.time-stat strong{position:relative}
.time-penalty-effect{position:absolute;left:50%;top:0;z-index:5;pointer-events:none;opacity:0;white-space:nowrap;color:#dc344e;font-size:30px;font-weight:1000;line-height:1;text-shadow:0 2px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff;transform:translate(-50%,0) scale(.5)}
.time-stat.time-hit{animation:timeHit .55s ease-out}
.time-hit #time{display:inline-block;color:#d82f49;animation:timeNumber .45s ease-out}
.time-hit .time-penalty-effect{animation:timePenaltyPop .75s ease-out both}
@keyframes timeHit{0%,30%{background:#ffe0e6;box-shadow:inset 0 0 0 2px #ec6077,0 0 16px #ed607750}12%{transform:translateX(-4px)}24%{transform:translateX(4px)}36%{transform:translateX(-2px)}55%,100%{transform:translateX(0)}100%{box-shadow:none}}
@keyframes timeNumber{0%{transform:scale(1.4)}55%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes timePenaltyPop{0%{opacity:0;transform:translate(-50%,8px) scale(.5)}18%{opacity:1;transform:translate(-50%,-10px) scale(1.18)}38%{opacity:1;transform:translate(-50%,-14px) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-35px) scale(.95)}}
@media(max-width:600px){.time-penalty-effect{font-size:24px}}
@media(prefers-reduced-motion:reduce){.time-stat.time-hit{animation:none;background:#ffe0e6;box-shadow:inset 0 0 0 2px #ec6077}.time-hit #time{animation:none}.time-hit .time-penalty-effect{animation:none;opacity:1;transform:translate(-50%,-12px)}}