/* Cozy polish: first-time tips, hover tips, postcard notes and the shortcut sheet. Same cream paper and ink as ui.css. */

/* first-time tip: a sticky note above the hint bar */
.tipnote{position:absolute;left:var(--gutter);bottom:calc(max(18px,env(safe-area-inset-bottom,0px)) + 56px);width:min(330px,calc(100% - 32px));padding:14px 16px 12px;transform:rotate(-.6deg);z-index:6}
.tn-kick{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--terra)}
.tn-text{margin:0 0 10px;font-size:15px;font-weight:700;line-height:1.35}
.tn-praise{color:var(--sage-d)}
.tipnote .row{align-items:center;gap:12px}
.tipnote .btn{height:42px;font-size:15px;padding:0 16px}
.linkbtn{background:none;border:0;padding:6px 2px;font-size:14px;font-weight:700;color:var(--sky-ink);text-decoration:underline;text-underline-offset:3px}

/* hover tip: one floating bubble, placed by JS */
.tipbubble{position:fixed;top:0;left:0;z-index:30;max-width:250px;padding:7px 12px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink);font-size:13.5px;font-weight:700;line-height:1.3;box-shadow:0 3px 0 var(--ink);pointer-events:none}

/* postcard notes: stacked under the header, centred like the toast */
.notes{position:absolute;top:calc(var(--hud-bottom,108px) + 12px);left:50%;transform:translateX(-50%);width:min(380px,calc(100% - 32px));display:flex;flex-direction:column;align-items:center;gap:10px;z-index:8;pointer-events:none}
.note{pointer-events:auto;cursor:pointer;position:relative;width:100%;box-sizing:border-box;padding:12px 16px 13px 74px;min-height:66px;background:var(--paper);background-image:var(--grain);border:2.5px solid var(--ink);border-radius:6px 12px 8px 10px;box-shadow:0 4px 0 var(--ink),0 12px 22px rgba(43,38,32,.2);transform:rotate(var(--tilt,-1deg));animation:pc-in .35s cubic-bezier(.2,.8,.3,1) both;transition:opacity .25s,transform .25s}
.note::before{content:"";position:absolute;inset:4px;border:1.5px dashed rgba(43,38,32,.28);border-radius:inherit;pointer-events:none}
.note.out{opacity:0;transform:translateY(-8px) rotate(var(--tilt,-1deg))}
.note-stamp{position:absolute;left:14px;top:12px;width:46px;height:50px;display:grid;place-items:center;border:2px dashed var(--ink);border-radius:4px;background:var(--paper-2)}
.note-title{margin:0 0 2px;font-family:var(--display);font-weight:800;font-size:17px;font-variation-settings:"SOFT" 100,"WONK" 1;line-height:1.15}
.note-text{margin:0;font-size:14px;font-weight:700;color:var(--ink-soft);line-height:1.3}
@keyframes pc-in{from{opacity:0;transform:translateY(-14px) rotate(-3deg)}}

/* shortcut sheet: centred card */
.shortcuts{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-.3deg);width:min(600px,calc(100% - 32px));max-height:calc(100% - 40px);display:flex;flex-direction:column;padding:0;z-index:12}
.shortcuts .band{flex:0 0 auto;padding:16px 62px 14px 18px;background:var(--paper-3);background-image:var(--grain);border-bottom:2.5px solid var(--ink);border-radius:17px 21px 0 0}
.shortcuts .band h2{font-size:25px}
.shortcuts .pad{overflow:auto;padding:12px 18px 6px;display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;align-content:start;min-height:0}
.shortcuts .pad.foot{display:flex;justify-content:flex-end;grid-template-columns:none;border-top:1.5px dashed rgba(43,38,32,.25);padding:12px 18px 16px}
.shortcuts .btn{height:42px;font-size:15px}
.kgroup{break-inside:avoid}
.kgroup h3{margin:10px 0 6px;font-family:var(--display);font-weight:800;font-size:17px;font-variation-settings:"SOFT" 100,"WONK" 1}
.kgroup ul{list-style:none;margin:0;padding:0}
.kgroup li{display:flex;align-items:center;gap:10px;padding:3px 0;font-size:14.5px;font-weight:600;line-height:1.3}
.kcaps{display:flex;flex-wrap:wrap;gap:4px;flex:0 0 auto;min-width:84px}
.kcaps kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;box-sizing:border-box;border:2px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:0 2px 0 var(--ink);font:800 12px/1 var(--body);color:var(--ink)}
.qmark{font-family:var(--display);font-weight:800;font-size:22px;line-height:1}

@media (max-width:640px){
  .shortcuts .pad{grid-template-columns:1fr}
  .tipnote{width:calc(100% - 32px)}
}
@media (prefers-reduced-motion:reduce){
  .note{animation:none}
  .note{transition:none}
}