/*!
 * game-style.css | Dinosaur Game WordPress Plugin | https://wordpress.org/plugins/dino-game
 * This plugin is free to use under the GPLv2 license. | https://www.gnu.org/licenses/gpl-2.0.html
 *
 * This file contains CSS forked from the 'T-Rex runner' game in Chromium.
 * Chromium is under Copyright 2015 by The Chromium Authors. All rights reserved.
 * See also: https://cs.chromium.org/chromium/src/LICENSE
 *
 */

.wp-block-dinogame-dinogame {
	position: relative;
}

.hidden {
	display: none;
}

.dino-game-wrapper:first-of-type {
	display: block;
	border: 1px solid #535353;
	margin: 1em auto;
	background: rgba(255, 255, 255, 0.5);
}

.dino-icon {
	-webkit-user-select: none;
	user-select: none;
	display: inline-block;
}

.dino-game-wrapper .dino-inner {
	color: #2b2b2b;
	line-height: 0;
	font-size: 0;
	margin: 16px auto;
	max-width: 600px;
	width: 100%;
}

.dino-game-wrapper .dino-container {
	max-width: 100%;
	overflow: hidden;
	width: 100%;
}

.dino-game-wrapper .dino-canvas {
	max-width: 100%;
	opacity: 1;
	overflow: hidden;
	z-index: 2;
	position: static;
}

.dino-game-wrapper .controller {
	background: rgba(247, 247, 247, .1);
	left: 0;
	width: 100vw;
	z-index: 1;
}

#dinosaur-game,
[id^=dino-game-sprites] {
	display: none;
}

/* 3DKowal modern Dino UI */
.dino3dk-shell {
    width: 100%;
    max-width: 900px;
    margin: 28px auto;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(0,0,0,.08);
    color: #171717;
    font-family: inherit;
}
.dino3dk-start,.dino3dk-result {padding:42px 24px;text-align:center;background:linear-gradient(180deg,#fafafa,#fff)}
.dino3dk-kicker{font-size:10px;font-weight:800;letter-spacing:.15em;color:#888;margin-bottom:9px}
.dino3dk-start h2,.dino3dk-result h2{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-.04em}
.dino3dk-start>p{max-width:560px;margin:12px auto 24px;color:#666}
.dino3dk-rewards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:700px;margin:0 auto 24px}
.dino3dk-rewards>div{padding:15px 9px;border:1px solid #e7e7e7;border-radius:15px;background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.04)}
.dino3dk-rewards strong,.dino3dk-rewards span{display:block}
.dino3dk-rewards strong{font-size:22px}.dino3dk-rewards small{font-size:11px;color:#888}.dino3dk-rewards span{margin-top:4px;font-size:13px;font-weight:700}
.dino3dk-play,.dino3dk-again,.dino3dk-submit,.dino3dk-copy{border:0;border-radius:11px;padding:12px 20px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.dino3dk-play,.dino3dk-again,.dino3dk-submit{background:#151515;color:#fff;box-shadow:0 7px 18px rgba(0,0,0,.14)}
.dino3dk-play{min-width:145px;padding:14px 26px}
.dino3dk-stage{padding:12px;background:#f5f5f5;border-top:1px solid #eee;border-bottom:1px solid #eee}
.dino3dk-stagebar{max-width:780px;margin:0 auto 9px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.dino3dk-stagebar>span{font-size:9px;font-weight:800;letter-spacing:.12em;color:#888}
.dino3dk-stop{border:1px solid #ddd;border-radius:9px;background:#fff;padding:8px 12px;font:inherit;font-size:10px;font-weight:800;cursor:pointer}
.dino3dk-stage .dino-game-wrapper{max-width:780px!important;margin:0 auto!important;border:0!important;border-radius:15px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.dino3dk-result h2{font-size:32px}
.dino3dk-score{margin:10px 0 22px;font-size:20px!important;font-weight:800}
.dino3dk-prize{max-width:520px;margin:0 auto 20px;padding:20px;border:1px solid #e7e7e7;border-radius:17px;background:#fafafa}
.dino3dk-prize>small{display:block;font-size:9px;font-weight:800;letter-spacing:.13em;color:#888}
.dino3dk-reward{display:block;margin:7px 0 13px;font-size:25px;font-weight:800}
.dino3dk-code{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.dino3dk-code code{padding:10px 13px;border:1px dashed #ccc;border-radius:9px;background:#fff;font:700 14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dino3dk-copy{background:#e9e9e9;color:#111}
.dino3dk-copy-status,.dino3dk-rank-status,.dino3dk-no-code{display:block;margin-top:8px;color:#777;font-size:11px}
.dino3dk-rank-entry{max-width:520px;margin:0 auto 20px;padding:19px;border:1px solid #e7e7e7;border-radius:17px;text-align:left}
.dino3dk-rank-entry h3{margin:0 0 5px;font-size:17px}.dino3dk-rank-entry p{margin:0 0 12px;color:#777;font-size:12px}
.dino3dk-nick-row{display:flex;gap:8px}.dino3dk-nick-row input{min-width:0;flex:1;padding:10px 11px;border:1px solid #ddd;border-radius:9px;font:inherit}
.dino3dk-ranking{padding:26px 20px;background:#fff}.dino3dk-ranking-title{max-width:620px;margin:0 auto 15px;display:flex;justify-content:space-between;align-items:end}
.dino3dk-ranking-title span{font-size:9px;font-weight:800;letter-spacing:.13em;color:#888}.dino3dk-ranking-title h3{margin:2px 0 0;font-size:24px;letter-spacing:-.03em}.dino3dk-ranking-title b{padding:6px 9px;border-radius:999px;background:#f1f1f1;color:#666;font-size:9px;letter-spacing:.1em}
.dino3dk-ranking-list{max-width:620px;margin:auto}.dino3dk-ranking-list ol{margin:0;padding:0;list-style:none}.dino3dk-ranking-list li{display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;padding:10px 3px;border-bottom:1px solid #eee}.dino3dk-ranking-list li>b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f1f1f1;font-size:10px}.dino3dk-ranking-list li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}.dino3dk-ranking-list li>strong{font-size:12px}.dino3dk-empty{padding:15px;border:1px dashed #ddd;border-radius:11px;text-align:center;color:#888;font-size:12px}.dino3dk-empty strong,.dino3dk-empty span{display:block}.dino3dk-empty span{margin-top:3px}
.dino3dk-start[hidden],.dino3dk-result[hidden],.dino3dk-stage[hidden],.dino3dk-code[hidden]{display:none!important}
@media(max-width:680px){.dino3dk-shell{border-radius:18px}.dino3dk-start,.dino3dk-result{padding:30px 15px}.dino3dk-rewards{grid-template-columns:repeat(2,1fr)}.dino3dk-stage{padding:8px}.dino3dk-nick-row{flex-direction:column}.dino3dk-submit{width:100%}.dino3dk-ranking{padding:22px 15px}}

/* v8: centered empty reward state on desktop and mobile */
.dino3dk-empty {
    width: 100%;
    box-sizing: border-box;
    grid-column: 1 / -1;
    padding: 16px;
    border: 1px dashed #ddd;
    border-radius: 14px;
    text-align: center;
    color: #777;
}
@media (max-width: 680px) {
    .dino3dk-rewards {
        width: 100%;
        box-sizing: border-box;
    }
    .dino3dk-empty {
        text-align: center;
    }
}


/* v12: reward legend replaces the daily ranking */
.dino3dk-legend {
    padding: 28px;
    background: #fff;
    border-top: 1px solid #eee;
}

.dino3dk-legend-title {
    max-width: 720px;
    margin: 0 auto 16px;
}

.dino3dk-legend-title span {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    color: #888;
}

.dino3dk-legend-title h3 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -.025em;
}

.dino3dk-legend-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
}

.dino3dk-legend-list > div {
    padding: 15px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 15px;
    background: #fafafa;
    text-align: center;
}

.dino3dk-legend-list strong,
.dino3dk-legend-list span {
    display: block;
}

.dino3dk-legend-list strong {
    font-size: 21px;
}

.dino3dk-legend-list strong small {
    font-size: 11px;
    color: #777;
}

.dino3dk-legend-list span {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
}

.dino3dk-empty {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    border: 1px dashed #ddd;
    border-radius: 14px;
    text-align: center;
    color: #777;
}

@media (max-width: 680px) {
    .dino3dk-legend {
        padding: 22px 16px;
    }

    .dino3dk-legend-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dino3dk-legend-title h3 {
        font-size: 19px;
    }
}

.dino3dk-legend-note {
    margin: 6px 0 0;
    color: #777;
    font-size: 12px;
}