/* Ζωγράφισε σαν αρχαίος · Εφορεία Αρχαιοτήτων Κυκλάδων
   Concept: the painter's grinding slab. A grey marble work-surface where the
   only strong colour is the pigment the child has just made: the interface
   takes on that colour (--pig), so every new paint visibly "dyes" the game. */
:root{
  --slab:#D7D1C5;        /* grey Cycladic marble work surface */
  --slab-2:#C9C2B4;
  --marble:#FBFAF6;      /* white marble: cards, sheets */
  --plaster:#EFE7D7;     /* lime plaster: the drawing ground */
  --ink:#26211D;
  --ink-2:#5B544B;
  --line:rgba(38,33,29,.16);
  --edge:rgba(38,33,29,.22);
  --pig:#A9442D;         /* current pigment (set by JS) */
  --pig-ink:#FFFFFF;     /* text on top of the pigment */
  --f-d:"Alegreya",Georgia,"Times New Roman",serif;
  --f-b:"Commissioner","Segoe UI",Arial,sans-serif;
  --r:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--slab);color:var(--ink);font:400 16px/1.45 var(--f-b);-webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .13 0 0 0 0 .11 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#app{height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}

/* ---------- top bar ---------- */
.bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1.5px solid var(--edge);background:rgba(251,250,246,.55);backdrop-filter:blur(6px)}
.embed .bar{padding-right:64px}               /* the site's close button sits here */
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;background:none;border:0;padding:0;text-align:left}
.brand svg{flex:none;width:34px;height:34px}
.brand b{font:800 1.28rem/1.05 var(--f-d);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pots{display:flex;gap:6px;align-items:center}
.pot{width:30px;height:30px;border-radius:50%;border:2px dashed rgba(38,33,29,.35);background:transparent;padding:0;position:relative;transition:transform .2s}
.pot.on{border:2px solid var(--ink);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.25)}
.pot.cur{outline:3px solid var(--ink);outline-offset:2px}
.pot.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.ib{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--edge);background:var(--marble);display:grid;place-items:center;padding:0;font-weight:700;font-size:.85rem;flex:none}
.ib svg{width:20px;height:20px}
.ib[aria-pressed="true"]{background:var(--ink);color:var(--marble)}
.x{text-decoration:none;color:inherit}

/* ---------- stage ---------- */
#stage{overflow:auto;-webkit-overflow-scrolling:touch;position:relative}
.scr{max-width:1040px;margin:0 auto;padding:28px 20px 40px;display:flex;flex-direction:column;gap:22px}
h1,h2{font-family:var(--f-d);font-weight:800;letter-spacing:-.01em;margin:0;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.3rem,7vw,4.4rem)}
h2{font-size:clamp(1.55rem,4.2vw,2.2rem)}
.lead{font-size:clamp(1.05rem,2.3vw,1.25rem);max-width:46ch;margin:0;text-wrap:pretty}
.muted{color:var(--ink-2);margin:0}

/* chunky pressable buttons, like a clay tablet with a lip */
.btn{--b:var(--ink);--c:var(--marble);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:10px 24px;border-radius:999px;border:2px solid var(--ink);background:var(--b);color:var(--c);font-weight:700;font-size:1.06rem;box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s;text-decoration:none}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.pig{--b:var(--pig);--c:var(--pig-ink)}
.btn.lite{--b:var(--marble);--c:var(--ink)}
.btn.big{min-height:60px;font-size:1.25rem;padding:12px 34px}
.btn.sm{min-height:42px;padding:6px 16px;font-size:.95rem;box-shadow:0 3px 0 var(--ink)}
.btn[disabled]{opacity:.38;cursor:default;transform:none;box-shadow:0 4px 0 var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.lnk{background:none;border:0;padding:8px 2px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;min-height:44px}

/* ---------- intro: the cover art + one action ---------- */
html.on-intro body{background:#FBF8F1;background-image:none}
html.on-intro .bar{background:#FBF8F1;border-bottom-color:transparent}
.intro{min-height:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(16px,3vw,40px) clamp(16px,3vw,40px) 24px}
.cov{margin:0;align-self:stretch;display:flex;align-items:center;justify-content:center}
.cov img{width:100%;height:auto;max-height:min(78vh,720px);object-fit:contain;animation:covin .7s ease-out both}
@keyframes covin{from{opacity:0;transform:translateY(10px)}}
.itx{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.4vh,22px)}
.intro h1{font-size:clamp(2.6rem,6vw,5rem);line-height:.96}
.intro .lead{max-width:28ch;font-size:clamp(1.08rem,1.9vw,1.3rem);color:var(--ink-2)}
.intro .go{margin-top:4px;min-width:min(100%,280px)}
.intro .go span{transition:transform .15s}.intro .go:hover span{transform:translateX(4px)}
.five{margin-top:clamp(6px,2vh,18px);width:100%;max-width:420px}
.arc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:start}
.ist{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.ist img{width:100%;max-width:72px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 4px rgba(38,33,29,.25));animation:bob 3.6s ease-in-out infinite;animation-delay:calc(var(--k) * -.7s)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.ist span{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;color:var(--ink-2);white-space:nowrap}
.ist span i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);flex:none}
.ist.hop img{animation:hop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-12px) scale(1.08) rotate(6deg)}100%{transform:translateY(0) scale(1)}}
.fivet{margin:10px 0 0;font-size:.88rem;font-weight:600;color:var(--ink-2)}
.intro .credits{border-top:1px solid var(--line);width:100%;max-width:420px;margin-top:0}
@media (max-width:760px){
  .intro{grid-template-columns:1fr;gap:18px;padding:0 0 24px;text-align:center}
  .cov{align-self:auto}
  .cov img{width:100%;max-height:30svh;aspect-ratio:942/540;object-fit:cover;object-position:50% 14%}
  .intro{gap:12px}
  .itx{gap:12px}
  .intro h1{font-size:clamp(2rem,9vw,2.5rem)}
  .intro .lead{font-size:1.02rem;line-height:1.4}
  .intro .go{margin-top:2px;width:100%;max-width:340px}
  .five{margin-top:10px}
  .itx{align-items:center;padding:0 18px}
  .intro .lead{margin:0 auto}
  .five{margin-left:auto;margin-right:auto}
  .intro .credits summary,.intro .credits .l{justify-content:center}
}
.inline body{overflow:visible;height:auto}
.inline #app{height:auto;min-height:0}
.inline .bar{display:none}
.inline #stage{overflow:visible}
.inline html,html.inline{height:auto}
html.inline body{height:auto;overflow:visible}
.inline .intro{min-height:0;padding-bottom:18px}
.inline .cov img{max-height:640px}
@media (max-width:760px){.inline .cov img{max-height:none}}
.credits{font-size:.8rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.credits summary{cursor:pointer;list-style:none;min-height:36px;display:flex;align-items:center}
.credits summary::-webkit-details-marker{display:none}
.credits p{margin:4px 0 6px;max-width:70ch}
.credits a{color:var(--ink);text-underline-offset:3px}
.credits .ded{font-style:italic}
.credits .l{display:flex;flex-wrap:wrap;gap:6px 18px}

/* ---------- pick a stone ---------- */
.stones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.stone{background:var(--marble);border:2px solid var(--edge);border-radius:18px;padding:12px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;box-shadow:0 5px 0 var(--edge);transition:transform .12s,box-shadow .12s,border-color .12s;position:relative;min-width:0}
.stone:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 8px 0 var(--ink)}
.stone:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.stone img{width:100%;aspect-ratio:1/0.8;object-fit:contain;filter:drop-shadow(0 6px 4px rgba(0,0,0,.25))}
.stone .n{font:800 1.18rem/1.1 var(--f-d)}
.stone .p{font-size:.85rem;color:var(--ink-2);font-weight:600}
.stone .ok{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:800;font-size:.9rem;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
.prog{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- workshop ---------- */
.work{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center}
.slabwrap{position:relative}
.slab{width:100%;height:auto;display:block;-webkit-user-select:none;user-select:none}
.slab.drag{touch-action:none;cursor:grab}
.fx{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}
.hand{animation:hand 1.6s ease-in-out infinite;pointer-events:none}
@keyframes hand{0%,100%{transform:translate(120px,182px)}50%{transform:translate(240px,186px)}}
.hand.circ{animation:circ 2s linear infinite}
@keyframes circ{0%{transform:translate(250px,188px)}25%{transform:translate(180px,210px)}50%{transform:translate(110px,188px)}75%{transform:translate(180px,166px)}100%{transform:translate(250px,188px)}}
.hand.tapme{animation:tapme 1.1s ease-in-out infinite}
@keyframes tapme{0%,100%{transform:translate(296px,60px) scale(1)}50%{transform:translate(296px,60px) scale(.75)}}
.wtxt{display:flex;flex-direction:column;gap:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.chips li{font-size:.85rem;font-weight:700;padding:5px 12px;border-radius:999px;border:1.5px solid var(--edge);color:var(--ink-2);background:rgba(251,250,246,.5)}
.chips li.on{border-color:var(--ink);color:var(--ink);background:var(--marble)}
.chips li.ok{background:var(--ink);color:var(--marble);border-color:var(--ink)}
.meter{height:18px;border-radius:999px;border:2px solid var(--ink);background:var(--marble);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--pig);transition:width .15s;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.fact{background:var(--marble);border:2px solid var(--ink);border-radius:18px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 5px 0 var(--ink)}
.fact .sw{flex:none;width:58px;height:58px;border-radius:50%;background:var(--pig);border:2px solid var(--ink);box-shadow:inset 0 -6px 0 rgba(0,0,0,.2),inset 0 4px 0 rgba(255,255,255,.25)}
.fact p{margin:0}
.fact b{font:800 1.2rem/1.15 var(--f-d);display:block;margin-bottom:4px}
.fact small{display:block;font-weight:700;color:var(--ink-2);margin-bottom:2px}

/* ---------- painting ---------- */
.paint{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr)}
.cvwrap{position:relative;display:flex;align-items:center;justify-content:center;padding:16px;min-height:0;min-width:0;overflow:hidden}
#pcan{display:block;background:var(--plaster);border-radius:4px;box-shadow:0 0 0 1.5px var(--edge),0 10px 0 -2px var(--slab-2);touch-action:none;cursor:var(--brush,crosshair);max-width:100%;max-height:100%}
#pcan .rg{transition:fill .18s}
.zoomctl{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px}
.toast{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--marble);padding:10px 16px;border-radius:999px;font-size:.92rem;font-weight:600;pointer-events:none;opacity:0;transition:opacity .3s;max-width:calc(100% - 40px);text-align:center}
.toast.show{opacity:1}
.side{border-left:1.5px solid var(--edge);background:rgba(251,250,246,.5);padding:18px;display:flex;flex-direction:column;gap:16px;overflow:auto}
.dname{display:flex;flex-direction:column;gap:6px}
.dname b{font:800 1.35rem/1.1 var(--f-d)}
.dname p{margin:0;font-size:.92rem;color:var(--ink-2)}
.dname a{font-weight:600;color:var(--ink);text-underline-offset:3px;font-size:.92rem}
.pal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pc{border:2px solid transparent;background:none;border-radius:14px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.74rem;font-weight:700;line-height:1.1;text-align:center;min-height:48px}
.pc i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--ink);box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.25);font-style:normal;transition:transform .15s}
.pc[aria-pressed="true"]{border-color:var(--ink);background:var(--marble)}
.pc[aria-pressed="true"] i{transform:scale(1.08)}
.pc.add i{border-style:dashed;box-shadow:none;background:transparent;font-size:1.5rem;font-weight:400}
.pc.erase i{background:var(--marble)}
.pc.erase svg{width:22px;height:22px}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.side .tools{margin-top:auto}
.side .done{flex-basis:100%;min-height:54px;font-size:1.12rem}

/* sheets & dialogs */
.sheet{position:absolute;inset:0;z-index:20;background:rgba(38,33,29,.45);display:flex;align-items:flex-end;justify-content:center;padding:0}
.sheet .in{background:var(--marble);width:100%;max-width:980px;max-height:92%;overflow:auto;border-radius:22px 22px 0 0;border:2px solid var(--ink);border-bottom:0;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;animation:up .28s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.sheet .hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.dcard{background:#fff;border:2px solid var(--edge);border-radius:16px;padding:8px 8px 10px;display:flex;flex-direction:column;gap:6px;text-align:left;box-shadow:0 4px 0 var(--edge);transition:transform .1s;position:relative}
.dcard:hover{border-color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.dcard:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.dcard img{width:100%;height:150px;object-fit:contain}
.dcard b{font:800 1.02rem/1.15 var(--f-d)}
.dcard .lv{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--ink-2)}
.dcard .lv span{display:inline-flex;gap:3px}
.dcard .lv span i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-2)}
.dcard .lv span i.f{background:var(--ink-2)}
.dcard .st{position:absolute;top:8px;right:8px;font-size:.72rem;font-weight:700;background:var(--ink);color:var(--marble);border-radius:999px;padding:2px 8px}
.dcard[aria-current="true"]{border-color:var(--ink)}
.modal{position:absolute;inset:0;z-index:30;background:rgba(38,33,29,.55);display:grid;place-items:center;padding:16px}
.modal .in{background:var(--marble);border:2px solid var(--ink);border-radius:22px;padding:22px;max-width:460px;width:100%;max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 0 var(--ink);animation:up .28s ease-out}
.modal .pv{width:100%;max-height:42vh;object-fit:contain;background:var(--slab);border-radius:10px}
.modal .sws{display:flex;gap:6px;flex-wrap:wrap}
.modal .sws span{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ink)}
.modal p{margin:0}
.msg{min-height:1.2em;font-size:.9rem;color:var(--ink-2);margin:0}
canvas.boom{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* ---------- tablets & phones ---------- */
@media (max-width:900px){
  .work{grid-template-columns:1fr;gap:12px}
  .stones{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px),(max-height:560px) and (max-width:1100px){
  .paint{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .cvwrap{padding:8px}
  .side{border-left:0;border-top:1.5px solid var(--edge);padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));gap:8px;overflow:visible;background:rgba(251,250,246,.75)}
  .dname{flex-direction:row;align-items:center;gap:10px}
  .dname b{font-size:1.05rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dname p,.dname .info{display:none}
  .pal{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px}
  .pal::-webkit-scrollbar{display:none}
  .pc{flex:0 0 auto;width:58px;padding:4px 0}
  .pc i{width:40px;height:40px}
  .pc .pn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tools{flex-wrap:nowrap;gap:6px}
  .tools .btn{flex:1 1 0;padding:6px 6px;font-size:.88rem;min-width:0}
  .side .tools{margin-top:0}
  .side .done{flex-basis:0;min-height:42px;font-size:.88rem}
  .zoomctl{right:12px;bottom:12px}
  .zoomctl .zin,.zoomctl .zout{display:none}
}
@media (max-width:600px){
  .bar{padding:8px 10px;gap:6px}
  .embed .bar{padding-right:56px}
  .brand b{font-size:1.02rem}
  .brand svg{width:28px;height:28px}
  .brand b{display:none}
  .pot{width:24px;height:24px}
  .pots{gap:4px}
  .ib{width:38px;height:38px}
  .scr{padding:16px 14px 28px;gap:16px}
  h1{font-size:clamp(2rem,10vw,2.6rem)}
  .stones{gap:8px}
  .stone{padding:8px 4px 10px;border-radius:14px}
  .stone .n{font-size:.92rem}
  .stone .p{font-size:.74rem}
  .stone .ok{width:24px;height:24px;font-size:.75rem;top:5px;right:5px}
  .work .slab{max-height:34svh;margin:0 auto}
  .hand.tapme{animation:tapme 1.1s ease-in-out infinite}
@keyframes tapme{0%,100%{transform:translate(296px,60px) scale(1)}50%{transform:translate(296px,60px) scale(.75)}}
.wtxt{gap:10px}
  .wtxt .muted{font-size:.95rem}
  .fact{padding:12px;gap:10px}.fact .sw{width:40px;height:40px}.fact b{font-size:1.02rem}.fact p{font-size:.93rem}
  .btn.big{min-height:54px;font-size:1.12rem;padding:10px 26px}
  .dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dcard img{height:118px}
}
@media (max-width:360px){
  .stones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pot{width:21px;height:21px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}