/* İyilik Hamlesi Online — the visual language of the original v1.4 game */
:root {
  color-scheme:light;
  --paper:#f5f2e9; --white:#fffefb; --ink:#233c38; --text:#233c38;
  --muted:#667974; --green:#235f54; --deep:#173f38;
  --mint:#e7eee7; --gold:#b68a38; --gold-light:#f5e7c7;
  --terracotta:#b4664b; --red:#a44939; --red-bg:#f9eae4;
  --line:#dcded3; --shadow:0 14px 45px #24483b0b;
  --radius:22px; --body:ui-rounded,'Aptos','Segoe UI',Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --time:#6b6397; --money:#916e23; --knowledge:#317785; --health:#a45d58;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background-color:var(--paper);background-image:radial-gradient(#8a958521 .6px,transparent .6px);background-size:9px 9px;color:var(--ink);font:16px/1.55 var(--body);min-height:100vh}
a{color:var(--green)}
a:hover{color:var(--deep)}
button,input,select{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.48;cursor:not-allowed}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #c99338;outline-offset:3px}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{line-height:1.18}
svg.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
button svg.icon{width:19px;height:19px}
.skip{position:fixed;top:-80px;left:12px;z-index:100;background:var(--white);padding:12px 15px}
.skip:focus{top:10px}
.hidden{display:none!important}
.muted,.subtle{color:var(--muted)}
.subtle{font-size:13px}
.tiny{font-size:11px}
.eyebrow{font-size:11px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:7px}
.gap{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.divider{height:1px;background:var(--line);margin:15px 0}
.headingrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.headingrow h1,.headingrow h2{margin:0}
.bar{background:#fffefbec;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.bar-inner{max-width:1440px;min-height:84px;margin:auto;padding:14px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand-logo{height:52px;max-width:min(54vw,310px);width:auto;object-fit:contain;display:block}
.bar-right{display:flex;align-items:center;gap:12px}
.rules-link{border:0;background:transparent;color:var(--muted);border-radius:10px;padding:10px 14px;min-height:43px;font-size:13px;font-weight:700}
.rules-link:hover{color:var(--green);background:#eaf0e9}
.status{display:inline-flex;gap:6px;align-items:center;font-size:11px;color:var(--muted);padding:8px 11px;border:1px solid var(--line);border-radius:20px;background:var(--white);white-space:nowrap}
.status:before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:#b4b8ad}
.status.live{color:var(--green);border-color:#bad6c3;background:#f1f9f1}
.status.live:before{background:#2c906b}
.container{max-width:1384px;padding:32px 40px 45px;margin:0 auto}
.footer{border-top:1px solid var(--line);max-width:1384px;margin:30px auto 0;padding:18px 40px 30px;color:var(--muted);font-size:11px;text-align:center}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--green);text-decoration:underline}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.card h2{font-family:var(--serif);font-size:27px;font-weight:500;letter-spacing:-.018em;margin:0 0 14px}
.card h3{font-size:16px;font-weight:730;margin:0 0 11px}
.hero{padding:24px 0 22px}
.hero h1{font-family:var(--serif);font-size:clamp(37px,4.2vw,64px);font-weight:500;letter-spacing:-.045em;line-height:1.08;margin:8px 0 16px}
.hero h1 em{font-style:normal;color:var(--terracotta)}
.hero p{color:var(--muted);font-size:17px;line-height:1.66;max-width:530px}
.landing-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,480px);gap:clamp(28px,5vw,72px);align-items:start}
.hero-copy{padding:12px 0}
.hero-logo{display:block;width:min(100%,360px);height:auto;margin:0 0 15px}
.landing-hero .hero-copy h1{margin-top:8px}
.landing-hero .setup-panel{padding:28px}
.hero-deck{position:relative;height:238px;max-width:470px;margin:34px 0 9px}
.mini-card{position:absolute;display:flex;flex-direction:column;justify-content:space-between;top:6px;width:171px;height:213px;border:1px solid #dde1d6;border-radius:18px;background:var(--white);box-shadow:0 16px 25px #264c3920;padding:20px}
.mini-card:nth-child(1){left:18px;transform:rotate(-13deg);color:var(--knowledge)}
.mini-card:nth-child(2){left:134px;top:-1px;transform:rotate(1deg);background:var(--green);color:#f7e4b9;z-index:2}
.mini-card:nth-child(3){left:250px;transform:rotate(12deg);color:var(--terracotta)}
.mini-card .icon{width:50px;height:50px;stroke-width:1.2;align-self:center}
.mini-card .mini-label{font-size:10px;letter-spacing:.12em;font-weight:750;text-transform:uppercase}
.mini-card .mini-title{font-family:var(--serif);font-size:25px;line-height:1.07}
.mini-card .mini-detail{font-size:11px}
.open-rooms-section{margin-top:23px}
.open-rooms-section .room-browser{padding:25px 28px}
.open-rooms-section .headingrow h2{margin:0}
.room-code-entry{margin:0 0 20px;padding:17px 18px;border:1px solid #c9dcd2;border-radius:14px;background:#f1f7f1}
.room-code-entry label{margin-bottom:4px;font-size:15px}
.room-code-entry .subtle{margin:0 0 12px}
.room-code-entry-controls{display:flex;gap:11px;align-items:stretch}
.room-code-entry-controls input{max-width:240px;min-width:0;flex:1;text-transform:uppercase;letter-spacing:.14em;font-weight:750;font-variant-numeric:tabular-nums}
.room-code-entry-controls button{white-space:nowrap}
@media(max-width:560px){.room-code-entry{padding:15px 13px}.room-code-entry-controls{flex-direction:column}.room-code-entry-controls input{max-width:none}.room-code-entry-controls button{width:100%}}
.columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1.1fr);gap:22px}
.form-field{margin-bottom:17px}
label{display:block;color:var(--ink);font-size:13px;font-weight:700;margin-bottom:8px}
input,select{width:100%;height:46px;background:var(--white);color:var(--ink);border:1px solid #cdd8ce;border-radius:11px;padding:8px 13px;outline-offset:2px}
input:focus,select:focus{outline:2px solid #b6cea9;border-color:#7da98d}
input[type=number]{font-variant-numeric:tabular-nums}
button.btn{border:1px solid transparent;background:var(--green);color:white;border-radius:12px;padding:12px 19px;font-size:14px;font-weight:680;min-height:47px;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.3;transition:transform .15s,background .15s}
button.btn:hover:not(:disabled){background:var(--deep);transform:translateY(-1px)}
button.btn:active:not(:disabled){transform:translateY(0)}
button.primary{background:var(--green);color:#fff}
button.primary:hover:not(:disabled){background:var(--deep)}
button.ghost{background:var(--white);border-color:var(--line);color:var(--ink)}
button.ghost:hover:not(:disabled){background:#edf1e9}
button.gold{background:#e7c784;color:#513e1d}
button.gold:hover:not(:disabled){background:#dcb665}
button.warn{background:var(--red-bg);color:var(--red);border-color:#e8c9bf}
button.warn:hover:not(:disabled){background:#f0d4cb}
button.small{font-size:12px;min-height:38px;padding:8px 12px}
button.block{width:100%}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line);background:#ffffff65;border-radius:30px;font-size:11px;font-weight:700;color:var(--green);letter-spacing:.02em}
.pill.active{color:#1e644c;border-color:#b8d1c3;background:#eef5ed}
.pill.gold{border-color:#e1cfab;background:#f8efda;color:#7d612c}
.filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:14px}
.rooms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.roomitem{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fbfcf8;border:1px solid #e0e4d9;border-radius:13px;padding:13px 14px;min-width:0}
.roomitem strong{color:var(--green);font-size:17px;letter-spacing:.05em}
.room-meta{font-size:12px;color:var(--muted);margin-top:3px}
.empty{padding:26px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px;grid-column:1/-1;font-size:13px}
.notice{padding:12px 14px;border:1px solid #c9dcd2;border-radius:13px;background:#edf6ed;color:#31564c;margin:13px 0;font-size:13px}
.notice.warn{border-color:#e6cabb;background:#f9eee7;color:#874b3b}
.lobbygrid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.85fr);gap:22px}
.playerlist{display:grid;gap:10px}
.playerline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;background:#f9fbf5;border:1px solid #e2e7da;border-radius:12px}
.playerline strong{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.room-code{font-family:var(--serif);font-size:34px;font-weight:700;letter-spacing:.11em;color:var(--green);padding:8px 0}
.gamebar{display:flex;align-items:center;gap:28px;margin-bottom:19px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:1px}
.stat .big{font-size:22px;font-weight:650;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat .small{font-size:11px;color:var(--muted)}
.gamebar .stat:last-child{margin-left:auto}
.goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.goals-section{margin:15px 0 22px;padding:20px;background:var(--white);border:1px solid var(--line);border-radius:19px}
.goals-section .headingrow{margin-bottom:12px}
.goals-section h2{font-size:20px;font-weight:720}
.goal{background:#f1f7ed;border:1px solid #c8dbca;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:9px;min-width:0}
.goal.won{background:#faf5e8;border-color:#e4d5ae}
.goal-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.goal h3{font-size:17px;margin:0;color:var(--ink)}
.goal p{font-size:13px;color:#526b60;line-height:1.45;min-height:18px}
.prize{white-space:nowrap;font-size:15px;font-weight:770;color:var(--green)}
.goal.won .prize{color:#99702c}
.progress{height:6px;background:#dce8d7;border-radius:9px;overflow:hidden}
.progress i{display:block;height:100%;border-radius:9px;background:var(--green);transition:width .3s ease}
.goal.won .progress i{background:var(--gold)}
.goal .subtle{font-size:12px}
.board{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,305px);gap:23px;align-items:start}
.gamearea{min-width:0}
.gamearea h2{font-family:var(--serif);font-size:30px;font-weight:500}
.gamearea h3{font-size:17px;margin-bottom:11px}
.gamearea .eyebrow{margin-bottom:7px}
.story-card{--accent:var(--green);background:var(--white);border:1px solid #d9ded4;border-radius:23px;box-shadow:var(--shadow);overflow:hidden}
.card-masthead{position:relative;display:flex;align-items:center;gap:15px;padding:19px 23px;border-bottom:1px solid #e2e3d8;background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 11%,#fffefb),#fffefb);overflow:hidden}
.card-masthead:after{content:'';position:absolute;right:-25px;top:-36px;width:135px;height:135px;transform:rotate(25deg);border:1px solid var(--accent);opacity:.09;border-radius:28px;box-shadow:0 0 0 18px var(--accent),0 0 0 35px #ffffff;pointer-events:none}
.card-emblem{width:53px;height:53px;border-radius:15px;background:var(--accent);color:#fffef3;display:grid;place-items:center;flex-shrink:0}
.card-emblem .icon{width:30px;height:30px;stroke-width:1.35}
.card-heading{flex:1;min-width:0;z-index:1}
.card-category{font-size:10px;font-weight:760;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card-masthead h2{font-family:var(--serif);font-weight:500;font-size:31px;margin:4px 0 0;color:var(--ink)}
.card-id{font-size:11px;color:var(--muted);font-weight:720;z-index:1}
.card-inner{padding:23px}
.scenario-text{font-size:16px;line-height:1.65;color:#394e48;margin:0 0 18px;white-space:pre-line}
.options{display:grid;gap:9px}
.option{display:flex;align-items:flex-start;gap:12px;padding:13px;border:1px solid #e4e6dc;background:#fbfcf8;border-radius:12px}
.letter{width:29px;height:29px;border-radius:8px;border:1px solid #d7dfd5;background:var(--white);display:inline-grid;place-items:center;font-size:13px;font-weight:750;color:#748077;flex-shrink:0}
.option-copy{min-width:0;flex:1;font-size:14px;line-height:1.55}
.option .detail{font-size:12px;font-weight:750;border-radius:8px;padding:5px 8px;display:inline-block;white-space:nowrap;margin-top:5px;background:#e6efdf;color:#386542}
.option .detail.negative{background:var(--red-bg);color:var(--red)}
.option .detail.resource{background:#fff1d5;color:#88631d}
.controls{display:grid;gap:11px;margin-top:19px}
.pass-choice{background:#eaf5ef;border:1px solid #93c1a9;border-radius:16px;padding:16px}
.pass-choice h3{color:#1b5f47;margin-bottom:7px;font-size:16px}
.pass-choice p{font-size:13px;margin-top:4px;color:#38594e}
.pass-choice .subtle{color:#5e756d}
.chance{display:flex;justify-content:center;align-items:center;gap:15px;margin:20px 0 8px}
.chance button{width:106px;height:143px;position:relative;border-radius:13px;border:4px solid #fffaf1;background:var(--green);color:#eed8a5;box-shadow:0 5px 12px #244b3a1c;transition:transform .22s,box-shadow .22s;display:grid;place-items:center}
.chance button:nth-child(1){transform:rotate(-5deg)}
.chance button:nth-child(3){transform:rotate(5deg)}
.chance button:hover:not(:disabled){transform:translateY(-8px);box-shadow:0 14px 20px #244b3a29}
.chance button:disabled{opacity:1;cursor:default}
.chance button .icon{width:45px;height:45px;stroke-width:1}
.chance button:before{content:'';position:absolute;inset:9px;border:1px solid #e3c98b70;border-radius:8px;pointer-events:none}
.timer{font-variant-numeric:tabular-nums;color:var(--green);font-weight:700}
.timer.urgent{color:var(--red)}
.result{border:1px solid #cbdcbf;background:#e7efe2;color:var(--ink);border-radius:15px;padding:17px;margin:18px 0 0}
.result strong{font-size:18px}
.result p{color:var(--muted);font-size:12px;margin-top:5px}
.result.result-positive{background:#e7efe2;border-color:#cbdcbf;color:#28583e}
.result.result-negative,.result.error{background:#f7eae3;border-color:#e8ccc0;color:var(--red)}
.result.result-resource{background:#fff2d3;border-color:#e4ce9d;color:#89651e}
.auctionlist{display:grid;gap:9px;margin:16px 0}
.bidrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--white);font-size:13px}
.bidrow.lead{border-color:#c6d6b9;background:#f2f7eb}
.bidrow strong{text-align:right;font-weight:690}
.eventcost{font-size:14px;font-weight:720;color:var(--green);margin:13px 0}
.offerfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.section-card{padding:28px}
.stage-empty{text-align:center;padding:35px 24px}
.stage-empty .deck-symbol{width:116px;height:145px;background:var(--green);color:#f5deaf;border:5px solid #fff7e7;border-radius:15px;box-shadow:0 8px 20px #163e2e29;display:grid;place-items:center;margin:6px auto 20px;transform:rotate(-5deg)}
.stage-empty .deck-symbol .icon{width:52px;height:52px}
.stage-empty h2{font-family:var(--serif);font-size:31px;font-weight:500;margin-bottom:11px}
.stage-empty p{color:var(--muted);font-size:14px;margin-bottom:18px}
.mine{background:#fffefbaa;border:1px solid var(--line);border-radius:20px;padding:18px}
.mine h3{font-family:var(--body);font-size:18px;font-weight:740;margin:0}
.dp{font-size:26px;font-weight:680;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--green)}
.dp .tiny{color:var(--muted)}
.resgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.res{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px;background:#f8faf5;border:1px solid #e0e7dc;border-radius:11px;min-width:0}
.res small{font-size:11px;font-weight:660;color:var(--muted);white-space:nowrap}
.res small .icon{width:15px;height:15px;vertical-align:-2px;margin-right:2px}
.res b{font-size:19px;font-variant-numeric:tabular-nums}
.res[data-resource=time]{color:var(--time)}
.res[data-resource=money]{color:var(--money)}
.res[data-resource=knowledge]{color:var(--knowledge)}
.res[data-resource=health]{color:var(--health)}
.other-list{display:grid;gap:9px}
.other{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px}
.other.me-turn{background:#f1f7ed;border-color:#c6d7c9}
.other .resgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.other .res{border:0;background:transparent;padding:3px;display:flex;flex-direction:column;gap:2px;align-items:center}
.other .res small{font-size:9px}
.other .res small .icon{display:none}
.other .res b{font-size:15px}
.distances{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.distances span{border:1px solid #dee6dc;background:#f6f8f2;color:#536c60;padding:5px 7px;border-radius:7px;font-size:10px;font-weight:670}
.mine .notice{margin-bottom:0}
.feedback{display:none}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:50;max-width:min(95vw,520px);background:var(--deep);color:var(--white);border-radius:12px;padding:12px 17px;font-size:13px;box-shadow:0 14px 32px #24483b30}
.rules-dialog{width:min(900px,94vw);max-height:min(90vh,950px);margin:auto;border:1px solid var(--line);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:0 25px 85px #234b3c55;padding:0}
.rules-dialog::backdrop{background:#1229238c;backdrop-filter:blur(3px)}
.rules-shell{max-height:90vh;display:flex;flex-direction:column}
.rules-head{display:flex;justify-content:space-between;align-items:center;padding:18px 23px;background:var(--white);border-bottom:1px solid var(--line)}
.rules-head h2{font-family:var(--serif);font-weight:500;font-size:27px}
.rules-close{border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);font-size:24px;width:42px;height:42px}
.rules-content{overflow:auto;padding:18px 24px 28px}
.rules-content details{background:var(--white);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.rules-content summary{padding:14px 16px;color:var(--green);font-weight:700;cursor:pointer}
.rules-content details>div{padding:0 17px 18px;font-size:14px}
.rules-content p{margin:12px 0;line-height:1.7}
.rules-content h3{font-size:16px;margin-top:17px}
.rules-content ul{padding-left:25px}
.rules-content li{margin:7px 0}
.rules-content table{border-collapse:collapse;width:100%;font-size:12px;margin:12px 0}
.rules-content td,.rules-content th{padding:9px;border:1px solid var(--line);text-align:left}
.rules-content tr:nth-child(even){background:#f5f7f1}
@media(max-width:1080px){
  .landing-hero{grid-template-columns:minmax(0,1fr) minmax(330px,440px);gap:28px}
  .board{grid-template-columns:minmax(0,1fr) 255px;gap:16px}
  .container{padding:26px 25px 36px}
  .bar-inner{padding:14px 25px}
  .hero-deck{transform:scale(.88);transform-origin:top left;margin-bottom:-15px}
}
@media(max-width:860px){
  .landing-hero{grid-template-columns:1fr}
  .hero-copy{padding:0}
  .hero-deck{transform:none;margin:25px 0}
  .goals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board,.lobbygrid{grid-template-columns:1fr}
  .board aside{display:grid;grid-template-columns:1fr;gap:12px}
  .other-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rooms{grid-template-columns:1fr}
}
@media(max-width:560px){
  .bar-inner{min-height:69px;padding:11px 16px}
  .brand-logo{height:39px;max-width:44vw}
  .bar-right{gap:5px}
  .rules-link{padding:8px;font-size:12px}
  .status{font-size:10px;padding:6px 9px}
  .container{padding:20px 14px 30px}
  .hero{padding:15px 0 20px}
  .hero h1{font-size:clamp(34px,9vw,44px)}
  .hero p{font-size:15px}
  .hero-deck{transform:scale(.7);transform-origin:top left;height:167px;margin:25px 0 0}
  .card,.section-card,.landing-hero .setup-panel{padding:19px 17px;border-radius:17px}
  .card h2{font-size:24px}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters>div:last-child{grid-column:1/-1}
  .goal{padding:13px}
  .goals{grid-template-columns:1fr;gap:9px}
  .goals-section{padding:15px}
  .gamebar{gap:15px}
  .stat .big{font-size:18px}
  .gamebar .stat:last-child{margin-left:0}
  .card-inner{padding:16px 13px}
  .card-masthead{padding:16px 14px;gap:11px}
  .card-emblem{width:42px;height:42px}
  .card-emblem .icon{width:24px;height:24px}
  .card-masthead h2{font-size:24px}
  .card-id{font-size:10px}
  .scenario-text{font-size:14px}
  .option{padding:10px}
  .option-copy{font-size:13px}
  .chance{gap:7px}
  .chance button{width:28%;max-width:100px;height:133px}
  .other-list{grid-template-columns:1fr}
  .footer{padding:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Final touches from the original game desktop */
.game-top h1{font-family:var(--serif);font-size:34px;font-weight:500;letter-spacing:-.03em}
.dp.negative{color:var(--red)}
.rule-bullet{position:relative;padding-left:17px}
.rule-bullet:before{content:'•';position:absolute;left:0;color:var(--green);font-weight:800}
.rules-table-wrap{max-width:100%;overflow-x:auto}
.rules-content th{background:#e9efe6;color:var(--green)}

/* Original logo artwork is intentionally reused; trim its generous blank
   canvas visually without altering the asset or adding a second logo. */
.brand-logo{width:216px;height:57px;max-width:min(37vw,216px);object-fit:cover;object-position:center;mix-blend-mode:multiply}
.hero-logo{width:min(100%,360px);height:111px;object-fit:cover;object-position:center;mix-blend-mode:multiply}
.goal-top h3{font-size:16px;font-weight:730;margin:0;line-height:1.35}
.goal{gap:8px}
@media(max-width:560px){
  .brand-logo{width:142px;height:43px;max-width:40vw}
  .hero-logo{width:min(100%,360px);height:109px}
  .goals-section{padding:13px}
  .goals{gap:8px}
  .goal{padding:12px 13px;gap:6px}
  .goal p{line-height:1.4}
}

/* Original v1.4-style gentle card entrance; pure visual motion. */
@keyframes card-deal-in{from{opacity:.45;translate:0 10px}to{opacity:1;translate:0 0}}
.chance button{animation:card-deal-in .35s ease-out both}
.chance button:nth-child(2){animation-delay:.07s}
.chance button:nth-child(3){animation-delay:.14s}

.chat-panel{margin-top:20px;padding:18px 20px}
.chat-panel h3{font-family:var(--serif);font-size:22px;font-weight:500;margin:0 0 12px}
.chat-messages{height:195px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);background:#fafbf7;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:9px}
.chat-line{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:13px;overflow-wrap:anywhere}
.chat-line.own{color:var(--green)}
.chat-line strong{flex-shrink:0}
.chat-line span{white-space:pre-wrap;min-width:0}
.chat-compose{display:flex;gap:8px}
.chat-compose input{min-width:0;flex:1}
.chat-compose button{flex-shrink:0}
.chat-form{margin-top:12px}.chat-form label{margin-bottom:6px}.chat-hint{margin-top:8px}
@media(max-width:560px){.chat-panel{padding:14px}.chat-messages{height:165px}}

/* Authenticated player identity is read-only; games continue when profile opens. */
.bar-right .account-header-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid var(--line);background:var(--white);font-size:13px;font-weight:750;white-space:nowrap}
.bar-right .account-header-link[hidden]{display:none}
/* A guest sees a longer sign-up action in the same slot as "Hesabım".
   On phones, move actions to their own row rather than clipping the link. */
@media(max-width:560px){
  .guest-account-entry .bar-inner{flex-wrap:wrap;row-gap:6px}
  .guest-account-entry .bar-right{width:100%;min-width:0;justify-content:space-between}
  .guest-account-entry .bar-right .account-header-link{padding:8px 9px;font-size:12px}
}
.registered-player-name{display:block;padding:12px 14px;border-radius:11px;border:1px solid #cdd8ce;background:#f2f7f0;color:var(--green);font-size:14px}


/* Every approved avatar is a separate true SVG, never an enlarged sprite. */
.avatar-art{display:block;flex-shrink:0;max-width:100%;object-fit:cover;image-rendering:auto;background:#e9edef}


/* Keep text and voice conversation accessible without another long page scroll.
   Equal-height stretching is intentionally disabled so large voice rooms can grow. */
.communications-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(340px,1fr);gap:18px;align-items:start;margin-top:20px}
.communications-grid>.chat-panel,.communications-grid>.voice-panel{margin-top:0;min-width:0}
@media(max-width:900px){.communications-grid{grid-template-columns:minmax(0,1fr)}}