/* Clay Peaks — claymation TriPeaks solitaire (teal felt / brass / cream) */
@font-face{font-family:"Lilita";src:url("fonts/lilita.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url("fonts/fredoka.woff") format("woff");font-weight:600;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --felt:#1f7a74;--felt-d:#0f3f3c;--deep:#0b2e2c;--brass:#c99a3e;--brass-l:#e3bf62;--brass-d:#8a6420;--cream:#f3e6c9;--cream-d:#e2cfa6;
  --ink:#26343f;--muted:#5d6b6a;--red:#c9473b;--petrol:#22577a;--mint:#7fc8a9;
  --head:"Lilita","Fredoka",system-ui,sans-serif;--body:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
}
html,body{height:100%;overflow:hidden;background:var(--felt-d);color:var(--ink);font-family:var(--body);font-weight:600;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#app{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;background:#17635f}
#game{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
button{font-family:inherit}
.hidden{display:none!important}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
  background:rgba(6,32,30,.55);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:10;overflow-y:auto}
.screen.active{opacity:1;pointer-events:auto}
.panel{width:min(392px,100%);margin:auto;padding:16px 18px 14px;text-align:center;background:var(--cream);
  border-radius:26px 30px 24px 28px/28px 24px 30px 26px;
  box-shadow:inset 0 -6px 0 rgba(160,128,70,.25),inset 0 4px 0 rgba(255,255,255,.6),0 8px 0 #b89a62,0 18px 34px rgba(0,0,0,.4);
  background-image:radial-gradient(circle at 20% 15%,rgba(255,255,255,.35),transparent 40%),radial-gradient(circle at 80% 90%,rgba(170,130,60,.12),transparent 45%)}
.panel.small{width:min(300px,100%)}
.panel.wide{width:min(500px,100%)}
.lang-picker{display:flex;gap:8px;justify-content:center;margin-bottom:4px}
.lang-btn{min-width:48px;min-height:34px;border:0;border-radius:14px;background:#fff8e8;color:var(--muted);font-family:var(--head);font-size:15px;cursor:pointer;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 3px 0 var(--cream-d)}
.lang-btn.active{background:var(--felt);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),0 3px 0 var(--felt-d)}
.mascot{display:block;margin:2px auto -6px;width:112px;height:112px;animation:bob 1.6s steps(8) infinite}
.mascot.small{width:88px;height:88px;margin-bottom:-4px}
@keyframes bob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-5px) scale(.97,1.04)}}
.badge{font-family:var(--head);font-size:13px;letter-spacing:.12em;color:var(--brass-d);margin-top:6px}
h1{font-family:var(--head);font-weight:400;font-size:54px;line-height:.95;color:var(--felt);margin:2px 0 6px;
  text-shadow:0 3px 0 var(--felt-d),0 6px 10px rgba(0,0,0,.18)}
h1 span{color:var(--brass)}
h2{font-family:var(--head);font-weight:400;font-size:32px;color:var(--felt);margin-bottom:4px;text-shadow:0 2px 0 var(--felt-d)}
.tagline{color:var(--muted);font-size:15px;margin-bottom:4px;line-height:1.25}
.ver{display:inline-block;font-size:11px;color:var(--brass-d);border:2px solid var(--brass);border-radius:10px;padding:0 7px;margin-bottom:6px}
.howto{text-align:left;font-size:13.5px;line-height:1.3;color:var(--ink);margin:4px 0 10px 18px}
.howto li{margin:3px 0}
.btn{display:block;width:100%;min-height:48px;margin:8px 0;border:0;border-radius:18px 20px 17px 21px;cursor:pointer;font-family:var(--head);font-size:20px;
  text-decoration:none;line-height:48px;transition:transform .08s}
.btn:active{transform:translateY(3px)}
.btn-play{background:var(--brass-l);color:#3d2a07;box-shadow:inset 0 -5px 0 var(--brass),inset 0 3px 0 rgba(255,255,255,.45),0 5px 0 var(--brass-d)}
.btn-alt{background:var(--felt);color:#fff;font-size:17px;box-shadow:inset 0 -5px 0 #165a55,inset 0 3px 0 rgba(255,255,255,.2),0 5px 0 var(--felt-d)}
.btn-ghost{background:#fff8e8;color:var(--ink);font-size:16px;min-height:40px;line-height:40px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08),0 4px 0 var(--cream-d)}
.btn-tip{background:var(--red);color:#fff;font-size:15px;min-height:38px;line-height:38px;box-shadow:inset 0 -4px 0 #9d3027,0 4px 0 #7a241d}
.btn-pair{display:flex;gap:8px}
.btn-pair .btn{flex:1}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.25}
.keys{font-size:11.5px}
.studio{font-family:var(--head);font-size:12px;color:var(--brass-d);margin-top:6px;letter-spacing:.1em}
.deal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:6px 0 4px}
.deal-grid h3{grid-column:1/-1;font-family:var(--head);font-weight:400;font-size:15px;color:var(--brass-d);text-align:left;margin-top:6px}
.deal-btn{min-height:54px;border:0;border-radius:12px 14px 11px 13px;background:#fffaf0;color:var(--ink);font-family:var(--head);font-size:19px;cursor:pointer;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.1),0 3px 0 var(--cream-d);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.deal-btn small{font-family:var(--body);font-size:11px;color:var(--brass);letter-spacing:1px;margin-top:3px}
.deal-btn.done{background:#e9f4ef}
.deal-btn.cur{outline:3px solid var(--brass-l)}
.deal-btn:disabled{opacity:.45;cursor:default}
.stars-big{display:flex;justify-content:center;gap:6px;min-height:58px;margin:2px 0}
.stars-big img{width:56px;height:56px;transform:scale(0);animation:pop .45s cubic-bezier(.3,1.6,.5,1) forwards}
.stars-big img:nth-child(2){animation-delay:.18s}.stars-big img:nth-child(3){animation-delay:.36s}
@keyframes pop{to{transform:scale(1)}}
.result{font-family:var(--head);font-size:44px;color:var(--felt);line-height:1.1}
.result-sub{font-size:15px;color:var(--ink)}
.result-sub.small{font-size:13px;color:var(--muted)}
.new-record{font-family:var(--head);color:var(--red);font-size:20px;animation:pulse .8s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}
.hud{position:absolute;left:0;right:0;top:0;z-index:5;padding:calc(6px + var(--safe-top)) 8px 0;pointer-events:none}
.hud-row{display:flex;align-items:center;gap:6px;max-width:760px;margin:0 auto}
.hud-block{flex:1;min-width:0;background:rgba(243,230,201,.95);border-radius:14px 16px 13px 15px;padding:3px 6px 4px;text-align:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1),0 3px 0 rgba(0,0,0,.25)}
.hud-label{display:block;font-size:10px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-block span:last-child{font-family:var(--head);font-size:19px;color:var(--ink);white-space:nowrap}
.hud-block.goal span:last-child{font-size:15px;color:var(--brass-d)}
.hud-block.streak.hot{background:var(--brass-l)}
.hud-block.streak.hot span:last-child{color:#5a3200}
.icon-btn{pointer-events:auto;width:44px;height:44px;flex:0 0 44px;border:0;border-radius:14px;background:var(--cream);color:var(--felt);font-size:16px;font-weight:700;cursor:pointer;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 3px 0 rgba(0,0,0,.25)}
.icon-btn.off{color:#9aa}
.coach{position:absolute;left:50%;transform:translateX(-50%);top:calc(64px + var(--safe-top));z-index:6;width:min(560px,calc(100% - 20px));
  display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;background:#fffaf0;color:var(--ink);font-size:14.5px;line-height:1.25;text-align:left;
  border-radius:18px 22px 18px 20px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08),0 4px 0 rgba(0,0,0,.25);pointer-events:none;animation:coachIn .3s ease}
.coach img{width:40px;height:40px;flex:0 0 40px}
@keyframes coachIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.tray-btn{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:64px;height:64px;border:0;
  border-radius:16px 18px 15px 17px;background:var(--cream);color:var(--felt);font-family:var(--head);font-size:12px;cursor:pointer;line-height:1.05;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 4px 0 rgba(0,0,0,.3)}
.tray-btn .ico{font-size:22px;line-height:1}
.tray-btn b{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;border-radius:11px;background:var(--brass-l);color:#3d2a07;font-size:13px;line-height:22px;
  box-shadow:0 2px 0 var(--brass-d)}
.tray-btn:disabled{opacity:.45;cursor:default}
.tray-btn:active{transform:translateY(2px)}
@media (max-width:420px){
  h1{font-size:46px}.panel{padding:14px 14px 12px}.howto{font-size:12.5px}
  .hud-block span:last-child{font-size:16px}.hud-block.goal span:last-child{font-size:12.5px}.hud-label{font-size:9px}.icon-btn{width:40px;height:40px;flex-basis:40px}
  .coach{font-size:13px;top:calc(56px + var(--safe-top))}
  .tray-btn{width:54px;height:58px;font-size:11px}
  .deal-btn{min-height:48px;font-size:17px}
}
@media (max-height:520px){.mascot{display:none}.howto{display:none}}