/* Peça 1 — La roca de l'horitzó */

:root{--ample:760px}

/* ---------- el joc ---------- */
.joc{margin:30px 0 0; border:1px solid var(--vora); border-radius:16px; overflow:hidden}
.joc canvas{width:100%; height:430px; display:block; background:var(--panell); touch-action:manipulation}

.missio{display:flex; gap:13px; align-items:flex-start; padding:16px 18px; background:var(--capsalera); border-top:1px solid var(--vora)}
.missio .ico{
  flex:0 0 26px; height:26px; border-radius:50%; background:var(--sol); color:#1A1200;
  font-family:var(--mono); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.missio .txt{font-size:16px; line-height:1.5}
.missio .txt b{color:var(--sol); font-weight:600}

.barra{display:flex; background:var(--capsalera); border-top:1px solid var(--vora)}
.barra div{flex:1; padding:10px 12px; text-align:center; border-left:1px solid var(--vora); min-width:0}
.barra div:first-child{border-left:0}
.barra .v{font-family:var(--mono); font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barra .e{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--apagat); margin-top:3px}

.comanda{display:flex; gap:9px; flex-wrap:wrap; align-items:center; background:var(--panell); border-top:1px solid var(--vora); padding:16px}
.comanda button{padding:10px 18px}
/* el botó que toca ara s'encén: la consola no s'entén sola */
button.ara{background:var(--sol); color:#1A1200; border-color:var(--sol); font-weight:600}
button.ara:hover:not(:disabled){background:#FFC94D; border-color:var(--sol)}
button.fita{border-color:var(--verd); color:var(--verd)}
button.fita:hover:not(:disabled){background:rgba(95,191,143,.14); border-color:var(--verd)}
button.fita.ara{background:var(--verd); color:#08210F; border-color:var(--verd)}
button.ghost{margin-left:auto}

/* ---------- la pedra escrita ----------
   Va dins de la targeta del joc. A fora quedava tan avall que no la veies
   fins que ja marxaves de la pàgina, i no sabies ni que existia. */
.diari{border-top:1px solid var(--vora); overflow:hidden}
.diari h3{
  margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--apagat); background:var(--capsalera); padding:12px 16px; font-weight:400;
}
.diari ul{list-style:none; margin:0; padding:0}
.diari li{padding:14px 16px; border-top:1px solid var(--vora); font-size:15.5px; background:var(--panell)}
.diari li:first-of-type{border-top:0}
.diari .buit{color:var(--apagat); font-style:italic}
.diari b{font-family:var(--mono); font-weight:400; color:var(--sol)}
.diari .rere{display:block; color:var(--apagat); font-size:14px; margin-top:4px}

.veredicte{background:var(--capsalera); border:1px solid var(--vora); border-radius:14px; padding:24px 20px; margin-top:22px}
.veredicte p{margin:0 0 12px}
.veredicte p:last-child{margin:0}
.gran{font-family:var(--mono); font-size:32px; color:var(--sol); display:block; margin-bottom:2px}

.truc{background:var(--panell); border:1px solid var(--verd); border-radius:14px; padding:20px; margin-top:22px}
.truc .t{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--verd); margin-bottom:6px}
.truc p{margin:0}

/* ---------- el gràfic, tapat fins que hi hagi dues mesures ---------- */
.bloc{position:relative; margin-top:22px}
.tapa{
  position:absolute; inset:0; background:rgba(18,14,34,.94); border-radius:14px; z-index:4;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:26px;
  font-family:var(--serif); font-size:18px; color:var(--apagat);
  transition:opacity .5s, visibility .5s;
}
.tapa.fora{opacity:0; visibility:hidden}
.grafic canvas{height:280px}

@media (max-width:560px){
  .joc canvas{height:400px}
  .barra{flex-wrap:wrap}
  .barra div{flex:1 0 50%}
  button.ghost{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .tapa{transition:none}
}