/* ==========================
   Base commune
========================== */

.sbo-game-shell{
	display:grid;
	grid-template-columns:minmax(360px, 420px) 1fr 240px;
	gap:15px;

	min-height:450px;
	max-height:calc(100vh - 180px);

	overflow:hidden;
}

.sbo-game-left,
.sbo-game-center,
.sbo-game-right{
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    padding:10px;
}

.sbo-mobile-word-row{
    display:block;
}

.sbo-game-left{
    text-align:center;
}

.sbo-game-center{
    position:relative;
}

.sbo-game-right{
    text-align:center;
}

.sbo-game-title{
    font-size:1rem;
    font-weight:600;
    margin-bottom:15px;
    text-align:center;
	border:none;
}

.sbo-game-instruction{
    font-size:1rem;
    font-weight:600;
    margin-bottom:15px;
    text-align:center;
}

.sbo-game-left img{
    display:block !important;
    margin:0 auto !important;
    max-width:60%;
    height:auto;
}

.sbo-target-word{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:4px;
    padding-top:20px;
	white-space:nowrap;
    word-break:keep-all;
    overflow-wrap:normal;
}

.sbo-target-word .sbo-target-slot{
    display:flex !important;
    align-items:center;
    justify-content:center;

    width:28px !important;
    height:32px;

    border:1px solid #d0ab7a;
    border-radius:6px;

    background:#fdf6ee;

    font-size:1rem !important;
    font-weight:700;
    line-height:1 !important;

    margin:0 !important;
    padding:0 !important;
}

.sbo-target-slot-filled{
    background:#b7e4c7 !important;
    border-color:#40916c !important;
    color:#1b4332;
}

.sbo-letter-zone{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
}

.sbo-letter{
    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    border:2px solid #333;

    font-size:1.8rem;
    font-weight:bold;

    cursor:pointer;
}

.sbo-letter-correct{
    opacity:0.4;
}

.sbo-letter-error{
    transform:scale(1.08);
}

.sbo-game-errors{
    margin-top:15px;

    font-size:1rem;
    font-weight:600;

    color:#895129;

    text-align:center;
}

.sbo-error-count{
    display:inline-block;

    min-width:24px;

    font-size:1.2rem;
    font-weight:700;

    color:#c0392b;
}

.sbo-game-feedback{
    font-weight:600;
	padding-bottom:30px;
}

.sbo-restart-button{
    margin-top:15px;
    padding:8px 16px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
}

/*Les lettres qui tombent*/

.sbo-falling-letter{
    position:absolute;
    width:52px;
    height:52px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.45rem;
    font-weight:700;

    cursor:pointer;
    user-select:none;

    background:#ffe8a3;
    border:1px solid #333;
}

.sbo-letter-zone{
    position:relative;
    width:100%;
    height:100%;
    min-height:320px;
    overflow:hidden;
}

.sbo-start-button{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    min-width:250px;
    max-width:90%;

    padding:16px 24px;

    font-size:1.2rem;
    font-weight:400;

    color:#ffffff !important;
    background:#895129;

    border:1px solid #d0ab7a;
    border-radius:12px;

    cursor:pointer;

    text-align:center;
    white-space:normal;

    z-index:100;
}
.sbo-start-button:hover,
.sbo-start-button:focus,
.sbo-start-button:active{
    background:#895129;
    border:1px solid #d0ab7a;
    color:inherit;
    transform:translate(-50%, -50%);
    box-shadow:none;
    outline:none;
    opacity:1;
}
/* Jeu 1 - personnage / animation */

.sbo-character-zone{
	margin:20px 0;
	text-align:center;
}

.sbo-character{
	width:130px;
	max-width:80%;
	height:auto;
	display:inline-block;
	font-size:4rem;
	line-height:1;
}

.sbo-character-jump{
	animation:sboJump 0.45s ease;
}

.sbo-character-big-jump{
    animation:sboBigJump 1.2s ease;
}

.sbo-character-shake{
    animation:sboShake 0.4s ease;
}

@keyframes sboJump{
	0%{ transform:translateY(0); }
	40%{ transform:translateY(-18px); }
	100%{ transform:translateY(0); }
}

@keyframes sboBigJump{

    0%{
        transform:translateY(0) scale(1);
    }

    15%{
        transform:translateY(-30px) scale(1.08);
    }

    30%{
        transform:translateY(0) scale(1);
    }

    45%{
        transform:translateY(-24px) scale(1.06);
    }

    60%{
        transform:translateY(0) scale(1);
    }

    75%{
        transform:translateY(-18px) scale(1.04);
    }

    100%{
        transform:translateY(0) scale(1);
    }
}

@keyframes sboShake{
    0%{ transform:translateX(0); }
    25%{ transform:translateX(-8px); }
    50%{ transform:translateX(8px); }
    75%{ transform:translateX(-8px); }
    100%{ transform:translateX(0); }
}

.sbo-game-settings {
	display: none;
}

.sbo-wind-piece{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	min-width:90px;
	height:62px;

	padding:0 14px;
	margin:8px;

	background:#efe2c4 !important;

	border:none;
	border-radius:0 !important;

	color:#3f2a14;

	font-size:1.4rem;
	font-weight:700;

	cursor:pointer;

	box-shadow:
		0 2px 4px rgba(0,0,0,0.08);

	position:relative;
	z-index:20;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
	clip-path:polygon(
		3% 8%,
		18% 2%,
		36% 7%,
		52% 3%,
		70% 8%,
		93% 4%,
		98% 22%,
		95% 42%,
		99% 66%,
		94% 91%,
		72% 96%,
		54% 92%,
		36% 98%,
		18% 93%,
		4% 96%,
		1% 72%,
		5% 50%,
		2% 28%
	);
}

.sbo-wind-piece:hover{
	box-shadow:
		0 2px 4px rgba(0,0,0,0.08);
}

/*Le vent qui souffle*/
.sbo-wind-word-game .sbo-letter-zone{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;

	gap:10px;

	min-height:320px;
}

.sbo-wind-piece-used{
	opacity:0 !important;
	visibility:hidden !important;
	cursor:not-allowed;
	pointer-events:none;
}

.sbo-wind-word-game .sbo-target-slot{
	border:none !important;
	background:transparent !important;
	min-width:44px !important;
	width:auto !important;
	padding:0 6px !important;
}

.sbo-wind-word-game .sbo-target-slot:empty{
	visibility:hidden;
}

.sbo-wind-piece-error{
	transform:scale(1.08);
	border-color:#c0392b !important;
}

/* ==========================
   Jeu 2 - décor vent
========================== */

.sbo-wind-word-game .sbo-game-center{
	position:relative;

	background-image:url('../images/fond-vent-qui-souffle.webp');
	background-repeat:no-repeat;

	background-position:center center;
	background-size:cover;

	overflow:hidden;
}

.sbo-wind-decor{
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:1;
}

.sbo-wind-word-game .sbo-wind-icon{
	display:block !important;
	position:absolute !important;

	background-image:url('../images/feuille-lou-leo.webp');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;

	opacity:0.65;
	filter:contrast(3) saturate(3) brightness(0.75);

	z-index:2 !important;
}

/* positions */

.wind-1{
	top:5%;
	left:4%;
	width:60px;
	height:60px;
	animation:sboWindStorm1 6s ease-in-out infinite;
}

.wind-2{
	top:18%;
	right:8%;
	width:80px;
	height:80px;
	scale:-1 1;
	animation:sboWindStorm2 8s ease-in-out infinite;
}

.wind-3{
	top:48%;
	left:10%;
	width:120px;
	height:120px;
	animation:sboWindStorm3 7s ease-in-out infinite;
}

.wind-4{
	bottom:8%;
	right:8%;
	width:90px;
	height:90px;
	scale:-1 1;
	animation:sboWindStorm4 9s ease-in-out infinite;
}

.wind-5{
	top:68%;
	left:48%;
	width:95px;
	height:95px;
	animation:sboWindStorm5 6.5s ease-in-out infinite;
}

.wind-6{
	top:30%;
	left:35%;
	width:85px;
	height:85px;
	scale:-1 1;
	animation:sboWindStorm3 7.5s ease-in-out infinite;
}

.wind-7{
	top:75%;
	left:5%;
	width:90px;
	height:90px;
	animation:sboWindStorm5 8.5s ease-in-out infinite;
}

@keyframes sboWindStorm1{
	0%{ transform:translate(-80px, 0) rotate(-10deg); }
	50%{ transform:translate(180px, 40px) rotate(10deg); }
	100%{ transform:translate(-80px, 0) rotate(-10deg); }
}

@keyframes sboWindStorm2{
	0%{ transform:translate(120px, -20px) rotate(15deg); }
	50%{ transform:translate(-160px, 80px) rotate(-15deg); }
	100%{ transform:translate(120px, -20px) rotate(15deg); }
}

@keyframes sboWindStorm3{
	0%{ transform:translate(-120px, 40px) rotate(-20deg); }
	50%{ transform:translate(220px, -60px) rotate(20deg); }
	100%{ transform:translate(-120px, 40px) rotate(-20deg); }
}

@keyframes sboWindStorm4{
	0%{ transform:translate(60px, 80px) rotate(25deg); }
	50%{ transform:translate(-200px, -40px) rotate(-25deg); }
	100%{ transform:translate(60px, 80px) rotate(25deg); }
}

@keyframes sboWindStorm5{
	0%{ transform:translate(-60px, -60px) rotate(-30deg); }
	50%{ transform:translate(240px, 90px) rotate(30deg); }
	100%{ transform:translate(-60px, -60px) rotate(-30deg); }
}

.sbo-wind-word-game .sbo-letter-zone .sbo-wind-piece:nth-of-type(1){
	animation:sboPieceMove1 9s linear infinite;
}

.sbo-wind-word-game .sbo-letter-zone .sbo-wind-piece:nth-of-type(2){
	animation:sboPieceMove2 11s linear infinite;
}

.sbo-wind-word-game .sbo-letter-zone .sbo-wind-piece:nth-of-type(3){
	animation:sboPieceMove3 8s linear infinite;
}

.sbo-wind-word-game .sbo-letter-zone .sbo-wind-piece:nth-of-type(4){
	animation:sboPieceMove4 10s linear infinite;
}

.sbo-wind-word-game .sbo-letter-zone .sbo-wind-piece:nth-of-type(5){
	animation:sboPieceMove5 7s linear infinite;
}

.sbo-wind-word-game .sbo-letter-zone .sbo-wind-piece:nth-of-type(6){
	animation:sboPieceMove6 12s linear infinite;
}

.sbo-wind-word-game .sbo-letter-zone .sbo-wind-piece:nth-of-type(7){
	animation:sboPieceMove7 11s linear infinite;
}

/* ==========================
   Mouvements des morceaux
========================== */

@keyframes sboPieceMove1{
	0%{ transform:translate(0,0)rotate(-5deg); }
	25%{ transform:translate(80px,30px)rotate(10deg); }
	50%{ transform:translate(160px,-50px)rotate(2deg); }
	75%{ transform:translate(240px,30px)rotate(-12deg); }
	100%{ transform:translate(0,0); }
}

@keyframes sboPieceMove2{
	0%{ transform:translate(0,0)rotate(3deg); }
	25%{ transform:translate(-5px,-40px)rotate(20deg); }
	50%{ transform:translate(180px,50px)rotate(-8deg); }
	75%{ transform:translate(-100px,-30px)rotate(12deg); }
	100%{ transform:translate(0,0); }
}

@keyframes sboPieceMove3{
	0%{ transform:translate(0,0)rotate(6deg); }
	25%{ transform:translate(-100px,20px)rotate(15deg); }
	50%{ transform:translate(180px,-100px)rotate(-15deg); }
	75%{ transform:translate(90px,10px)rotate(15deg); }
	100%{ transform:translate(0,0); }
}

@keyframes sboPieceMove4{
	0%{ transform:translate(0,0)rotate(-6deg); }
	25%{ transform:translate(-120px,20px)rotate(15deg); }
	50%{ transform:translate(-60px,-80px) rotate(-10deg); }
	75%{ transform:translate(80px,35px) rotate(12deg); }
	100%{ transform:translate(0,0); }
}

@keyframes sboPieceMove5{
	0%{ transform:translate(0,0); }
	25%{ transform:translate(-20px,40px)rotate(20deg); }
	50%{ transform:translate(240px,-100px) rotate(-20deg); }
	75%{ transform:translate(-110px,35px) rotate(20deg); }
	100%{ transform:translate(0,0); }
}

@keyframes sboPieceMove6{
	0%{ transform:translate(0,0); }
	25%{ transform:translate(-20px,40px)rotate(20deg); }
	50%{ transform:translate(140px,-80px) rotate(-20deg); }
	75%{ transform:translate(-80px,35px) rotate(20deg); }
	100%{ transform:translate(0,0); }
}

@keyframes sboPieceMove7{
	0%{ transform:translate(0,0); }
	25%{ transform:translate(-20px,40px)rotate(20deg); }
	50%{ transform:translate(80px,-50px) rotate(-20deg); }
	75%{ transform:translate(-120px,35px) rotate(20deg); }
	100%{ transform:translate(0,0); }
}

.sbo-wind-word-game .sbo-target-word{
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:center;
	gap:0;
	padding-top:20px;
	white-space:nowrap;
}

.sbo-wind-word-game .sbo-target-slot-filled{
	display:inline-flex !important;
	align-items:center;
	justify-content:center;

	min-width:90px !important;
	height:62px !important;

	padding:0 14px !important;
	margin:0 !important;

	background:#efe2c4 !important;

	border:none !important;
	border-radius:0 !important;

	position:relative;
	z-index:20;

	color:#3f2a14 !important;

	font-size:1.4rem !important;
	font-weight:700;

	box-shadow:0 2px 4px rgba(0,0,0,0.08);

	visibility:visible;

	clip-path:polygon(
		3% 8%,
		18% 2%,
		36% 7%,
		52% 3%,
		70% 8%,
		93% 4%,
		98% 22%,
		95% 42%,
		99% 66%,
		94% 91%,
		72% 96%,
		54% 92%,
		36% 98%,
		18% 93%,
		4% 96%,
		1% 72%,
		5% 50%,
		2% 28%
	);
}

.sbo-tape-piece{
	display:none;

	width:24px;
	height:56px;

	margin:0 -12px;

	background:rgba(194,164,130,0.65);

	transform:rotate(-8deg);

	position:relative;
	top:2px;
	z-index:50;

	box-shadow:0 1px 2px rgba(0,0,0,0.12);
}

/* ==========================
   Jeu 2 - Bloc 3 : Léo dans le vent
========================== */

.sbo-wind-leo-zone{
	display:flex;
	align-items:center;
	justify-content:center;

	min-height:150px;
	margin:20px 0;
}

.sbo-wind-leo{
	width:130px;
	max-width:85%;
	height:auto;

	display:block;

	transform-origin:50% 92%;
	will-change:transform;

	animation:sboLeoWindStrong 0.8s ease-in-out infinite;
}

/* ==========================
   La carte au trésor
========================== */

.sbo-treasure-map-game{
	grid-template-columns:minmax(0, 2fr) minmax(300px, 1fr);
	max-height:none;
	min-height:520px;
	overflow:visible;
}

.sbo-treasure-map-panel,
.sbo-treasure-side{
	background:#fff;
	border:1px solid #ddd;
	border-radius:12px;
	padding:10px;
}

.sbo-treasure-map-stage{
	position:relative;
	width:100%;
	aspect-ratio:4 / 3;
	overflow:hidden;
	background:#d9f0f2;
}

.sbo-treasure-rule-audio{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 10px;
	color:#253b44;
	font-weight:700;
}

.sbo-treasure-rule-audio audio{
	max-width:260px;
	height:32px;
}

.sbo-treasure-map-image{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.sbo-treasure-map-placeholder{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	background:linear-gradient(135deg, #d9f0f2, #f4df9d);
	font-weight:700;
	color:#35545c;
}

.sbo-treasure-result{
	position:absolute;
	inset:0;
}

.sbo-treasure-result{
	z-index:4;
	background:#fff;
}

.sbo-treasure-result[hidden],
.sbo-treasure-code-piece[hidden]{
	display:none;
}

.sbo-treasure-result-image{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.sbo-treasure-mobile{
	position:absolute;
	left:8%;
	top:12%;
	z-index:3;
	width:16%;
	aspect-ratio:1 / 1;
	border:0;
	background:transparent !important;
	padding:0;
	cursor:pointer;
	transform:translate(-50%, -50%);
	transition:left 0.45s ease, top 0.45s ease, transform 0.25s ease;
	-webkit-tap-highlight-color:transparent;
}

.sbo-treasure-mobile:hover,
.sbo-treasure-mobile:focus{
	transform:translate(-50%, -50%) scale(1.06);
	background:transparent !important;
	box-shadow:none;
	outline:none;
}

.sbo-treasure-mobile:disabled{
	cursor:not-allowed;
	opacity:0.72;
}

.sbo-treasure-mobile img{
	width:100%;
	height:100%;
	object-fit:contain;
	display:block;
	pointer-events:none;
}

.sbo-treasure-mobile span{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	border-radius:999px;
	background:#fff9df;
	border:2px solid #c9a44f;
	color:#253b44;
	font-size:0.82rem;
	font-weight:700;
	text-align:center;
}

.sbo-treasure-map-game[data-universe="pirates"].is-at-step-1 .sbo-treasure-mobile{ left:13%; top:22%; }
.sbo-treasure-map-game[data-universe="pirates"].is-at-step-2 .sbo-treasure-mobile{ left:23%; top:70%; }
.sbo-treasure-map-game[data-universe="pirates"].is-at-step-3 .sbo-treasure-mobile{ left:51%; top:90%; }
.sbo-treasure-map-game[data-universe="pirates"].is-at-step-4 .sbo-treasure-mobile{ left:63%; top:52%; }
.sbo-treasure-map-game[data-universe="pirates"].is-at-step-5 .sbo-treasure-mobile{ left:75%; top:62%; }
.sbo-treasure-map-game[data-universe="pirates"].is-at-step-6 .sbo-treasure-mobile{ left:80%; top:18%; }

.sbo-treasure-map-game[data-universe="espace"].is-at-step-1 .sbo-treasure-mobile{ left:14%; top:18%; }
.sbo-treasure-map-game[data-universe="espace"].is-at-step-2 .sbo-treasure-mobile{ left:42%; top:15%; }
.sbo-treasure-map-game[data-universe="espace"].is-at-step-3 .sbo-treasure-mobile{ left:75%; top:21%; }
.sbo-treasure-map-game[data-universe="espace"].is-at-step-4 .sbo-treasure-mobile{ left:19%; top:65%; }
.sbo-treasure-map-game[data-universe="espace"].is-at-step-5 .sbo-treasure-mobile{ left:50%; top:60%; }
.sbo-treasure-map-game[data-universe="espace"].is-at-step-6 .sbo-treasure-mobile{ left:77%; top:66%; }

.sbo-treasure-map-game[data-universe="jungle"].is-at-step-1 .sbo-treasure-mobile{ left:12%; top:20%; }
.sbo-treasure-map-game[data-universe="jungle"].is-at-step-2 .sbo-treasure-mobile{ left:41%; top:18%; }
.sbo-treasure-map-game[data-universe="jungle"].is-at-step-3 .sbo-treasure-mobile{ left:73%; top:24%; }
.sbo-treasure-map-game[data-universe="jungle"].is-at-step-4 .sbo-treasure-mobile{ left:17%; top:67%; }
.sbo-treasure-map-game[data-universe="jungle"].is-at-step-5 .sbo-treasure-mobile{ left:48%; top:63%; }
.sbo-treasure-map-game[data-universe="jungle"].is-at-step-6 .sbo-treasure-mobile{ left:75%; top:69%; }

.sbo-treasure-side{
	display:grid;
	grid-template-rows:minmax(0, 1fr) auto;
	gap:12px;
}

.sbo-treasure-island-list{
	display:grid;
	gap:8px;
	max-height:520px;
	overflow:auto;
	padding-right:4px;
}

.sbo-treasure-row{
	border:1px solid #d4d8dd;
	border-radius:8px;
	padding:8px;
	background:#f8faf9;
}

.sbo-treasure-row.is-unlocked{
	border-color:#d4d8dd;
	background:#f8faf9;
}

.sbo-treasure-row.is-success{
	border-color:#40916c;
}

.sbo-treasure-row.is-failed{
	border-color:#b36b5e;
}

.sbo-treasure-row-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-bottom:6px;
}

.sbo-treasure-island-name{
	font-weight:700;
	color:#253b44;
}

.sbo-treasure-status{
	font-size:0.82rem;
	color:#5b6870;
	white-space:nowrap;
}

.sbo-treasure-word-image{
	width:54px;
	height:54px;
	object-fit:cover;
	border-radius:8px;
	float:left;
	margin:0 8px 6px 0;
}

.sbo-treasure-answer-line{
	display:flex;
	gap:6px;
	align-items:center;
	clear:both;
}

.sbo-treasure-answer{
	min-width:0;
	flex:1 1 auto;
	height:36px;
	border:1px solid #b8c5c0;
	border-radius:6px;
	padding:0 8px;
}

.sbo-treasure-answer:disabled{
	background:#fff;
	color:#253b44;
	opacity:1;
}

.sbo-treasure-action-slot{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:86px;
	min-height:36px;
}

.sbo-treasure-check,
.sbo-treasure-final-check{
	min-height:36px;
	border:1px solid #b8c5c0;
	border-radius:8px;
	background:#eef2f1;
	color:#253b44;
	font-weight:700;
	cursor:pointer;
	padding:0 12px;
}

.sbo-treasure-check:disabled,
.sbo-treasure-final-check:disabled{
	background:#eef2f1;
	color:#253b44;
	cursor:not-allowed;
	opacity:1;
}

.sbo-treasure-code-piece{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:72px;
	height:52px;
	margin-top:0;
	border:0;
	border-radius:0;
	background:transparent;
	cursor:grab;
	overflow:hidden;
	padding:0;
}

.sbo-treasure-code-piece:hover,
.sbo-treasure-code-piece:focus,
.sbo-treasure-code-piece:active{
	background:transparent !important;
	box-shadow:none;
	outline:none;
}

.sbo-treasure-code-piece img,
.sbo-treasure-final-slot img{
	width:100%;
	height:100%;
	object-fit:contain;
	display:block;
}

.sbo-treasure-final{
	border-top:1px solid #e1e4e8;
	padding-top:10px;
}

.sbo-treasure-final-grid{
	display:grid;
	grid-template-columns:repeat(6, minmax(38px, 1fr));
	gap:6px;
	margin-bottom:10px;
}

.sbo-treasure-final-slot{
	aspect-ratio:1 / 1;
	border:2px dashed #9eb0ac;
	border-radius:8px;
	background:transparent;
	padding:4px;
	cursor:pointer;
	overflow:hidden;
}

.sbo-treasure-final-slot.is-filled{
	border-color:transparent;
	background:transparent;
}

.sbo-treasure-final-check{
	width:100%;
	min-height:42px;
}

.sbo-treasure-map-game .sbo-game-feedback{
	margin:10px 0 0;
	padding:8px 10px;
	border-radius:8px;
	background:#eef6f4;
	color:#253b44;
	font-weight:600;
}

@media (min-width: 901px){
	.sbo-treasure-map-game{
		grid-template-columns:minmax(0, 1fr) minmax(260px, 300px);
		gap:10px;
		height:min(640px, calc(100dvh - 90px));
		max-height:min(640px, calc(100dvh - 90px));
		min-height:0;
		overflow:hidden;
	}

	.sbo-treasure-map-panel{
		display:grid;
		grid-template-rows:minmax(0, 1fr) auto;
		gap:6px;
		min-height:0;
		padding:6px;
	}

	.sbo-treasure-map-stage{
		height:100%;
		min-height:0;
		aspect-ratio:auto;
	}

	.sbo-treasure-rule-audio{
		gap:6px;
		margin:0;
		font-size:0.78rem;
		line-height:1.1;
	}

	.sbo-treasure-rule-audio audio{
		width:190px;
		max-width:190px;
		height:28px;
	}

	.sbo-treasure-side{
		grid-template-rows:minmax(0, 1fr) auto;
		gap:6px;
		min-height:0;
		padding:6px;
	}

	.sbo-treasure-island-list{
		align-content:start;
		gap:4px;
		max-height:none;
		min-height:0;
		overflow:visible;
		padding-right:0;
	}

	.sbo-treasure-row{
		display:grid;
		grid-template-columns:34px minmax(0, 1fr);
		grid-template-rows:auto auto;
		column-gap:5px;
		row-gap:2px;
		padding:4px;
		border-radius:6px;
	}

	.sbo-treasure-row-head{
		grid-column:2;
		margin-bottom:0;
		gap:4px;
		min-width:0;
	}

	.sbo-treasure-island-name{
		min-width:0;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		font-size:0.72rem;
		line-height:1.05;
	}

	.sbo-treasure-status{
		font-size:0.66rem;
		line-height:1.05;
	}

	.sbo-treasure-word-image{
		grid-column:1;
		grid-row:1 / span 2;
		float:none;
		width:34px;
		height:34px;
		margin:0;
		border-radius:5px;
	}

	.sbo-treasure-answer-line{
		grid-column:2;
		clear:none;
		gap:4px;
		min-width:0;
	}

	.sbo-treasure-answer{
		height:26px;
		padding:0 6px;
		border-radius:5px;
		font-size:0.78rem;
		line-height:1;
	}

	.sbo-treasure-action-slot{
		min-width:54px;
		min-height:26px;
	}

	.sbo-treasure-check,
	.sbo-treasure-final-check{
		min-height:26px;
		border-radius:6px;
		padding:0 7px;
		font-size:0.72rem;
		line-height:1;
	}

	.sbo-treasure-code-piece{
		width:46px;
		height:30px;
	}

	.sbo-treasure-final{
		padding-top:6px;
	}

	.sbo-treasure-final-grid{
		grid-template-columns:repeat(6, minmax(28px, 1fr));
		gap:4px;
		margin-bottom:6px;
	}

	.sbo-treasure-final-slot{
		border-width:1px;
		border-radius:6px;
		padding:2px;
	}

	.sbo-treasure-final-check{
		min-height:30px;
	}

	.sbo-treasure-map-game .sbo-game-feedback{
		margin:6px 0 0;
		padding:5px 7px;
		font-size:0.72rem;
		line-height:1.15;
	}
}

@media (max-width: 900px){
	.sbo-game-shell.sbo-treasure-map-game{
		grid-template-columns:1fr;
		gap:8px;
		min-height:auto;
		overflow:visible;
	}

	.sbo-treasure-map-panel,
	.sbo-treasure-side{
		padding:6px;
		border-radius:8px;
	}

	.sbo-treasure-map-panel{
		display:grid;
		gap:6px;
	}

	.sbo-treasure-rule-audio{
		gap:6px;
		margin:0;
		font-size:0.78rem;
		line-height:1.1;
	}

	.sbo-treasure-rule-audio audio{
		min-width:0;
		width:100%;
		max-width:210px;
		height:28px;
	}

	.sbo-treasure-side{
		grid-template-rows:auto auto;
		gap:6px;
	}

	.sbo-treasure-island-list{
		gap:4px;
		max-height:none;
		padding-right:0;
	}

	.sbo-treasure-row{
		display:grid;
		grid-template-columns:34px minmax(0, 1fr);
		grid-template-rows:auto auto;
		column-gap:5px;
		row-gap:2px;
		padding:4px;
		border-radius:6px;
	}

	.sbo-treasure-row-head{
		grid-column:2;
		gap:4px;
		margin-bottom:0;
		min-width:0;
	}

	.sbo-treasure-island-name{
		min-width:0;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		font-size:0.72rem;
		line-height:1.05;
	}

	.sbo-treasure-status{
		font-size:0.66rem;
		line-height:1.05;
	}

	.sbo-treasure-word-image{
		grid-column:1;
		grid-row:1 / span 2;
		float:none;
		width:34px;
		height:34px;
		margin:0;
		border-radius:5px;
	}

	.sbo-treasure-answer-line{
		display:flex;
		grid-column:2;
		clear:none;
		gap:4px;
		min-width:0;
	}

	.sbo-treasure-answer{
		height:26px;
		padding:0 6px;
		border-radius:5px;
		font-size:0.78rem;
		line-height:1;
	}

	.sbo-treasure-action-slot{
		flex:0 0 38px;
		min-width:38px;
		min-height:26px;
	}

	.sbo-treasure-check,
	.sbo-treasure-final-check{
		min-height:26px;
		border-radius:6px;
		padding:0 7px;
		font-size:0.72rem;
		line-height:1;
	}

	.sbo-treasure-check{
		width:38px;
	}

	.sbo-treasure-code-piece{
		width:42px;
		height:28px;
	}

	.sbo-treasure-final{
		padding-top:6px;
	}

	.sbo-treasure-final-grid{
		grid-template-columns:repeat(6, minmax(28px, 1fr));
		gap:4px;
		margin-bottom:6px;
	}

	.sbo-treasure-final-slot{
		border-width:1px;
		border-radius:6px;
		padding:2px;
	}

	.sbo-treasure-final-check{
		min-height:30px;
	}

	.sbo-treasure-map-game .sbo-game-feedback{
		margin:6px 0 0;
		padding:5px 7px;
		font-size:0.72rem;
		line-height:1.15;
	}
}

@media (max-width: 520px){
	.sbo-treasure-answer-line{
		display:flex;
	}

	.sbo-treasure-final-grid{
		grid-template-columns:repeat(6, minmax(24px, 1fr));
	}
}

.sbo-wind-progress-0 .sbo-wind-leo{
	animation:sboLeoWindStrong 1.05s cubic-bezier(.38,0,.28,1) infinite;
}

.sbo-wind-progress-1 .sbo-wind-leo{
	animation:sboLeoWindMedium 1.25s cubic-bezier(.38,0,.28,1) infinite;
}

.sbo-wind-progress-2 .sbo-wind-leo{
	animation:sboLeoWindLight 1.45s ease-in-out infinite;
}

.sbo-wind-progress-3 .sbo-wind-leo,
.sbo-wind-progress-4 .sbo-wind-leo,
.sbo-wind-progress-5 .sbo-wind-leo,
.sbo-wind-progress-6 .sbo-wind-leo{
	animation:sboLeoWindTiny 1.7s ease-in-out infinite;
}
@keyframes sboLeoWindStrong{

	0%{
		transform:
			translateX(-3px)
			translateY(0)
			rotate(-7deg)
			skewX(-3deg)
			scaleX(0.98)
			scaleY(1.02);
	}

	12%{
		transform:
			translateX(20px)
			translateY(2px)
			rotate(12deg)
			skewX(9deg)
			scaleX(1.13)
			scaleY(0.94);
	}

	22%{
		transform:
			translateX(7px)
			translateY(0)
			rotate(-9deg)
			skewX(-5deg)
			scaleX(0.96)
			scaleY(1.03);
	}

	34%{
		transform:
			translateX(15px)
			translateY(1px)
			rotate(8deg)
			skewX(6deg)
			scaleX(1.07)
			scaleY(0.97);
	}

	52%{
		transform:
			translateX(2px)
			translateY(0)
			rotate(-8deg)
			skewX(-4deg)
			scaleX(0.98)
			scaleY(1.02);
	}

	70%{
		transform:
			translateX(10px)
			translateY(1px)
			rotate(5deg)
			skewX(4deg)
			scaleX(1.04)
			scaleY(0.98);
	}

	100%{
		transform:
			translateX(-3px)
			translateY(0)
			rotate(-7deg)
			skewX(-3deg)
			scaleX(0.98)
			scaleY(1.02);
	}
}

@keyframes sboLeoWindMedium{

	0%{
		transform:
			translateX(-2px)
			rotate(-4deg)
			skewX(-2deg)
			scaleX(0.99)
			scaleY(1.01);
	}

	18%{
		transform:
			translateX(12px)
			translateY(1px)
			rotate(7deg)
			skewX(5deg)
			scaleX(1.07)
			scaleY(0.97);
	}

	36%{
		transform:
			translateX(3px)
			rotate(-5deg)
			skewX(-3deg)
			scaleX(0.98)
			scaleY(1.02);
	}

	62%{
		transform:
			translateX(8px)
			translateY(1px)
			rotate(4deg)
			skewX(3deg)
			scaleX(1.03)
			scaleY(0.99);
	}

	100%{
		transform:
			translateX(-2px)
			rotate(-4deg)
			skewX(-2deg)
			scaleX(0.99)
			scaleY(1.01);
	}
}

@keyframes sboLeoWindLight{

	0%{
		transform:
			translateX(0)
			rotate(-2deg)
			skewX(-1deg);
	}

	35%{
		transform:
			translateX(5px)
			rotate(3deg)
			skewX(2deg)
			scaleX(1.02)
			scaleY(0.99);
	}

	58%{
		transform:
			translateX(1px)
			rotate(-2deg)
			skewX(-1deg);
	}

	100%{
		transform:
			translateX(0)
			rotate(-2deg)
			skewX(-1deg);
	}
}

@keyframes sboLeoWindTiny{

	0%{
		transform:
			translateX(0)
			rotate(-1deg);
	}

	50%{
		transform:
			translateX(2px)
			rotate(1deg);
	}

	100%{
		transform:
			translateX(0)
			rotate(-1deg);
	}
}

/* ==========================
   Jeu 3 - Le coffre-fort
========================== */

.sbo-chest-strong-game .sbo-letter-zone{
	position:absolute;
	left:0;
	right:0;
	bottom:10px;

	display:flex;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:flex-end;

	gap:0;
	padding:0 2px 2px;
	width:100%;
	box-sizing:border-box;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	scrollbar-gutter:stable;
	scrollbar-width:thin;
	scrollbar-color:#895129 #efe2c4;

	min-height:auto !important;
	height:auto !important;
}

.sbo-chest-strong-game .sbo-letter-zone::-webkit-scrollbar{
	height:10px;
}

.sbo-chest-strong-game .sbo-letter-zone::-webkit-scrollbar-track{
	background:#efe2c4;
	border-radius:999px;
}

.sbo-chest-strong-game .sbo-letter-zone::-webkit-scrollbar-thumb{
	background:#895129;
	border:2px solid #efe2c4;
	border-radius:999px;
}

.sbo-chest-strong-game .sbo-letter-zone::-webkit-scrollbar-thumb:hover{
	background:#6f3f1f;
}

.sbo-chest-strong-game .sbo-wind-piece{
	flex:0 0 auto;
	width:58px;
	height:92px;

	background:url('../images/cle-coffre-fort.webp') center bottom / contain no-repeat !important;

	border:none !important;
	box-shadow:none !important;
	clip-path:none !important;

	color:#2f2418;
	font-size:1.2rem;
	font-weight:600;

	padding:0 !important;
	margin:0 -15px !important;

	display:flex;
	align-items:flex-end;
	justify-content:center;

	padding-bottom:16px !important;
	padding-left:16px !important;

	cursor:pointer;
}

.sbo-chest-strong-game .sbo-wind-piece-used{
	opacity:0 !important;
	visibility:hidden !important;
	pointer-events:none;
}

.sbo-chest-strong-game .sbo-game-center{

	background-image:url('../images/coffre-fort-lou-et-leo-1.webp');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;

	overflow:hidden;
}

/* Chrono coffre-fort */



.sbo-chest-timer{

	position:absolute;

	left:50%;
	top:38%;

	transform:translate(-50%, -50%);

	width:90px;
	height:90px;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:50%;

	background:rgba(92,72,54, 0.80);

	border:2px solid rgba(170,130,90,0.55);

	box-shadow:
		inset 0 0 10px rgba(0,0,0,0.45),
		0 2px 6px rgba(0,0,0,0.25);

	font-size:2rem;
	font-weight:700;

	color:rgba(255,255,255,0.85);

	text-shadow:
		0 1px 2px rgba(0,0,0,0.95);

	z-index:50;

	pointer-events:none;
}

/* ==========================
   Jeu 3 - Bloc 1 : clés sélectionnées
========================== */

.sbo-chest-strong-game .sbo-target-word{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-end;
	gap:0;
	padding-top:20px;
}

.sbo-chest-strong-game .sbo-target-slot{
	width:48px !important;
	height:76px !important;

	border:none !important;
	background:transparent !important;

	color:transparent !important;

	margin:0 -8px !important;
	padding:0 !important;

	clip-path:none !important;
	box-shadow:none !important;
}

.sbo-chest-strong-game .sbo-target-slot-filled{
	display:flex !important;
	align-items:flex-end;
	justify-content:center;

	background:url('../images/cle-coffre-fort.webp') center bottom / contain no-repeat !important;

	color:#2f2418 !important;

	font-size:1.1rem !important;
	font-weight:600 !important;

	padding-bottom:18px !important;
	padding-left:10px !important;

	visibility:visible !important;
}

.sbo-chest-strong-game .sbo-target-slot:not(.sbo-target-slot-filled){
	visibility:hidden;
}

.sbo-chest-strong-game .sbo-tape-piece{
	display:none !important;
}

/* Jeu 3 - Bloc 3 : Lou et Léo */
.sbo-chest-strong-game .sbo-game-feedback{
	position:relative;
	margin:0 auto 16px;
	padding:14px 18px 14px;
	max-width:210px;
	width:fit-content;
	text-align:center;
	font-size:1rem;
	line-height:1.25;
	color:#5b351b;
	background:#f3e0c4;
	border:2px solid #a56a3c;
	border-radius:18px;
	box-shadow:
		0 4px 0 #7a4a24,
		0 10px 18px rgba(68,38,19,0.18);
}

.sbo-chest-strong-game .sbo-game-feedback::before{
	content:"";
	position:absolute;
	bottom:-7px;     
	left:28px;

	width:12px;
	height:12px;

	background:#f3e0c4;

	border-right:2px solid #a56a3c;  /* au lieu de border-left */
	border-bottom:2px solid #a56a3c; /* au lieu de border-top */

	transform:rotate(45deg);
}

.sbo-chest-strong-game .sbo-chest-lou-leo{
	width:220px;
	max-width:85%;
	height:auto;
	display:block;
	margin:0 auto 20px;
}

.sbo-chest-lou-leo-success{
	animation:sboChestHappy 0.7s ease-in-out 2;
}

.sbo-chest-lou-leo-fail{
	animation:sboChestPlease 0.6s ease-in-out 3;
}

@keyframes sboChestHappy{
	0%{ transform:translateY(0) scale(1); }
	40%{ transform:translateY(-10px) scale(1.05); }
	100%{ transform:translateY(0) scale(1); }
}

@keyframes sboChestPlease{
	0%{ transform:rotate(0deg); }
	25%{ transform:rotate(-4deg); }
	50%{ transform:rotate(4deg); }
	75%{ transform:rotate(-3deg); }
	100%{ transform:rotate(0deg); }
}

/* ==========================
   Jeu 3 - Bouton coffre-fort
========================== */

.sbo-chest-strong-game .sbo-verify-button{

	width:80px;
	height:80px;

	padding:0 !important;

	border-radius:50%;

	background:
	radial-gradient(
		circle at 35% 35%,
		#ff6666,
		#d10000 70%
	);

	border:8px solid #b8b8b8;

	box-shadow:
		inset 0 4px 8px rgba(255,255,255,0.25),
		0 4px 10px rgba(0,0,0,0.35);

	font-size:0 !important;

	color:transparent !important;

	cursor:pointer;
}

.sbo-chest-strong-game .sbo-chest-emergency-button{
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	width:110px !important;
	height:110px !important;
	padding:0 !important;
	margin:10px auto !important;
	border-radius:50% !important;
	background:radial-gradient(circle at 35% 35%, #ff6b6b, #d00000 70%) !important;
	border:8px solid #b8b8b8 !important;
	box-shadow:inset 0 4px 8px rgba(255,255,255,0.25), 0 4px 10px rgba(0,0,0,0.35) !important;
	font-size:0 !important;
	color:transparent !important;
	cursor:pointer;
}

.sbo-chest-strong-game .sbo-chest-emergency-button::before{
	content:"";
	width:42px;
	height:42px;
	border-radius:50%;
	background:rgba(255,255,255,0.28);
}

.sbo-chest-strong-game .sbo-game-center{
	transition:background-image 0.18s ease-in-out;
}

@media (max-width: 900px){

	.sbo-game-shell{
		grid-template-columns:1fr;
		gap:10px;
		max-height:none;
		overflow:visible;
	}

	.sbo-game-title{
		margin:0 0 4px 0;
		font-size:0.95rem;
		line-height:1.1;
    }

    .sbo-game-instruction{
        margin:0 !important;
        padding:0 !important;
        font-size:0.9rem !important;
        line-height:1.1 !important;
    }

    .sbo-mobile-word-row{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:2px !important;
        margin:0 !important;
        padding:0 !important;
    }

	.sbo-mobile-word-row{
		display:grid !important;
		grid-template-columns:1fr auto;
		grid-template-areas:
			"title image"
			"word word";
		align-items:center;
		gap:4px 8px;
		margin:0 !important;
		padding:0 !important;
	}

    .sbo-target-word .sbo-target-slot{
        width:24px !important;
        height:28px;
        font-size:0.9rem !important;
		padding:0;
    }
	
	.sbo-letter-zone{
        min-height:260px;
    }

    .sbo-falling-letter{
        width:46px;
        height:46px;
        font-size:1.3rem;
    }
	
	.sbo-game-title{
    grid-area:title;
    margin:0 !important;
    text-align:left;
	}

	.sbo-mobile-word-row img{
		grid-area:image;
		max-width:70px !important;
		height:auto !important;
		margin:0 !important;
		padding:0 !important;
	}

	.sbo-target-word{
		grid-area:word;
		justify-content:center;
		width:100%;
	}
	 .sbo-game-right{
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:8px;
        align-items:center;
        padding:6px !important;
    }

    .sbo-mobile-feedback-col,
    .sbo-mobile-actions-col{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

    .sbo-game-feedback{
        margin:0 0 4px 0;
        font-size:0.9rem;
        line-height:1.1;
    }

    .sbo-character-zone{
        margin:0;
    }

    .sbo-character{
        width:70px;
        max-width:100%;
    }

    .sbo-game-errors{
        margin:0 0 8px 0;
        font-size:0.85rem;
    }

    .sbo-restart-button{
        margin:0;
        padding:6px 10px;
        font-size:0.85rem;
    }
	

	/* Jeu 2 - Le vent qui souffle */

	.sbo-wind-word-game{
		min-height:auto;
	}

	.sbo-wind-word-game .sbo-game-left,
	.sbo-wind-word-game .sbo-game-center,
	.sbo-wind-word-game .sbo-game-right{
		padding:6px !important;
	}

	.sbo-wind-word-game .sbo-mobile-word-row{
		display:grid !important;
		grid-template-columns:1fr auto;
		grid-template-areas:
			"title image"
			"word word";
		align-items:center;
		gap:4px 8px !important;
	}

	.sbo-wind-word-game .sbo-game-title{
		grid-area:title;
		margin:0 !important;
		text-align:left;
		font-size:0.95rem;
		line-height:1.1;
	}

	.sbo-wind-word-game .sbo-mobile-word-row img{
		grid-area:image;
		max-width:70px !important;
		height:auto !important;
		margin:0 !important;
	}

	.sbo-wind-word-game .sbo-target-word{
		grid-area:word;
		display:flex !important;
		flex-wrap:nowrap !important;
		justify-content:center !important;
		align-items:center !important;
		width:100%;
		padding-top:4px !important;
		overflow-x:auto;
	}

	.sbo-wind-word-game .sbo-target-slot-filled{
		min-width:58px !important;
		height:42px !important;
		padding:0 8px !important;
		font-size:1rem !important;
	}

	.sbo-wind-word-game .sbo-target-slot{
		min-width:28px !important;
	}

	.sbo-wind-word-game .sbo-tape-piece{
		width:16px;
		height:36px;
		margin:0 -8px;
		top:2px;
	}

	.sbo-wind-word-game .sbo-game-center{
		min-height:260px;
	}

	.sbo-wind-word-game .sbo-letter-zone{
		min-height:250px !important;
		gap:6px !important;
		align-content:center;
	}

	.sbo-wind-word-game .sbo-wind-piece{
		min-width:68px;
		height:46px;
		padding:0 10px;
		margin:4px;
		font-size:1rem;
	}

	.sbo-wind-word-game .sbo-start-button{
		min-width:210px;
		padding:12px 18px;
		font-size:1rem;
	}

	.sbo-wind-word-game .sbo-game-right{
		display:grid !important;
		grid-template-columns:1fr 90px;
		gap:8px;
		align-items:center;
	}

	.sbo-wind-word-game .sbo-game-feedback{
		padding-bottom:8px;
		font-size:0.9rem;
		line-height:1.15;
	}

	.sbo-wind-word-game .sbo-wind-leo-zone{
		min-height:auto;
		margin:0;
	}

	.sbo-wind-word-game .sbo-wind-leo{
		width:70px;
		max-width:100%;
	}

	.sbo-wind-word-game .sbo-verify-button,
	.sbo-wind-word-game .sbo-restart-button{
		margin-top:6px;
		padding:6px 10px;
		font-size:0.85rem;
	}

	/* Jeu 3 - Le coffre-fort */

	.sbo-chest-strong-game{
		min-height:auto;
	}

	.sbo-chest-strong-game .sbo-game-left,
	.sbo-chest-strong-game .sbo-game-center,
	.sbo-chest-strong-game .sbo-game-right{
		padding:6px !important;
	}

	.sbo-chest-strong-game .sbo-mobile-word-row{
		display:grid !important;
		grid-template-columns:1fr auto;
		grid-template-areas:
			"title image"
			"word word";
		align-items:center;
		gap:4px 8px !important;
	}

	.sbo-chest-strong-game .sbo-game-title{
		grid-area:title;
		margin:0 !important;
		text-align:left;
		font-size:0.95rem;
		line-height:1.1;
	}

	.sbo-chest-strong-game .sbo-mobile-word-row img{
		grid-area:image;
		max-width:72px !important;
		height:auto !important;
		margin:0 !important;
	}

	.sbo-chest-strong-game .sbo-target-word{
		grid-area:word;
		display:flex !important;
		flex-wrap:nowrap !important;
		justify-content:flex-start !important;
		align-items:flex-end !important;
		width:100%;
		padding-top:6px !important;
		overflow-x:auto;
		overflow-y:hidden;
		scrollbar-gutter:stable;
		scrollbar-width:thin;
		scrollbar-color:#895129 #efe2c4;
	}

	.sbo-chest-strong-game .sbo-target-word::-webkit-scrollbar{
		height:10px;
	}

	.sbo-chest-strong-game .sbo-target-word::-webkit-scrollbar-track{
		background:#efe2c4;
		border-radius:999px;
	}

	.sbo-chest-strong-game .sbo-target-word::-webkit-scrollbar-thumb{
		background:#895129;
		border:2px solid #efe2c4;
		border-radius:999px;
	}

	.sbo-chest-strong-game .sbo-target-word::-webkit-scrollbar-thumb:hover{
		background:#6f3f1f;
	}

	.sbo-chest-strong-game .sbo-target-slot{
		width:34px !important;
		height:56px !important;
		min-width:34px !important;
		margin:0 -5px !important;
	}

	.sbo-chest-strong-game .sbo-target-slot-filled{
		font-size:0.95rem !important;
		padding-bottom:12px !important;
		padding-left:6px !important;
	}

	.sbo-chest-strong-game .sbo-tape-piece{
		display:none !important;
	}

	.sbo-chest-strong-game .sbo-game-center{
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		min-height:300px;
		padding-bottom:12px !important;
		background-position:center top;
		background-size:cover;
	}

	.sbo-chest-strong-game .sbo-letter-zone{
		position:relative;
		left:auto;
		right:auto;
		bottom:auto;
		width:100%;
		min-height:170px !important;
		margin-top:auto;
		padding:0 0 2px 0;
		gap:6px;
		align-content:flex-end;
	}

	.sbo-chest-strong-game .sbo-wind-piece{
		width:44px;
		height:70px;
		margin:0 -10px !important;
		padding-bottom:12px !important;
		padding-left:10px !important;
		font-size:0.95rem;
	}

	.sbo-chest-strong-game .sbo-chest-timer{
		width:66px;
		height:66px;
		top:38%;
		font-size:1.35rem;
	}

	.sbo-chest-strong-game .sbo-game-right{
		display:grid !important;
		grid-template-columns:1fr 92px;
		gap:8px;
		align-items:center;
		padding:6px !important;
	}

	.sbo-chest-strong-game .sbo-mobile-feedback-col,
	.sbo-chest-strong-game .sbo-mobile-actions-col{
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
	}

	.sbo-chest-strong-game .sbo-game-feedback{
		position:relative;
		margin:0 0 8px 0;
		padding:12px 16px;
		max-width:100%;
		width:fit-content;
		align-self:center;
		text-align:center;
		font-size:0.9rem;
		line-height:1.25;
		color:#5b351b;
		background:#f3e0c4;
		border:2px solid #a56a3c;
		border-radius:18px;
		box-shadow:
			0 4px 0 #7a4a24,
			0 10px 18px rgba(68,38,19,0.18);
		padding-bottom:12px;
	}

	.sbo-chest-strong-game .sbo-game-feedback::before{
		content:"";
		position:absolute;
		top:-10px;
		right:36px;
		left:auto;
		bottom:auto;
		width:0;
		height:0;
		background:transparent;
		border:none;
		border-left:10px solid transparent;
		border-right:10px solid transparent;
		border-bottom:10px solid #a56a3c;
		transform:none;
		box-shadow:none;
	}

	.sbo-chest-strong-game .sbo-game-feedback::after{
		content:"";
		position:absolute;
		top:-7px;
		right:39px;
		width:0;
		height:0;
		border-left:7px solid transparent;
		border-right:7px solid transparent;
		border-bottom:7px solid #f3e0c4;
	}

	.sbo-chest-strong-game .sbo-chest-lou-leo{
		width:92px;
		max-width:100%;
		margin:0 auto 10px;
	}

	.sbo-chest-strong-game .sbo-verify-button{
		width:68px;
		height:68px;
		border-width:6px;
	}

	.sbo-chest-strong-game .sbo-chest-emergency-button{
		width:78px !important;
		height:78px !important;
		border-width:6px !important;
		margin:6px auto !important;
	}

	.sbo-chest-strong-game .sbo-chest-emergency-button::before{
		width:30px;
		height:30px;
	}

	.sbo-chest-strong-game .sbo-restart-button{
		margin:0;
		padding:6px 10px;
		font-size:0.85rem;
	}

}

@media (max-width: 320px){
	.sbo-chest-strong-game .sbo-game-left,
	.sbo-chest-strong-game .sbo-game-center,
	.sbo-chest-strong-game .sbo-game-right{
		padding:4px !important;
	}

	.sbo-chest-strong-game .sbo-mobile-word-row{
		gap:3px 6px !important;
	}

	.sbo-chest-strong-game .sbo-game-title{
		font-size:0.86rem;
	}

	.sbo-chest-strong-game .sbo-mobile-word-row img{
		max-width:58px !important;
	}

	.sbo-chest-strong-game .sbo-target-word{
		padding-top:4px !important;
	}

	.sbo-chest-strong-game .sbo-target-slot{
		width:30px !important;
		height:50px !important;
		min-width:30px !important;
		margin:0 -4px !important;
	}

	.sbo-chest-strong-game .sbo-target-slot-filled{
		font-size:0.85rem !important;
		padding-bottom:10px !important;
		padding-left:5px !important;
	}

	.sbo-chest-strong-game .sbo-game-center{
		min-height:270px;
	}

	.sbo-chest-strong-game .sbo-letter-zone{
		min-height:150px !important;
		gap:4px;
	}

	.sbo-chest-strong-game .sbo-wind-piece{
		width:40px;
		height:62px;
		margin:0 -8px !important;
		padding-bottom:10px !important;
		padding-left:8px !important;
		font-size:0.82rem;
	}

	.sbo-chest-strong-game .sbo-chest-timer{
		width:58px;
		height:58px;
		top:28%;
		font-size:1.1rem;
	}

	.sbo-chest-strong-game .sbo-game-right{
		grid-template-columns:1fr 78px;
		gap:6px;
	}

	.sbo-chest-strong-game .sbo-game-feedback{
		margin:0 0 6px 0;
		padding:10px 12px;
		font-size:0.82rem;
		line-height:1.2;
	}

	.sbo-chest-strong-game .sbo-chest-lou-leo{
		width:78px;
		margin:0 auto 6px;
	}

	.sbo-chest-strong-game .sbo-verify-button{
		width:60px;
		height:60px;
		border-width:5px;
	}

	.sbo-chest-strong-game .sbo-chest-emergency-button{
		width:68px !important;
		height:68px !important;
		border-width:5px !important;
		margin:4px auto !important;
	}

	.sbo-chest-strong-game .sbo-chest-emergency-button::before{
		width:24px;
		height:24px;
	}

	.sbo-chest-strong-game .sbo-restart-button{
		padding:5px 8px;
		font-size:0.8rem;
	}

}