/* Teiknivélin — stílar */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

button, .flis, .flis-haus, .ilat, header, #stjornbord, .hugmynd, canvas {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

:root {
  --blar: #4f8ff7;
  --fjolublar: #9b6bf2;
  --appelsinugulur: #ff9f43;
  --bleikur: #f368a8;
  --graenn: #2ecc71;
  --raudur: #ff6b6b;
  --tur: #17b3bd;
  --dokk: #2d3550;
  --spjald-bg: #ffffff;
}

body {
  font-family: "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(160deg, #ffe0b8 0%, #ffcfe0 50%, #d7c4ff 100%);
  min-height: 100vh;
  color: var(--dokk);
}

header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 20px;
}

h1 {
  font-size: 1.7rem;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(45,53,80,.35);
  letter-spacing: 1px;
}

#hugmyndir { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }

.hugmynd {
  border: none; border-radius: 12px;
  background: rgba(255,255,255,.85);
  font-family: inherit; font-weight: bold; font-size: .82rem;
  color: var(--dokk);
  padding: 6px 10px;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  box-shadow: 0 3px 0 rgba(45,53,80,.25);
  transition: transform .1s;
}
.hugmynd:hover { transform: translateY(-2px); }
.hugmynd.valin { background: var(--appelsinugulur); color: #fff; }

#hljod {
  border: none; background: rgba(255,255,255,.85);
  width: 46px; height: 46px; border-radius: 12px;
  font-size: 1.2rem; cursor: pointer;
  box-shadow: 0 3px 0 rgba(45,53,80,.25);
}

main {
  display: grid;
  grid-template-columns: minmax(320px, 430px) 1fr;
  gap: 18px;
  padding: 0 20px 30px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* ---------- talbóla ---------- */
#tal { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
#tal-skjaldbaka {
  font-size: 2.2rem;
  background: #fff; border-radius: 50%;
  width: 58px; height: 58px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(45,53,80,.2);
}
#talbola {
  background: #fff;
  border-radius: 16px; border-top-left-radius: 4px;
  padding: 10px 14px;
  font-size: .95rem;
  box-shadow: 0 3px 0 rgba(45,53,80,.2);
  min-height: 58px;
  display: flex; align-items: center;
}
#talbola.villa { background: #ffe3e3; }
#talbola.gledi { background: #dcf7e7; }

/* ---------- spjöld ---------- */
.spjald {
  background: var(--spjald-bg);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 5px 0 rgba(45,53,80,.18);
}
.spjald h2 { font-size: 1.05rem; margin-bottom: 10px; }
#teljari { font-size: .8rem; color: #7a82a3; font-weight: normal; float: right; }

/* ---------- kubbaval ---------- */
#skipanaval { display: flex; flex-wrap: wrap; gap: 8px; }

.kubbur {
  border: none;
  border-radius: 12px;
  padding: 9px 13px;
  font-family: inherit; font-size: .9rem; font-weight: bold;
  color: #fff; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.22);
  transition: transform .08s;
}
.kubbur:active { transform: translateY(2px); box-shadow: none; }
.kubbur.afram     { background: var(--blar); }
.kubbur.haegri, .kubbur.vinstri { background: var(--fjolublar); }
.kubbur.endurtaka { background: var(--appelsinugulur); }
.kubbur.litur     { background: var(--bleikur); }
.kubbur.penni_nidur, .kubbur.penni_upp { background: var(--tur); }

body.keyrandi #skipanaval, body.keyrandi #forrit { opacity: .55; pointer-events: none; }

/* ---------- forritið ---------- */
#forrit-ytra { max-height: 40vh; overflow-y: auto; }
#forrit { min-height: 60px; }

.ilat { border-radius: 10px; padding: 2px; }
.ilat.virkt-ilat {
  outline: 2px dashed var(--graenn);
  outline-offset: 2px;
  background: rgba(46,204,113,.06);
}

.tomt-skilabod {
  color: #9aa1c0; font-size: .9rem;
  padding: 14px 6px; text-align: center;
}

.flis {
  display: flex; align-items: center; gap: 8px;
  border-radius: 10px;
  padding: 7px 10px;
  margin: 5px 2px;
  color: #fff; font-weight: bold; font-size: .88rem;
  box-shadow: 0 2px 0 rgba(0,0,0,.2);
  cursor: pointer;
}
.flis.afram     { background: var(--blar); }
.flis.haegri, .flis.vinstri { background: var(--fjolublar); }
.flis.litur     { background: var(--bleikur); }
.flis.penni_nidur, .flis.penni_upp { background: var(--tur); }
.flis-haus.endurtaka { background: var(--appelsinugulur); }
.flis-haus { cursor: pointer; }

.flis.virk, .flis-haus.virk {
  outline: 3px solid #ffe14d;
  transform: scale(1.03);
}

.eyda {
  margin-left: auto;
  border: none; background: rgba(255,255,255,.3);
  color: #fff; border-radius: 8px;
  width: 30px; height: 30px; line-height: 1;
  flex-shrink: 0;
  cursor: pointer; font-size: .85rem; font-family: inherit;
}
.eyda:hover { background: rgba(255,255,255,.55); }

/* blokkir (endurtaka) */
.blokk { margin: 5px 2px; }
.flis-haus {
  display: flex; align-items: center; gap: 8px;
  border-radius: 10px 10px 0 0;
  padding: 7px 10px;
  color: #fff; font-weight: bold; font-size: .88rem;
}
.blokk-innihald {
  border-left: 5px solid var(--appelsinugulur);
  border-radius: 0 0 0 10px;
  margin-left: 6px;
  padding: 3px 3px 3px 8px;
  min-height: 34px;
  background: rgba(255,159,67,.09);
}

.stillir { display: flex; align-items: center; gap: 5px; }
.stillir button {
  border: none; border-radius: 8px;
  width: 30px; height: 30px;
  font-size: 1.05rem;
  background: rgba(255,255,255,.35); color: #fff;
  font-weight: bold; cursor: pointer; font-family: inherit;
}
.stillir button:hover { background: rgba(255,255,255,.6); }
.stillir-tala { min-width: 40px; text-align: center; font-size: .95rem; }

.litur-sýni {
  width: 26px; height: 26px; border-radius: 7px;
  border: 3px solid #fff; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}

.setja-her {
  color: var(--graenn); font-size: .75rem;
  padding: 3px 6px; opacity: .85;
}

/* ---------- stjórntakkar ---------- */
#stjornbord { display: flex; gap: 8px; margin-top: 12px; }
#stjornbord button {
  border: none; border-radius: 12px;
  padding: 10px 16px;
  font-family: inherit; font-size: 1rem; font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.22);
  background: #e4e7f5; color: var(--dokk);
}
#stjornbord button:active { transform: translateY(2px); box-shadow: none; }
button.adal { background: var(--graenn) !important; color: #fff !important; }
#stodva { background: var(--raudur) !important; color: #fff !important; }

/* ---------- striginn ---------- */
#verkefni-heiti { font-weight: bold; font-size: 1.1rem; margin-bottom: 10px; text-align: center; }
#strigi-umgjord {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
#strigi-umgjord canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 14px;
}
#teikniborð { background: #fff; box-shadow: inset 0 0 0 3px #eef0f8; }
#skjaldbaka-lag { pointer-events: none; }

#mynd-takkar { margin-top: 12px; text-align: center; }
#mynd-takkar button {
  border: none; border-radius: 12px;
  padding: 10px 16px;
  font-family: inherit; font-size: .95rem; font-weight: bold;
  cursor: pointer; color: #fff; background: var(--fjolublar);
  box-shadow: 0 3px 0 rgba(0,0,0,.22);
}
#mynd-takkar button:active { transform: translateY(2px); box-shadow: none; }

/* ---------- myndasafn ---------- */
#myndasafn { display: flex; flex-wrap: wrap; gap: 10px; }
.safn-mynd {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 0 rgba(45,53,80,.18);
  background: #fff;
}
.safn-mynd img { width: 100%; height: 100%; object-fit: cover; }
.safn-mynd .eyda-mynd {
  position: absolute; top: 3px; right: 3px;
  border: none; border-radius: 50%;
  width: 24px; height: 24px;
  background: rgba(255,107,107,.92); color: #fff;
  cursor: pointer; font-size: .8rem; font-family: inherit;
  line-height: 1;
}

/* ---------- símar / spjaldtölvur ---------- */
@media (max-width: 860px) {
  main { grid-template-columns: 1fr; }
  #haegri { order: -1; }
  #forrit-ytra { max-height: 30vh; }
}