/* Layout: настольная карта на весь экран (как в Ticket to Ride), справа или снизу карточка страны, чат друзей всплывает поверх. */
:root{
  --sea:#8fb8c7;
  --ink:#12202b;
  --panel:#162836;
  --panel-2:#1f3547;
  --brass:#b8893a;
  --gold:#e0a82e;
  --cream:#f3ead7;
  --mute:#9fb0ac;
  --red:#d9442f;
  --font-display:'Alfa Slab One',Georgia,serif;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:var(--sea);color:var(--cream);font:400 15px/1.4 var(--font-body);overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[role="button"]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
#app{position:relative;width:100%;height:100%;overflow:hidden;-webkit-tap-highlight-color:transparent}
#map{position:absolute;inset:0;overflow:hidden;background:var(--sea)}
#world{position:absolute;left:0;top:0;width:2600px;height:3200px;transform-origin:0 0;transition:transform 1.15s cubic-bezier(.5,0,.2,1)}
#world img{position:absolute;left:0;top:0;display:block;max-width:none;width:2600px;height:3200px;user-select:none;-webkit-user-drag:none}
#board{position:absolute;left:0;top:0;width:2600px;height:3200px;overflow:visible}
#vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 110px rgba(18,32,43,.55)}

/* карта */
.place{cursor:pointer;outline:none}
.place .col{transform-box:fill-box;transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.place:hover .col,.place:focus-visible .col{transform:scale(1.1)}
.place.sel .col{transform:scale(1.2)}
.place:focus-visible .hit{stroke:var(--gold);stroke-width:8}
.ring{transform-box:fill-box;transform-origin:center;animation:ring 1.7s ease-out infinite}
.bub{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.bub.on{transform:scale(1)}
.seg{transition:opacity .6s ease}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(2.8);opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}

/* верхняя полоса */
#top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 16px 28px;background:linear-gradient(rgba(18,32,43,.9),rgba(18,32,43,0));pointer-events:none;z-index:5}
#top>*{pointer-events:auto}
#brand{display:flex;flex-direction:column;gap:4px;min-width:0}
#brand h1{margin:0;font:400 22px/1 var(--font-display)}
#brand p{margin:0;font-size:11px;color:#c7d3d0}
#topR{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
#tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);min-height:14px}
#tag.go{animation:pulse 1.6s ease-in-out infinite}
#chatBtn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:2px solid var(--brass);background:rgba(18,32,43,.92);font-weight:800;font-size:13px}
#chatBtn .badge{min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;background:var(--red);color:#fff;font-size:12px;line-height:20px;text-align:center}
#chatBtn .badge[hidden]{display:none}

/* панель страны */
#panel{position:absolute;z-index:4;box-sizing:border-box;background:rgba(18,32,43,.985);border:3px solid var(--brass);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:8px;overflow:hidden;transition:height .45s ease,opacity .35s ease}
#panel.busy .pbody{opacity:.25}
.pbody{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a5568 transparent;overscroll-behavior:contain;transition:opacity .3s ease}
.pbody::-webkit-scrollbar{width:6px}
.pbody::-webkit-scrollbar-thumb{background:#3a5568;border-radius:3px}
.ptitle{margin:0;font:400 22px/1.1 var(--font-display);padding-right:44px}
.phint{margin:0;color:#d8cfba}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;border:2px solid #2d4658;background:var(--panel-2);font-weight:800;font-size:14px}
.chip:hover{border-color:var(--brass)}
.chip i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #0b141b}
.chip.done{border-color:#7a5b24}
.chip.done::after{content:"были";font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.meter{height:8px;border-radius:4px;background:#2a4152;overflow:hidden}
.meter span{display:block;height:100%;width:0;background:var(--gold);transition:width .6s ease}
.mlabel{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between}
.card-top{display:flex;gap:12px;align-items:center;padding:6px 14px;border-radius:16px;border:3px dashed var(--brass);background:#223a4a}
.card-top svg{flex:none;width:112px;height:112px;max-width:30vw}
.card-top div{display:flex;flex-direction:column;gap:3px;min-width:0}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.country{font:400 28px/1.05 var(--font-display)}
.visit{font-size:14px;font-weight:700;color:#cfd8d4}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tiles .tile:nth-child(2){grid-column:1/-1;order:3}
.tile{background:var(--ink);border-radius:12px;border-top:4px solid var(--tc);padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile b{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tile span{font-size:15px;font-weight:800;line-height:1.15;overflow-wrap:break-word}
.quip{margin:0;font-size:15px;line-height:1.4;color:#e7dfcc}
.npc{border-radius:14px;background:var(--ink);border:2px solid var(--brass);padding:8px 12px;display:flex;flex-direction:column;gap:3px}
.npc p{margin:0;font-size:14px;line-height:1.35;color:#e7dfcc}
.prow{display:flex;gap:8px;flex-wrap:wrap}
.pfoot{flex:none;padding-top:4px}
.btn{padding:10px 14px;border-radius:12px;border:2px solid var(--brass);background:var(--panel-2);font-weight:800;font-size:14px}
.btn.main{background:var(--red);border-color:#f08a74}
.btn:hover{filter:brightness(1.12)}
.xbtn{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;border:2px solid #2d4658;background:var(--ink);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2}

@media (min-width:900px), (min-width:600px) and (max-height:559px){
  #panel{right:12px;top:12px;bottom:12px;width:var(--pw,440px);padding:18px}
  #top{right:calc(var(--pw,440px) + 24px)}
}
@media (max-width:599px), (max-width:899px) and (min-height:560px){
  #panel{left:12px;right:12px;bottom:12px;height:auto;max-height:var(--sh,190px)}
  #panel.tall{height:var(--sh,340px)}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  #brand h1{font-size:20px}
}
@media (max-height:559px) and (min-width:600px){
  #panel{padding:12px}
}

/* чат */
#chat{position:absolute;z-index:8;display:flex;flex-direction:column;box-sizing:border-box;background:#101c26;border:3px solid var(--brass);border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.5);transform-origin:left bottom;animation:chatIn .5s cubic-bezier(.3,1.4,.5,1) both}
#chat[hidden]{display:none}
@keyframes chatIn{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
@media (min-width:900px), (min-width:600px) and (max-height:559px){#chat{left:16px;bottom:16px;width:400px;height:min(600px,calc(100% - 120px))}}
@media (max-width:599px), (max-width:899px) and (min-height:560px){#chat{left:8px;right:8px;bottom:8px;height:74%}}
#chatHead{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#17293a;border-bottom:2px solid #24394b}
#faces{display:flex;flex:none}
#faces svg{width:30px;height:30px;margin-left:-8px}
#faces svg:first-child{margin-left:0}
#chatHead .ct{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
#chatHead .ct b{font-size:15px;font-weight:800}
#chatHead .ct span{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbtn{flex:none;min-width:34px;height:34px;padding:0 8px;border-radius:17px;border:2px solid #2d4658;background:var(--ink);font-size:13px;font-weight:800}
#chatLog{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:#3a5568 transparent;overscroll-behavior:contain}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:92%;animation:pop .35s ease both}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg svg{flex:none;width:30px;height:30px}
.bubble{border-radius:14px;padding:7px 12px;background:#243a4b;display:flex;flex-direction:column;gap:2px;min-width:0}
.msg.me .bubble{background:#a92f20}
.bubble .who{font-size:11px;font-weight:800}
.bubble .txt{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.bubble time{align-self:flex-end;font-size:10px;color:var(--mute)}
.msg.me .bubble time{color:#f3c0b6}
.sys{align-self:center;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--mute);background:#17293a;border-radius:999px;padding:4px 12px;animation:pop .35s ease both;text-align:center}
.typing{display:flex;gap:8px;align-items:flex-end;align-self:flex-start}
.typing .dots{display:flex;gap:4px;padding:11px 14px;border-radius:14px;background:#243a4b}
.typing .dots i{width:7px;height:7px;border-radius:50%;background:var(--cream);animation:dot 1.1s ease-in-out infinite}
.typing .dots i:nth-child(2){animation-delay:.15s}
.typing .dots i:nth-child(3){animation-delay:.3s}
#chatFoot{padding:8px 12px 10px;background:#17293a;border-top:2px solid #24394b;display:flex;flex-direction:column;gap:6px}
#chatFoot .row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
#chatFoot .meter{height:6px}
#again{padding:6px 12px;font-size:12px}

@media (prefers-reduced-motion:reduce){
  #world{transition-duration:.01s}
  .ring,#tag.go{animation:none}
  #chat{animation:none}
}