/* ============================================================
   brequnalo.pro — Pine Trail Rush
   Frozen taiga · pine, lime and steel
   ============================================================ */
@import url('../assets/fonts/taiga-faces.css');

:root{
  --pine-dk:  #0e2118;
  --pine:     #163326;
  --pine-lt:  #1f4a34;
  --steel:    #4d6b74;
  --steel-lt: #a8c6cd;
  --lime:     #a3e635;
  --lime-dk:  #6f9c17;
  --ice:      #dff3f7;
  --snow:     #f4fbfc;
  --amber:    #f2b544;
  --alert:    #e2554b;
  --ink:      #12241d;
  --body-txt: #23413a;
  --radius:   6px;
  --radius-lg:14px;
  --shadow:   0 3px 14px rgba(14,33,24,0.16);
  --shadow-lg:0 14px 40px rgba(14,33,24,0.34);
  --font-title:'Audiowide', cursive;
  --font-body: 'Rubik', sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:
    repeating-linear-gradient(90deg,rgba(22,51,38,0.05) 0 1px,transparent 1px 46px),
    linear-gradient(180deg,#e9f4f6 0%,#f7fbfb 60%,#eef6f4 100%);
  color:var(--body-txt);font-family:var(--font-body);min-height:100vh;overflow-x:hidden;
}

/* ── HEADER: nav left, brand center-right, lang far right ────── */
header{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;
  padding:14px 34px;
  background:var(--pine-dk);
  border-bottom:4px solid var(--lime-dk);
  position:sticky;top:0;z-index:100;
  box-shadow:0 3px 0 rgba(163,230,53,0.18);
}
.logo{font-family:var(--font-title);font-size:1.32rem;letter-spacing:0.5px;color:var(--lime);display:flex;align-items:center;gap:9px;}
.logo-icon{font-size:1.2rem;}
nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
nav a{font-family:var(--font-body);font-weight:800;font-size:0.78rem;letter-spacing:0.6px;text-transform:uppercase;color:var(--steel-lt);text-decoration:none;padding:7px 12px;border:2px solid transparent;border-radius:var(--radius);transition:all 0.18s;}
nav a:hover{color:var(--pine-dk);background:var(--lime);border-color:var(--lime);}
#lang-switcher{position:relative;}
#lang-btn{font-family:var(--font-body);font-size:0.76rem;font-weight:800;padding:7px 12px;background:transparent;border:2px solid var(--steel);border-radius:var(--radius);color:var(--steel-lt);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:6px;}
#lang-btn:hover{border-color:var(--lime);color:var(--lime);}
#lang-btn .arrow{font-size:0.6rem;opacity:0.8;transition:transform 0.2s;}
#lang-btn.open .arrow{transform:rotate(180deg);}
#lang-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--pine);border:2px solid var(--lime-dk);border-radius:var(--radius);overflow:hidden;z-index:200;box-shadow:var(--shadow-lg);min-width:150px;}
#lang-dropdown.open{display:block;}
.lang-option{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:0.8rem;font-weight:700;color:var(--steel-lt);cursor:pointer;transition:background 0.15s;border-bottom:1px solid rgba(168,198,205,0.14);}
.lang-option:last-child{border-bottom:none;}
.lang-option:hover{background:rgba(163,230,53,0.16);color:var(--lime);}
.lang-option.active{color:var(--lime);}
.lang-flag{font-size:1.1rem;line-height:1;}

/* ── LAYOUT ─────────────────────────────────────────────────── */
#game-section{display:flex;flex-direction:column;align-items:center;padding:26px 18px 56px;gap:26px;}
.board-shell{width:100%;max-width:860px;display:flex;flex-direction:column;gap:10px;background:var(--snow);border:3px solid var(--pine);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-lg);}

/* HUD: controls first, then cells */
#hud{
  display:flex;align-items:stretch;width:100%;flex-wrap:wrap;
  background:var(--pine-dk);border:2px solid var(--pine-lt);
  border-radius:var(--radius);overflow:hidden;
}
.hud-cell{flex:1;min-width:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 6px;border-left:1px solid rgba(168,198,205,0.16);}
.hud-label{font-size:0.5rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel-lt);text-align:center;}
.hud-value{font-family:var(--font-title);font-size:1.3rem;color:var(--lime);line-height:1;}
#lives-display{display:flex;gap:2px;font-size:1rem;}
#hud-controls{display:flex;align-items:center;gap:6px;padding:8px 12px;flex-shrink:0;background:var(--pine);}
.diff-btn{font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.6px;padding:6px 11px;background:transparent;border:2px solid var(--steel);border-radius:var(--radius);color:var(--steel-lt);cursor:pointer;transition:all 0.18s;touch-action:manipulation;}
.diff-btn.active,.diff-btn:hover{border-color:var(--lime);color:var(--pine-dk);background:var(--lime);}
#start-btn{font-family:var(--font-title);font-size:0.92rem;padding:9px 18px;background:var(--lime);border:2px solid var(--lime);border-radius:var(--radius);color:var(--pine-dk);cursor:pointer;transition:all 0.15s;touch-action:manipulation;white-space:nowrap;}
#start-btn:hover{background:var(--amber);border-color:var(--amber);}
#start-btn:active{transform:translateY(1px);}

/* canvas */
#canvas-wrap{position:relative;width:100%;border-radius:var(--radius);overflow:hidden;border:2px solid var(--pine-lt);cursor:pointer;}
#game-canvas{display:block;width:100%;height:auto;background:var(--ice);touch-action:manipulation;user-select:none;}
#phase-banner{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  font-family:var(--font-title);font-size:1.08rem;letter-spacing:1px;
  padding:7px 22px;border-radius:var(--radius);
  pointer-events:none;z-index:15;opacity:0;transition:opacity 0.3s;white-space:nowrap;
}
#phase-banner.visible{opacity:1;}
#phase-banner.run{background:var(--lime);color:var(--pine-dk);}
#phase-banner.fish{background:var(--steel);color:var(--snow);}
#score-flash{
  position:absolute;left:50%;top:24%;transform:translateX(-50%);
  font-family:var(--font-title);font-size:2rem;pointer-events:none;
  opacity:0;z-index:20;white-space:nowrap;
}
#score-flash.show{animation:flash-up 1.15s ease-out forwards;}
@keyframes flash-up{
  0%{opacity:1;transform:translateX(-50%) scale(0.85);}
  25%{opacity:1;transform:translateX(-50%) scale(1.1);}
  65%{opacity:1;transform:translateX(-50%) translateY(-32px) scale(1);}
  100%{opacity:0;transform:translateX(-50%) translateY(-66px) scale(0.92);}
}

/* progress bar under the board */
#dist-bar-wrap{width:100%;background:rgba(22,51,38,0.12);border:2px solid var(--pine-lt);border-radius:var(--radius);overflow:hidden;height:16px;}
#dist-bar-fill{height:100%;background:repeating-linear-gradient(45deg,var(--lime) 0 10px,var(--lime-dk) 10px 20px);transition:width 0.2s;position:relative;}

/* action buttons */
#action-bar{display:flex;gap:10px;width:100%;}
.action-btn{
  flex:1;font-family:var(--font-title);font-size:1rem;
  padding:14px;border-radius:var(--radius);border:3px solid var(--pine-dk);cursor:pointer;
  transition:all 0.12s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  box-shadow:4px 4px 0 var(--pine-dk);
}
#jump-btn{background:var(--lime);color:var(--pine-dk);}
#duck-btn{background:var(--steel);color:var(--snow);}
#strike-btn{background:var(--amber);color:var(--pine-dk);display:none;}
#strike-btn.visible{display:flex;align-items:center;justify-content:center;}
.action-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--pine-dk);}
.action-btn:disabled{background:#c6d3d5;border-color:#96a5a8;box-shadow:none;cursor:default;}

/* ── COPY GRID under the board ───────────────────────────────── */
.copy-grid{width:100%;max-width:860px;display:grid;grid-template-columns:1.15fr 1fr;gap:22px;align-items:start;}
.copy-main{background:var(--pine-dk);border-radius:var(--radius-lg);padding:26px 28px;border-left:8px solid var(--lime);}
.copy-title{font-family:var(--font-title);font-size:1.8rem;color:var(--lime);margin-bottom:12px;word-break:break-word;}
.copy-lead{color:var(--ice);font-size:0.98rem;line-height:1.75;font-weight:500;}
.copy-hint{margin-top:14px;color:var(--steel-lt);font-size:0.82rem;font-weight:700;letter-spacing:0.3px;}
.copy-side{display:flex;flex-direction:column;gap:12px;}
.side-item{display:flex;gap:14px;background:var(--snow);border:2px solid rgba(22,51,38,0.14);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow);}
.side-num{font-family:var(--font-title);font-size:1.12rem;color:var(--lime-dk);flex-shrink:0;}
.side-item h3{font-family:var(--font-body);font-size:0.92rem;font-weight:800;color:var(--ink);margin-bottom:5px;}
.side-item p{font-size:0.87rem;line-height:1.65;font-weight:500;color:var(--body-txt);}

/* ── OVERLAY ─────────────────────────────────────────────────── */
#overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:26px;background:rgba(14,33,24,0.93);
  transition:opacity 0.3s;z-index:30;
}
#overlay.hidden{opacity:0;pointer-events:none;}
.overlay-icon{font-size:4.2rem;animation:sway 2.4s ease-in-out infinite;}
@keyframes sway{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
.overlay-title{font-family:var(--font-title);font-size:2rem;letter-spacing:1.5px;color:var(--lime);text-align:center;}
.overlay-sub{color:var(--ice);font-size:0.98rem;font-weight:600;text-align:center;max-width:430px;line-height:1.65;}
.overlay-btn{font-family:var(--font-title);font-size:1rem;padding:14px 46px;background:var(--lime);border:3px solid var(--lime);border-radius:var(--radius);color:var(--pine-dk);cursor:pointer;transition:all 0.18s;box-shadow:5px 5px 0 rgba(163,230,53,0.28);touch-action:manipulation;}
.overlay-btn:hover{background:var(--amber);border-color:var(--amber);}
.overlay-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(163,230,53,0.28);}

/* ── INNER PAGES ─────────────────────────────────────────────── */
.page-hero{padding:52px 34px 40px;background:var(--pine-dk);border-bottom:4px solid var(--lime-dk);}
.page-hero .hero-icon{font-size:3rem;margin-bottom:12px;}
.page-hero h1{font-family:var(--font-title);font-size:2.2rem;color:var(--lime);margin-bottom:10px;word-break:break-word;}
.page-hero p{font-size:1rem;font-weight:500;color:var(--ice);max-width:660px;line-height:1.75;}
.last-updated{font-size:0.8rem;color:var(--steel-lt);font-style:italic;}
.content-section{padding:46px 34px;max-width:980px;margin:0 auto;}
.content-section+.content-section{border-top:2px solid rgba(22,51,38,0.1);}
.section-heading{font-family:var(--font-title);font-size:1.42rem;color:var(--pine);margin-bottom:20px;padding-left:14px;border-left:6px solid var(--lime);}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.info-card{background:var(--snow);border:2px solid rgba(22,51,38,0.14);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow);}
.info-card h3{font-family:var(--font-body);font-weight:800;font-size:0.98rem;color:var(--ink);margin-bottom:9px;}
.info-card p,.info-card li{font-size:0.92rem;line-height:1.75;font-weight:500;color:var(--body-txt);}
.info-card ul{padding-left:18px;display:flex;flex-direction:column;gap:5px;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.step{background:var(--pine);border-radius:var(--radius-lg);padding:20px;color:var(--ice);}
.step-num{font-family:var(--font-title);font-size:1.6rem;color:var(--lime);display:block;margin-bottom:8px;}
.step-body h4{font-family:var(--font-body);font-weight:800;font-size:0.95rem;color:var(--lime);margin-bottom:6px;}
.step-body p{font-size:0.89rem;line-height:1.7;font-weight:500;color:var(--ice);}
.controls-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;}
.key{background:var(--pine-dk);border-radius:var(--radius);padding:5px 12px;font-size:0.8rem;font-weight:800;color:var(--lime);white-space:nowrap;}
.key-desc{font-size:0.9rem;font-weight:500;}
.cta-link{display:inline-block;font-family:var(--font-title);font-size:1rem;padding:15px 46px;background:var(--lime);color:var(--pine-dk);border:3px solid var(--pine-dk);border-radius:var(--radius);text-decoration:none;box-shadow:6px 6px 0 var(--pine-dk);}
.legal-content{padding:44px 34px;max-width:840px;margin:0 auto;}
.legal-content h2{font-family:var(--font-title);font-size:1.06rem;color:var(--pine);margin:30px 0 11px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p,.legal-content li{font-size:0.93rem;line-height:1.8;font-weight:500;margin-bottom:10px;}
.highlight{background:rgba(163,230,53,0.16);border-left:6px solid var(--lime-dk);padding:13px 16px;border-radius:0 var(--radius) var(--radius) 0;margin:16px 0;}
.legal-divider{height:2px;background:rgba(22,51,38,0.12);margin:26px 0;}
.contact-row{display:flex;gap:12px;flex-wrap:wrap;}
.contact-card{flex:1;min-width:180px;background:var(--pine-dk);border-radius:var(--radius-lg);padding:18px 20px;display:flex;flex-direction:column;gap:6px;}
.contact-card .label{font-size:0.6rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel-lt);}
.contact-card a,.contact-card p{color:var(--lime);font-size:0.9rem;font-weight:700;text-decoration:none;word-break:break-all;}
.contact-card a:hover{color:var(--amber);}

/* ── FOOTER: copy, mail, links ───────────────────────────────── */
footer{background:var(--pine-dk);border-top:4px solid var(--lime-dk);padding:22px 34px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.footer-left{font-size:0.8rem;font-weight:600;color:var(--steel-lt);}
.footer-mail a{font-size:0.82rem;font-weight:800;color:var(--lime);text-decoration:none;}
.footer-mail a:hover{color:var(--amber);}
.footer-links{display:flex;gap:8px;flex-wrap:wrap;}
.footer-links a{font-size:0.76rem;font-weight:800;text-transform:uppercase;letter-spacing:0.6px;color:var(--steel-lt);text-decoration:none;padding:6px 10px;border:2px solid var(--steel);border-radius:var(--radius);transition:all 0.18s;}
.footer-links a:hover{color:var(--pine-dk);background:var(--lime);border-color:var(--lime);}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:900px){
  .copy-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
}
@media(max-width:768px){
  header{grid-template-columns:1fr auto;gap:12px;padding:10px 16px;}
  header nav{order:3;grid-column:1 / -1;}
  .logo{font-size:1.1rem;}
  #game-section{padding:18px 10px 40px;gap:20px;}
  .card-grid{grid-template-columns:1fr;}
  .content-section{padding:36px 16px;}
  .page-hero{padding:34px 18px 26px;}.page-hero h1{font-size:1.7rem;}
  .legal-content{padding:32px 18px;}
  footer{padding:18px 18px;}
  .copy-main{padding:20px;}
  .copy-title{font-size:1.45rem;}
}
@media(max-width:480px){
  nav a{font-size:0.7rem;padding:6px 8px;}
  .hud-cell{min-width:calc(50% - 1px);}
  #hud-controls{width:100%;justify-content:center;}
  .overlay-title{font-size:1.5rem;}
  footer{flex-direction:column;text-align:center;}
}
@media(hover:none){
  .overlay-btn:hover,#start-btn:hover{background:var(--lime);border-color:var(--lime);}
}