/* ===== Flonopoly Online-Spiel ===== */
.gstatus{display:flex;align-items:center;gap:10px;margin-top:16px;background:#fff;border:var(--bw) solid var(--line);border-radius:var(--r);padding:9px 12px;font-size:15px;box-shadow:0 3px 0 #111}
.gstatus .gcash{margin-left:auto;font-weight:800}
.gboardwrap{margin-top:12px;border:3px solid var(--line);border-radius:var(--r);overflow:auto;background:#b1d1e3;box-shadow:0 4px 0 #111;-webkit-overflow-scrolling:touch}
.gboard{position:relative;width:100%;aspect-ratio:1/1;user-select:none;-webkit-user-select:none}
.gboardwrap.zoom .gboard{width:220%}
.gboard img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ghit{position:absolute;padding:0;border:0;background:transparent;border-radius:2px}
.ghit:active{background:rgba(255,255,0,.35)}
.gown{position:absolute;width:3.2%;height:3.2%;transform:translate(-50%,-50%);border:2px solid #111;border-radius:3px;box-shadow:0 1px 0 #111;pointer-events:none}
.gtok{position:absolute;width:6%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #111;display:grid;place-items:center;
  font-size:clamp(11px,3.2vw,18px);box-shadow:0 2px 0 rgba(0,0,0,.6);transition:left .15s linear,top .15s linear;pointer-events:none;z-index:3;line-height:1}
.gboardwrap.zoom .gtok{font-size:clamp(16px,6vw,30px)}
.gtok.sm{position:static;transform:none;width:32px;height:32px;font-size:17px;flex:none;box-shadow:none}
.gcenter{position:absolute;left:76%;top:51.5%;transform:translate(-50%,-50%);pointer-events:none;z-index:2}
.gdice{display:flex;gap:6%;justify-content:center}
.die{width:clamp(26px,8cqw,90px);aspect-ratio:1/1;background:#fff;border:2px solid #111;border-radius:18%;box-shadow:0 3px 0 #111;display:grid;padding:12%;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.die i{width:78%;aspect-ratio:1/1;border-radius:50%;background:#111;place-self:center}
.d1 i{grid-area:2/2}
.d2 i:nth-child(1){grid-area:1/1}.d2 i:nth-child(2){grid-area:3/3}
.d3 i:nth-child(1){grid-area:1/1}.d3 i:nth-child(2){grid-area:2/2}.d3 i:nth-child(3){grid-area:3/3}
.d4 i:nth-child(1){grid-area:1/1}.d4 i:nth-child(2){grid-area:1/3}.d4 i:nth-child(3){grid-area:3/1}.d4 i:nth-child(4){grid-area:3/3}
.d5 i:nth-child(1){grid-area:1/1}.d5 i:nth-child(2){grid-area:1/3}.d5 i:nth-child(3){grid-area:2/2}.d5 i:nth-child(4){grid-area:3/1}.d5 i:nth-child(5){grid-area:3/3}
.d6 i:nth-child(1){grid-area:1/1}.d6 i:nth-child(2){grid-area:2/1}.d6 i:nth-child(3){grid-area:3/1}.d6 i:nth-child(4){grid-area:1/3}.d6 i:nth-child(5){grid-area:2/3}.d6 i:nth-child(6){grid-area:3/3}
.gdice.rolling .die{animation:shake .14s linear infinite}
@keyframes shake{0%{transform:rotate(-12deg) translateY(-3px)}50%{transform:rotate(12deg) translateY(2px)}100%{transform:rotate(-12deg) translateY(-3px)}}
.gzoom{display:flex;justify-content:flex-end;margin-top:8px}
.gactions{margin-top:12px}
.gwait{text-align:center;font-weight:800;padding:14px;background:rgba(255,255,255,.6);border:2px dashed #111;border-radius:var(--r)}
.gdeed{padding:0;overflow:hidden}
.gdeedh{padding:10px 14px;color:#fff;font-weight:800;text-transform:uppercase;border-bottom:var(--bw) solid var(--line);text-shadow:0 1px 0 rgba(0,0,0,.4)}
.gdeedb{padding:12px 14px;line-height:1.6}
.gdeed .grid2{padding:0 14px 14px}
.gdeed .muted{padding:0 14px 12px}
.glog{padding:6px 14px;max-height:260px;overflow:auto}
.gl{padding:6px 0;border-bottom:1px dashed #9aa;font-size:14px}
.gl:last-child{border:0}
.gl span{color:var(--mute);font-size:12px;margin-right:8px;font-weight:700}
.tokpick button{font-size:20px;background:#fff;display:grid;place-items:center}
/* Etappe 2/3 */
.gown.mort{opacity:.45;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.7) 0 2px,transparent 2px 4px)}
.gbadge[data-tip]{pointer-events:auto;cursor:help}
.gbadge{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1.5px solid #111;border-radius:4px;padding:0 2px;font-size:clamp(7px,2.1vw,12px);line-height:1.25;white-space:nowrap;pointer-events:none;z-index:2;font-style:normal}
.gboardwrap.zoom .gbadge{font-size:clamp(11px,4vw,20px)}
.gbadge i{font-style:normal;font-weight:800;padding:0 2px;border-radius:2px;margin-right:1px}
.gbadge i.r{background:#ddd}.gbadge i.n{background:#9cd3f0}
.gauction,.goffer,.gcardshow{margin-top:12px;animation:rise .3s ease-out both}
.gcount{float:right;background:#fff;color:#111;border-radius:99px;padding:0 10px;font-size:14px}
.gcount.hot{background:var(--red);color:#fff;animation:shake .3s linear infinite}
.gbidrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 14px 10px}
.gbidrow b{margin-right:auto}
.goffer{border-color:var(--gold);box-shadow:0 3px 0 #111}
.gcardshow{background:#fff7c2}
.gcardshow div{margin-top:4px}
.gpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gpick .btn{text-transform:none;font-size:13px}
.gsw{display:inline-block;width:12px;height:12px;border:1.5px solid #111;border-radius:2px;margin-right:6px;flex:none;vertical-align:-1px}
.gbuild{margin-top:10px;padding:10px 12px}
.gbh{display:flex;align-items:center;gap:6px}.gbh .m{margin-left:auto;font-weight:800;font-size:14px}
.gbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gbtns .btn{text-transform:none;font-size:12px;padding:7px 9px}
.gmrow{display:flex;align-items:center;gap:6px;padding:8px 0;border-bottom:1px dashed #9aa}
.gmrow .btn{margin-left:auto;text-transform:none}
.gchk{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #111;border-radius:6px;padding:8px 10px;margin:6px 0;font-weight:700}
.gchk input{width:18px;height:18px}
.gdt{width:100%;border-collapse:collapse;margin:8px 0;font-size:14px}
.gdt td{padding:2px 4px;border-bottom:1px dotted #bbb}.gdt td:last-child{text-align:right;font-weight:700}
.gdt tr.cur td{background:#fff3a0}
/* Bebauung in der Brettmitte – Größen relativ zur Brettbreite (cqw), damit sie beim Zoomen mitwachsen */
.gboard{container-type:inline-size}
#gcity{position:absolute;inset:0;pointer-events:none;z-index:2}
.gcityd{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.25cqw;padding:0;border:0;background:none;pointer-events:auto;max-width:12cqw}
.gcityd .flag{width:2.6cqw;height:1.7cqw;background:var(--oc);border:.35cqw solid #111;border-radius:.3cqw;display:block}
.gcityd .bl{display:grid;grid-template-columns:repeat(4,auto);gap:.25cqw;padding:.3cqw;background:rgba(0,0,0,.28);border-radius:.4cqw}
.gcityd .cb{display:block;width:2.1cqw;height:2.1cqw;border:.25cqw solid #111;border-radius:.2cqw;box-shadow:inset 0 -.5cqw 0 rgba(0,0,0,.22)}
.gcityd .cb.res{background:#e7e9ec}
.gcityd .cb.ind{background:#7fc8ee}
.gcityd .cb.dead{opacity:.3}
.gcityd .sp{display:flex;align-items:flex-end;gap:.3cqw}
.gcityd .sp i{font-style:normal;line-height:1}
.gcityd .sky{display:block;width:2cqw;height:6cqw;background:repeating-linear-gradient(180deg,#334 0 .5cqw,#9cf .5cqw .8cqw);border:.25cqw solid #111;border-radius:.3cqw .3cqw 0 0}
.gcityd .tow{display:block;width:2.6cqw;height:7.5cqw;background:linear-gradient(90deg,#c9a227,#ffe27a,#c9a227);border:.25cqw solid #111;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.gcityd .std{display:block;width:4.6cqw;height:2.8cqw;background:radial-gradient(ellipse at center,#3a3 0 45%,#ddd 46% 100%);border:.25cqw solid #111;border-radius:50%}
.gcityd .bon,.gcityd .haz{display:grid;place-items:center;width:3.6cqw;height:3.6cqw;font-size:2.4cqw;border:.35cqw solid #111;border-radius:50%}
.gcityd .bon{background:#c8f7c5}.gcityd .haz{background:#ffb4ac}
.gsupply{background:#fff;border:1.5px solid #111;border-radius:6px;padding:7px 10px;font-size:13px;margin-bottom:10px}

/* ===== Laptop: großes Spielfeld links, Seitenleiste rechts ===== */
.glayout{display:flex;flex-direction:column}.gcol{display:contents}
@media (min-width:1000px){
  .glayout{display:grid;grid-template-columns:min(calc(100vh - 165px),calc(100% - 448px)) 420px;justify-content:center;grid-template-rows:auto 1fr;gap:0 28px;align-items:start;margin-top:16px}
  .gcol{display:block}
  .gcol-board{grid-column:1;grid-row:1/3;position:sticky;top:148px}
  .gcol-board .gboardwrap{margin:0;width:100%;max-width:none}
  .gcol-board .gzoom{display:none}
  .gboardwrap.zoom .gboard{width:100%}
  .gcol-side1{grid-column:2;grid-row:1}.gcol-side1 .gstatus{margin-top:0;font-size:17px;padding:12px 14px}
  .gcol-side2{grid-column:2;grid-row:2}
  .gcol-side2 h2{margin-top:22px}
  .glog{max-height:340px;overflow:auto}
  .gtok{font-size:clamp(14px,1.6vw,24px)}
}

/* Info-Blase (Laptop) */
.gtip{position:fixed;z-index:30;display:none;max-width:320px;background:#fff;border:3px solid #111;border-radius:8px;box-shadow:0 5px 0 rgba(0,0,0,.4);padding:9px 12px;font-size:14px;line-height:1.4;pointer-events:none}
.gtip .gtip-what{font-weight:800;font-size:16px;margin-bottom:6px;padding-bottom:6px;border-bottom:2px solid #111}
.gtip .gtip-head{font-weight:800;margin-bottom:3px}.gtip .gtip-head i{display:inline-block;width:12px;height:12px;border:2px solid #111;border-radius:3px;margin-right:6px;vertical-align:-1px}
.gtip .gtip-head span{font-weight:600;color:#46606f;font-size:12px}
@media (hover:hover){.gcityd [data-tip]{cursor:help}.gcityd [data-tip]:hover{outline:2px solid #fff;outline-offset:1px}}

/* ===== Spielfeld hervorheben ===== */
body[data-view=spiel]{background:radial-gradient(ellipse at 50% 35%,var(--board) 0%,color-mix(in srgb,var(--board) 70%,#0b2a3c) 100%) fixed}
.gboardwrap{border:4px solid var(--plate,#b3000b);outline:3px solid #111;outline-offset:0;box-shadow:0 0 0 5px rgba(255,255,255,.55),0 14px 34px rgba(0,0,0,.45),0 6px 0 #111;margin-left:3px;margin-right:3px}
@media (max-width:999px){html body[data-view=spiel] .wrap{padding-left:6px;padding-right:6px}}
@media (min-width:1000px){
  .gcol-board .gboardwrap{margin:6px}
  html body[data-view=spiel] header.top{position:relative}
  html body[data-view=spiel] .wrap{max-width:1720px}
  .glayout{grid-template-columns:min(calc(100vh - 34px),calc(100% - 392px)) 360px!important}
  .gcol-board{top:12px!important}
}
.gtok.cur{z-index:4;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--pc),0 0 18px 6px var(--pc),0 3px 0 rgba(0,0,0,.65);animation:gtokpulse 1.2s ease-in-out infinite}
@keyframes gtokpulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
.ghl{position:absolute;display:none;pointer-events:none;z-index:1;border:4px solid var(--pc);border-radius:4px;background:color-mix(in srgb,var(--pc) 22%,transparent);
  box-shadow:0 0 0 2px #fff,0 0 16px 5px var(--pc);animation:ghlpulse 1.4s ease-in-out infinite}
@keyframes ghlpulse{0%,100%{opacity:1}50%{opacity:.55}}
#gmine{position:absolute;inset:0;pointer-events:none;z-index:1}
.gmine{position:absolute;border:3px solid var(--pc);border-radius:3px;box-shadow:inset 0 0 0 1px #fff,inset 0 0 10px color-mix(in srgb,var(--pc) 60%,transparent)}
@media (prefers-reduced-motion:reduce){.gtok.cur,.ghl{animation:none}}