/* ============================================================
   Pajnucci Ceramics — Go Fishing
   Sits on top of styles.css: same palette, type and cart.
   ============================================================ */

/* Same flat look as the shelf cards below: cream, a thin tan line, no shadow. */
:root{--tan:#b9a68d}

/* ---------- the pond ----------
   Cream and ink only, so the fish are the only color in the game. */
.pondWrap{position:relative;width:min(1000px,100%);background:var(--mat);
  border:1.5px solid var(--tan);border-radius:6px;overflow:hidden}
.pond{display:block;width:100%;aspect-ratio:16/10;outline:none;touch-action:manipulation}

/* ---------- round / time / score ---------- */
.hud{position:absolute;top:18px;left:18px;right:18px;z-index:2;display:flex;justify-content:space-between;
  pointer-events:none;font:600 13px Karla,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.hud span{background:var(--mat);border:1.5px solid var(--tan);border-radius:999px;padding:6px 14px}
.hud b{font-size:14px}
.hudTime{font-variant-numeric:tabular-nums}
.hudTime.low{background:var(--red) !important;border-color:var(--red) !important;color:var(--cream)}

/* ---------- start / between rounds / game over ---------- */
.panel{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  background:rgba(251,246,236,.6);padding:14px;overflow:auto}
.panelCard{background:var(--mat);border:1.5px solid var(--tan);border-radius:6px;
  padding:24px 26px 20px;max-width:440px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin:auto;
  animation:sheetIn .25s cubic-bezier(.2,1.1,.4,1) both}
.panelKicker{margin:0;font:600 11px Karla,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.panelTitle{margin:0;font:400 40px/1 'Instrument Serif',Georgia,serif}
.panelText{margin:0;font-size:14px;color:var(--muted);text-wrap:pretty;max-width:36ch}
.panelActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.pill-dark.big{padding:12px 26px;font-size:15px;margin:0}
/* the one red thing in the game: the button that gets you fishing */
#panelGo{background:var(--red);color:var(--cream)}
.panelActions .pill-ghost{text-decoration:none;display:inline-flex;align-items:center}
.panelKeys{margin:4px 0 0;font-size:12px;color:var(--muted-2)}
.keysTouch{display:none}
@media (hover:none){ .keysDesk{display:none} .keysTouch{display:inline} }

/* the prize, the score form and the board */
.prizeTag{margin:2px 0 0;padding:6px 14px;border:1.5px solid var(--tan);border-radius:999px;
  font:600 11px Karla,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.prizeTag:empty{display:none}
.catchLabel{margin-top:14px}
.hud span span{border:0;padding:0;background:none}
.scoreForm{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:10px;
  padding-top:14px;border-top:1px solid var(--line)}
.scoreFields{display:flex;gap:8px;width:100%}
.scoreFields input{flex:1;min-width:0;padding:10px 14px;border:1.5px solid var(--tan);border-radius:999px;
  background:var(--cream);font:400 14px Karla,sans-serif;color:var(--ink);user-select:text;-webkit-user-select:text}
.scoreFields input:focus{outline:none;border-color:var(--ink)}
.finePrint{margin:0;font-size:11px;line-height:1.4;color:var(--muted-2);max-width:40ch}
.scoreThanks{margin:10px 0 0;font-size:13px;color:var(--ink);max-width:36ch}
.board{width:100%;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:6px}
.boardList{list-style:none;margin:0;padding:0;width:100%;max-width:300px}
.boardList li{display:flex;gap:10px;align-items:baseline;padding:5px 10px;font-size:13px;border-radius:999px}
.boardList li.me{background:var(--ink);color:var(--cream)}
.boardList li.gap{padding:0;margin:6px 10px;height:0;border-top:1.5px dashed var(--tan);border-radius:0}
.boardNote{margin:2px 0 0;font-size:11px;color:var(--muted-2)}
.boardList li.empty{justify-content:center;color:var(--muted-2)}
.bRank{min-width:18px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.boardList li.me .bRank{color:var(--cream)}
.bName{flex:1;font-weight:600;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bScore{font-variant-numeric:tabular-nums;font-weight:600}

/* your catch */
.catchList{width:100%;display:flex;flex-direction:column;gap:2px;margin-top:10px;text-align:left;border-top:1px solid var(--line)}
.catchRow{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.catchRow img{width:70px;height:46px;object-fit:contain;flex:0 0 auto}
.catchMeta{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.catchName{font-size:13px;font-weight:600}
.catchName em{font-style:normal;color:var(--muted)}
.catchType{font-size:11px;color:var(--muted-2)}
.catchPrice{font-size:12px;font-weight:600;color:var(--ink)}
.catchNote{margin:10px 0 0;font-size:13px;color:var(--muted);text-align:center}
.catchNote a{color:var(--ink)}

/* ---------- controls under the pond ---------- */
.pad{display:flex;gap:12px;justify-content:center;width:min(1000px,100%)}
.padBtn{flex:0 0 auto;min-width:72px;height:52px;padding:0 20px;border:1.5px solid var(--tan);border-radius:999px;
  background:var(--mat);font:600 16px Karla,sans-serif;color:var(--ink);
  cursor:pointer;touch-action:none;-webkit-touch-callout:none;user-select:none}
.padBtn:hover{border-color:var(--ink)}
.padBtn.cast{min-width:130px;background:var(--ink);border-color:var(--ink);color:var(--cream);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.padBtn:active{transform:scale(.97)}
.padSteer{display:flex;gap:10px}
#padLeft,#padRight{font-size:24px;line-height:1}

/* A computer gets keyboard instructions; a phone gets the buttons. */
.keysHint{display:none;margin:0;gap:28px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.keyGroup{display:inline-flex;align-items:center;gap:6px}
.keysHint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;
  border:1.5px solid var(--tan);border-radius:6px;background:var(--mat);font:600 14px Karla,sans-serif;color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .pad{display:none}
  .keysHint{display:flex}
}

/* ---------- phones: the end-of-game card pops up over the whole page ---------- */
.popClose{display:none}
@media (max-width:640px){
  .panel.pop{position:fixed;inset:0;z-index:50;background:rgba(42,35,29,.45);
    padding:max(16px,env(safe-area-inset-top,0px)) 14px max(16px,env(safe-area-inset-bottom,0px));
    align-items:flex-start;overscroll-behavior:contain}
  /* the card scrolls inside its own rounded frame, so the corners always show */
  .panel.pop{overflow:hidden;align-items:center}
  .panel.pop .panelCard{position:relative;padding-top:30px;border-radius:20px;max-height:100%;overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* sticks to the top right corner while the card scrolls */
  .panel.pop .popClose{display:flex;position:sticky;z-index:3;top:8px;align-self:flex-end;
    margin:-22px -10px -14px 0;flex:0 0 auto}
  body.popOpen{overflow:hidden}
}
.popClose{position:absolute;top:8px;right:8px;width:36px;height:36px;align-items:center;justify-content:center;
  border:1.5px solid var(--tan);border-radius:999px;background:var(--mat);color:var(--ink);
  font:400 22px/1 Karla,sans-serif;cursor:pointer}

/* after closing the pop-up: just the score and Play again, in the pond */
.seeFish{display:none;margin-top:6px;font-size:13px;color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:1px}
.panel.over .seeFish{display:inline-block}
.panel.compact #panelText,.panel.compact #panelShop,.panel.compact #scoreForm,.panel.compact #scoreThanks,
.panel.compact #board,.panel.compact #catchLabel,.panel.compact #catchList{display:none !important}

/* Phone preview on a computer: index.html?phone forces the phone controls. */
.forcePhone .pad{display:flex !important}
.forcePhone .keysHint{display:none !important}
.forcePhone .keysDesk{display:none !important}
.forcePhone .keysTouch{display:inline !important}

.skip{margin:0;font-size:13px}
.skip a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.skip a:hover{color:var(--red);border-bottom-color:var(--red)}

/* ---------- every fish ---------- */
.fishCard img{height:110px}
.fishCard .pill-buy{margin-top:6px;background:none}
.fishCard.sold{opacity:.5}

@media (max-width:640px){
  .scoreFields{flex-direction:column}
  .pond{aspect-ratio:auto;height:min(calc((100vw - 28px) * 1.5), calc(100svh - 168px));min-height:360px}
  /* phones: a smaller title so the title, the pond and the buttons all fit on one screen */
  .fishPage .head{gap:2px}
  .fishPage .eyebrow{font-size:10px;letter-spacing:.22em}
  .fishPage .title{font-size:28px}
  .fishPage .head .sub{display:none}
  .panel{padding:10px}
  .panelCard{padding:20px 16px 16px}
  .panelTitle{font-size:34px}
  .hud{top:12px;left:12px;right:12px;font-size:11px;letter-spacing:.06em}
  .hud span{padding:5px 10px}
  .hud b{font-size:13px}
  .padBtn{flex:1;min-width:0}
  .padBtn.cast{flex:1}
  .padSteer{flex:1.25}
}

/* ---------- sign up for the drop (under the game) ---------- */
.dropSignup{width:min(520px,100%);margin:36px auto 8px;padding:24px 20px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  border:1.5px solid var(--tan);border-radius:20px}
.dropText{margin:0;font-size:14px;line-height:1.45;color:var(--muted);max-width:38ch}
.dropForm{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.dropForm .pill-dark{margin-top:0}
.dropThanks{margin:0;font-size:14px;color:var(--ink)}
@media (max-width:640px){ .dropSignup .scoreFields{flex-direction:column} }

/* games played, under the game */
.playCount{margin:14px 0 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:600;text-align:center}
.playCount b{color:var(--ink);font-weight:700}